/* ==========================================================================
   Types of Tiffins grid — India's Flavour homepage (index.php) ONLY.

   Scoping rules so this file can NEVER conflict with style.css,
   add-style.css, or any other page on the site:
     1. Every selector is prefixed with "iftt-" (India's Flavour Tiffin
        Types) — a prefix not used anywhere else in the codebase.
     2. Colors/fonts are CSS custom properties scoped to .iftt-section
        itself, not to :root — so they can never leak into or collide
        with variables defined elsewhere.
     3. No bare element selectors (no "img", "h2", "a", etc.) — every
        rule is qualified by an .iftt- class, so this file cannot
        accidentally restyle anything outside this section.
   ========================================================================== */

.iftt-section {
  /* Palette matches the new tiffins-in-toronto1 design system */
  --iftt-green: #0B7A34;
  --iftt-green-dark: #075C27;
  --iftt-green-tint: #EAF3EC;
  --iftt-cream: #F2E8E1;
  --iftt-cream-tint: #FBF3EA;
  --iftt-amber: #E29900;
  --iftt-orange: #FB6400;
  --iftt-orange-dark: #DC5300;
  --iftt-red: #E01820;
  --iftt-white: #FFFFFF;
  --iftt-ink: #241F1A;
  --iftt-ink-soft: #6B6259;
  --iftt-line: #E7E1D8;
  --iftt-font-display: 'Montserrat', 'Poppins', sans-serif;
  --iftt-font-body: 'Roboto', sans-serif;

  background: var(--iftt-white);
  padding: 70px 20px;
  font-family: var(--iftt-font-body);
  color: var(--iftt-ink);
  box-sizing: border-box;
}

.iftt-section *,
.iftt-section *::before,
.iftt-section *::after {
  box-sizing: inherit;
}

.iftt-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.iftt-header {
  text-align: center;
  margin-bottom: 46px;
}

.iftt-title {
  font-family: var(--iftt-font-display);
  font-weight: 800;
  font-size: 38px;
  color: var(--iftt-ink);
  margin: 0 0 10px;
  line-height: 1.2;
}

.iftt-subtitle {
  font-family: var(--iftt-font-body);
  font-size: 16px;
  color: var(--iftt-ink-soft);
  margin: 0;
}

.iftt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.iftt-card {
  /* overflow is intentionally NOT hidden here — the price pill below
     floats above this card's own top edge (see .iftt-price-pill), so
     clipping overflow would cut it off. The rounded-corner look is
     produced instead by rounding .iftt-banner-img (top corners) and
     .iftt-card-body (bottom corners) directly. */
  background: var(--iftt-white);
  border: 1px solid var(--iftt-line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(36, 31, 26, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.iftt-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(36, 31, 26, 0.12);
}

/* ---- Card banner ----
   These banner images (indiantiffin.png, types-healthy2.jpg,
   combomealsss.png) are already complete, pre-designed graphics —
   title, tagline and food photo baked in at 612x390. The banner here
   just displays that image full-bleed; it does NOT add its own text
   on top (that would duplicate what's already in the image) and does
   NOT mask it into a circle (the image isn't designed for that crop). */

.iftt-card-banner {
  position: relative;
  line-height: 0;
}

.iftt-banner-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 612 / 390;
  object-fit: cover;
  /* Rounds the card's top corners directly on the image itself, since
     .iftt-card can no longer use overflow:hidden to do this (that would
     also clip the price pill floating above it — see below). */
  border-radius: 16px 16px 0 0;
}

.iftt-price-pill {
  /* Floats above the card's own top edge, straddling the boundary
     between the page background and the banner image — matching the
     reference design's "badge" pill. This only works because .iftt-card
     and .iftt-card-banner are NOT clipped with overflow:hidden. */
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--iftt-font-display);
  font-weight: 700;
  font-size: 13px;
  /* .iftt-card-banner (this pill's parent) sets line-height:0 to collapse
     the whitespace gap under the <img>. Without resetting it here, the
     pill — being a child of that container — inherits line-height:0 too,
     which collapses its own line box and throws off its rendered height/
     position (the "floating with a gap" bug). */
  line-height: normal;
  color: var(--iftt-white);
  padding: 9px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(36, 31, 26, 0.18);
  z-index: 2;
}

.iftt-price-pill--amber  { background: var(--iftt-amber); }
.iftt-price-pill--green  { background: var(--iftt-green); }
.iftt-price-pill--orange { background: var(--iftt-orange); }

/* ---- Card body (spec list + CTA) ---- */

.iftt-card-body {
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Matches .iftt-card's own border-radius on the bottom corners, now
     that the card itself doesn't clip (see .iftt-card). */
  border-radius: 0 0 16px 16px;
}

.iftt-card-title {
  font-family: var(--iftt-font-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--iftt-ink);
  margin: 0 0 16px;
}

.iftt-specs {
  margin: 0 0 22px;
  flex: 1;
}

.iftt-spec-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--iftt-line);
}

.iftt-spec-row:first-child { padding-top: 0; }
.iftt-spec-row:last-child  { border-bottom: none; }

.iftt-spec-row dt {
  font-family: var(--iftt-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--iftt-green-dark);
  margin: 0;
}

.iftt-spec-row dd {
  font-family: var(--iftt-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--iftt-ink-soft);
  margin: 0;
}

.iftt-order-btn {
  display: block;
  text-align: center;
  background: var(--iftt-red);
  color: var(--iftt-white) !important;
  font-family: var(--iftt-font-display);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 15px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(224, 24, 32, .28);
  transition: background .25s ease, transform .25s ease;
}

.iftt-order-btn:hover {
  background: var(--iftt-orange-dark);
  transform: translateY(-2px);
  color: var(--iftt-white) !important;
}

/* ---- Responsive ----
   Matches the slide-scroll behavior of the live .tiffin-grid /
   .tiffin-card on tiffins.php: below 940px the grid becomes a
   horizontally swipeable, scroll-snapped row instead of stacking
   cards full-width. */

@media (max-width: 940px) {
  .iftt-grid {
    display: flex;
    grid-template-columns: none;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 22px 4px 14px;
    margin: -22px -4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--iftt-line) transparent;
    -webkit-overflow-scrolling: touch;
  }

  .iftt-grid::-webkit-scrollbar { height: 6px; }
  .iftt-grid::-webkit-scrollbar-track { background: transparent; }
  .iftt-grid::-webkit-scrollbar-thumb { background: var(--iftt-line); border-radius: 6px; }

  .iftt-card {
    flex: 0 0 78%;
    max-width: 340px;
    scroll-snap-align: start;
  }
}

@media (max-width: 700px) {
  .iftt-section { padding: 50px 16px; }
  .iftt-title { font-size: 28px; }
}

@media (max-width: 480px) {
  .iftt-card { flex-basis: 84%; }
  .iftt-spec-row { grid-template-columns: 100%; gap: 4px; }
}