/* =========================================================
   TANDOORI CHICKEN POINT
   HOME — OFFERS / COMBOS SECTION
========================================================= */

.offers-section {

  position: relative;

  overflow: hidden;

}


/* =========================================================
   SECTION INTRO
========================================================= */

.offers-section .section-head {

  position: relative;

  z-index: 2;

  max-width: 760px;

  margin-left: auto;
  margin-right: auto;

}


/* =========================================================
   OFFERS GRID
========================================================= */

.offers-grid {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 22px;

  width: 100%;

  margin-top: 38px;

}


/* =========================================================
   OFFER CARD
========================================================= */

.offer-card {

  position: relative;

  overflow: hidden;

  background:

    #ffffff;

  border:

    1px solid

    rgba(215, 25, 32, 0.09);

  border-radius:

    22px;

  box-shadow:

    0 12px 35px

    rgba(45, 22, 7, 0.08);

  transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease;

}


.offer-card:hover {

  transform:

    translateY(-7px);

  border-color:

    rgba(215, 25, 32, .22);

  box-shadow:

    0 20px 48px

    rgba(45, 22, 7, .14);

}


/* =========================================================
   OFFER IMAGE
========================================================= */

.offer-image {

  position: relative;

  width: 100%;

  height: 245px;

  overflow: hidden;

  background:

    #f5eee6;

}


/* =========================================================
   IMAGE GRADIENT
========================================================= */

.offer-image::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(

      180deg,

      rgba(20, 8, 3, 0) 42%,

      rgba(20, 8, 3, .32) 100%

    );

}


/* =========================================================
   OFFER IMAGE
========================================================= */

.offer-image img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  transition:

    transform .55s ease;

}


.offer-card:hover

.offer-image img {

  transform:

    scale(1.07);

}


/* =========================================================
   OFFER CONTENT
========================================================= */

.offer-content {

  position: relative;

  padding:

    22px 21px 25px;

  background:

    #ffffff;

}


/* =========================================================
   BADGE
========================================================= */

.offer-badge {

  display: inline-flex;

  align-items: center;

  width: fit-content;

  min-height: 28px;

  padding:

    6px 11px;

  margin-bottom:

    13px;

  color:

    #ffffff;

  background:

    var(--tcp-red, #d71920);

  border-radius:

    999px;

  font-family:

    "DM Sans",
    Arial,
    sans-serif;

  font-size:

    9px;

  font-weight:

    800;

  letter-spacing:

    1.15px;

  text-transform:

    uppercase;

  line-height:

    1;

  box-shadow:

    0 6px 15px

    rgba(215, 25, 32, .14);

}


/* =========================================================
   OFFER TITLE
========================================================= */

.offer-card h3 {

  margin:

    0 0 10px;

  color:

    var(--tcp-brown, #24170f);

  font-family:

    var(--font-display, "Oswald", sans-serif);

  font-size:

    23px;

  font-weight:

    700;

  line-height:

    1.05;

  text-transform:

    uppercase;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.offer-card p {

  margin:

    0;

  color:

    var(--tcp-muted, #756960);

  font-size:

    13px;

  font-weight:

    400;

  line-height:

    1.65;

}


/* =========================================================
   PRICE WRAPPER
========================================================= */

.offer-price {

  display:

    flex;

  align-items:

    center;

  flex-wrap:

    wrap;

  gap:

    9px;

  margin-top:

    20px;

  padding-top:

    16px;

  border-top:

    1px dashed

    var(--tcp-border, #eadfd3);

}


/* =========================================================
   CURRENT PRICE
========================================================= */

.offer-price strong {

  color:

    var(--tcp-red, #d71920);

  font-family:

    var(--font-display, "Oswald", sans-serif);

  font-size:

    24px;

  font-weight:

    700;

  line-height:

    1;

  white-space:

    nowrap;

}


/* =========================================================
   OLD PRICE
========================================================= */

.offer-price del {

  color:

    #9a8d83;

  font-size:

    12px;

  font-weight:

    600;

  white-space:

    nowrap;

}


/* =========================================================
   FOOTER / FULL MENU BUTTON
========================================================= */

.offers-footer {

  display:

    flex;

  justify-content:

    center;

  margin-top:

    42px;

}


/* =========================================================
   FOOTER BUTTON
========================================================= */

.offers-footer .btn {

  min-width:

    185px;

  text-align:

    center;

}


/* =========================================================
   OPTIONAL ORANGE ACCENT
========================================================= */

.offer-card:nth-child(2)

.offer-badge {

  background:

    var(--tcp-orange, #f28c18);

}


.offer-card:nth-child(3)

.offer-badge {

  color:

    var(--tcp-brown, #24170f);

  background:

    var(--tcp-yellow, #ffc928);

}


.offer-card:nth-child(4)

.offer-badge {

  background:

    var(--tcp-red-dark, #a90d13);

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

  .offers-grid {

    grid-template-columns:

      repeat(2, minmax(0, 1fr));

    gap:

      22px;

  }


  .offer-image {

    height:

      255px;

  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

  .offers-grid {

    gap:

      18px;

  }


  .offer-image {

    height:

      235px;

  }


  .offer-content {

    padding:

      21px 20px 23px;

  }


  .offer-card h3 {

    font-size:

      22px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .offers-grid {

    grid-template-columns:

      1fr;

    gap:

      19px;

    margin-top:

      30px;

  }


  .offer-image {

    height:

      245px;

  }


  .offer-content {

    padding:

      21px 19px 24px;

  }


  .offer-badge {

    font-size:

      8.5px;

    padding:

      6px 10px;

  }


  .offer-card h3 {

    font-size:

      22px;

  }


  .offer-card p {

    font-size:

      13px;

    line-height:

      1.65;

  }


  .offer-price {

    margin-top:

      18px;

  }


  .offer-price strong {

    font-size:

      23px;

  }


  .offers-footer {

    margin-top:

      32px;

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .offer-image {

    height:

      220px;

  }


  .offer-content {

    padding:

      19px 17px 22px;

  }


  .offer-card h3 {

    font-size:

      20px;

  }


  .offer-card p {

    font-size:

      12.5px;

  }


  .offer-price strong {

    font-size:

      21px;

  }


  .offers-footer .btn {

    width:

      100%;

    min-width:

      0;

  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .offer-card,

  .offer-card img {

    transition:

      none !important;

  }

}