/* ============================================================
   Jardinier — wine landing page (build v1, scope C, rev 2)
   Assets: extracted from JardinierWeb03-prepped.psd.

   Base sizing: 1rem = 18px (set on :root).
   Class naming: brand-agnostic (.card, .info-cell).
   Stack convention: bottom→top per layer of each section.
   ============================================================ */

/* ---------- 1. Fonts ---------- */

@font-face {
  font-family: 'Gorgias';
  src: url('fonts/gorgias-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans';
  src: url('fonts/adelle-sans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans';
  src: url('fonts/adelle-sans-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kefa III';
  src: url('fonts/kefa-iii.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kefa III';
  src: url('fonts/kefa-iii-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fugu';
  src: url('fonts/fugu.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */

:root {
  font-size: 18px;                    /* 1rem = 18px (project standard) */

  /* Brand palette — sampled from flat-rendered PSD (Principle 8). */
  --c-wordmark:      #dca453;         /* JARDINIER wordmark only — brighter amber-gold */
  --c-gold:          #947d4e;         /* varietal names + icons (darker, more bronze) */
  --c-eyebrow-red:   #66232c;         /* red wines: Cabernet, Pinot Noir */
  --c-eyebrow-green: #005b13;         /* white wines: Chardonnay, Sauv Blanc, Chablis */
  --c-label-red:     #7f5155;         /* cell labels — lighter wine red */
  --c-label-green:   #407647;         /* cell labels — medium green */
  --c-sepia:         #3a2a18;
  --c-sepia-soft:    #76533a;
  --c-paper:         #f3ead7;
  --c-card-fill:     #f9f6f1;         /* varietal frame fill */

  --f-display:    'Gorgias', Georgia, serif;
  --f-body:       'Adelle Sans', -apple-system, sans-serif;
  --f-eyebrow:    'Kefa III', Georgia, serif;
  --f-quote:      'Fugu', Georgia, serif;

  --container-max: 1280px;
  --card-pad: 3rem;
}

/* ---------- 3. Reset + body ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1rem;                    /* 18px */
  line-height: 1.55;
  color: var(--c-sepia);
  /* Background tile on body, not main — per design feedback.
     bg-color set to match the texture's average (#f5eee0) AND the tear PNG's
     feathered cream so the alpha gradient blends seamlessly. --c-paper
     (#f3ead7) stays as a text-color token for taglines on dark backgrounds. */
  background-color: #f5eee0;
  background-image: url('images/paper-texture.jpg');
  background-repeat: repeat;
  background-position: top center;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }

/* ---------- 4. Hero ----------
   Structure (Principle 3 — anchored overlays):
     .hero
       .hero-stage           position context for photo + overlays
         .hero-art           photo (bottom of stack)
         .paper-tear--top    overlay; positioned relative to stage so it
                             tracks the photo as both scale with viewport
         .hero-brand         wordmark + tagline; overlay on photo
       .hero-intro           sits BELOW the stage on body cream-paper bg
*/

.hero {
  position: relative;
  /* overflow visible so the paper-tear's feathered bottom can extend past
     the hero-stage and blend into the body's cream-paper texture
     (rather than being clipped at the stage edge where any color seam
     between the tear and the body becomes visible). */
  overflow: visible;
}

/* Stage = positioning context for everything that overlays the photo. */
.hero-stage {
  position: relative;
}

/* Photo frame = the PSD canvas window. Aspect = canvas hero region
   (1440 × 623). overflow:hidden clips the layer to the canvas bounds.
   Per Principle 12 — composition crops the layer; emit the intersection. */
.hero-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 623;
  overflow: hidden;
}

/* Layer 1: hero photograph.
   The extracted asset is 1510 × 681 with bbox (-14,-58) → (1496,623) in
   PSD canvas coords — extends 58px above and 14/56px left/right of canvas.
   Positioned absolutely so the bbox offsets translate directly into CSS:
   - left = -14/1440 of canvas width
   - top  = -58/623  of canvas height
   - width = 1510/1440 of canvas width
   Height auto preserves aspect. The frame's overflow:hidden then clips
   the image to the canvas bounds — the visible region IS the PSD crop. */
.hero-art {
  position: absolute;
  top: -9.31%;       /* -58 / 623 */
  left: -0.97%;      /* -14 / 1440 */
  width: 104.86%;    /* 1510 / 1440 — image is wider than canvas */
  max-width: none;   /* override the global img max-width:100% reset */
  height: auto;
  display: block;
}

/* Layer 2: paper-tear overlays the bottom portion of hero-art.
   Anchored to .hero-stage. Torn edge positioned BELOW the book/pen
   scene per PSD intent — so the photographic composition above is
   preserved intact. PNG's alpha-feathered bottom extends past the
   stage (overflow:visible on .hero) so the manifesto sits naturally
   on the cream area in flow, no negative margin required. */
.paper-tear--top {
  position: absolute;
  left: 0;
  right: 0;
  /* PSD: tear bbox top = y=462 within canvas hero region (height 623).
     462 / 623 = 74.2% — exact, not eyeballed. */
  top: 74.2%;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* Layer 3: brand mark + tagline, top-left over hero-art (inside stage).
   Position derived from PSD canvas — wordmark bbox top-left at (109, 43).
   left = 109/1440 = 7.57%, top = 43/623 = 6.9% of stage. */
.hero-brand {
  position: absolute;
  top: 6.9%;
  left: 7.57%;
  z-index: 3;
  max-width: 36rem;
}

/* Wordmark: SVG uses currentColor; parent sets the actual color.
   Per Principle 11 — SVG assets stay color-neutral so CSS controls fill. */
.brand-mark {
  margin: 0;
  color: var(--c-wordmark);
}

.brand-mark svg {
  width: clamp(220px, 32vw, 500px);
  height: auto;
  display: block;
  /* Large drop shadow per PSD layer fX */
  filter:
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55))
    drop-shadow(0 15px 60px rgba(0, 0, 0, 0.71));
}

.tagline {
  font-family: var(--f-eyebrow);
  font-size: 1.056rem;                /* ~19px — bigger per design intent */
  letter-spacing: 0.02em;             /* tighter to keep width within J-A to R band */
  color: var(--c-paper);
  /* Vertical: TOP is inside the wordmark box but BELOW the letter baselines
     (sits in the J-descender zone, not overlapping letter strokes).
     Horizontal: LEFT aligns with the left edge of the A serif in JARDINIER
     (insetting past the J's flourish to the start of the A letterform). */
  margin: -0.7rem 0 0 clamp(60px, 7vw, 95px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Layer 4 (top): intro text — sits below the hero photo, ABOVE the paper-tear
   (z-index higher than tear) so it stays legible per design intent. */
.hero-intro {
  position: relative;
  z-index: 4;                         /* above paper-tear (z=2) — designer intent */
  /* Wide enough that each sentence fits on a single line — manifesto
     reads as 2 lines (one per sentence), not mid-sentence wraps. */
  max-width: 1100px;
  /* PSD-derived overlap (Principle 12 cousin): intro-text bbox top is at
     canvas y=550, hero region ends at y=623 — intro overlaps the hero by
     73 canvas px. 73/1440 = 5.07% of canvas width. Using -5.07vw so the
     overlap scales with viewport in lockstep with the hero stage; the
     gap from tear torn-edge to text top stays PSD-proportional. */
  margin: -5.07vw auto 0;
  /* Per Principle 13 — the intro-text owns the gap before main starts.
     PSD: intro-text ends y=647, first card starts y=672 → 25 canvas px =
     1.74vw. Replaces the eyeballed 4rem padding-bottom. */
  padding: 0 2rem 1.74vw;
  text-align: center;
  font-family: var(--f-quote);
  font-style: italic;
  font-size: 2rem;                    /* PSD 36pt at 72 DPI = 36px */
  line-height: 1.5;
  color: var(--c-sepia);
}

/* ---------- 5. Varietals ---------- */

.varietals {
  max-width: var(--container-max);
  margin: 0 auto;
  /* No bottom padding — per Principle 13, the LAST card owns its trailing
     space (or zeroes it where the footer should be flush). PSD shows the
     paper-tear--bottom overlapping the last card by ~19 canvas px → no
     additional gap between main and footer. */
  padding: 0 1.5rem 0;
}

/* ---------- 6. Card ---------- */

/* Card: image column + content column (Principle 7 — mirror PSD groups).
   PSD has bottle/vine and varietal-content as siblings of the card,
   so the title (inside varietal-content) sits alongside cells in HTML. */
.card {
  background-color: var(--c-card-fill);
  padding: var(--card-pad);
  display: grid;
  grid-template-columns: minmax(360px, auto) 1fr;
  gap: 3rem;
  position: relative;
  /* Per Principle 13 — the card owns its trailing space. Inter-card gap
     of ~30 canvas px / 1440 = 2.08vw. Travels with the .card class so
     adding/removing/reordering cards keeps the rhythm intact. */
  margin-bottom: 2.08vw;
}
/* Last card flush with the footer (PSD: last card ends y=3399, footer
   starts y=3380 — overlap, no gap). Documented exception per Principle 13. */
.varietals > .card:last-child {
  margin-bottom: 0;
}

.card-image {
  grid-column: 1;
}

.card-content {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.card-region {
  font-family: var(--f-eyebrow);
  font-size: 0.833rem;                /* PSD 15pt at 72 DPI = 15px */
  font-weight: 700;                   /* PSD: KefaIII-Bold */
  letter-spacing: 0.16em;             /* PSD tracking 160/1000 = 0.16em */
  text-transform: uppercase;
  color: var(--c-eyebrow-red);
  margin-bottom: 0.4rem;
}

.card-name {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.889rem;                /* PSD 52pt at 72 DPI = 52px */
  line-height: 1;
  color: var(--c-gold);
  margin: 0;
}

/* card image — vine + bottle (lives in card grid column 1) */
.card-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}

.card-vine {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  max-width: 480px;
  height: auto;
  opacity: 0.85;
  z-index: 1;
}

.card-bottle {
  position: relative;
  z-index: 2;
  max-height: 461px;
  width: auto;
}

/* info cells — TWO information rows per Principle 4.
   Row 1: 3 cells (narrow / wide / narrow). Vertical dividers between cells.
   Horizontal divider closes Row 1.
   Row 2: 2 blocks — wide Region cell + grouped right-block (Pairing + Vintage).
*/
/* Info cells live inside card-content (sibling of card-header). */
.info-cells {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-row {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

/* Row 1: narrow / wide / narrow — Terroir is the widest cell by design intent */
.info-row--top {
  grid-template-columns: 1fr 1.7fr 1fr;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-gold);
}

/* Vertical dividers between cells in Row 1 — border-left on the 2nd and 3rd cells */
.info-row--top > .info-cell + .info-cell {
  border-left: 1px solid var(--c-gold);
  padding-left: 1.25rem;
}

/* Row 2: wide Region cell + grouped right block.
   Right block sized to fit Pairing items on single lines
   (longest: "Roasted Portobello Mushrooms"). */
.info-row--bottom {
  grid-template-columns: 1fr minmax(260px, auto);
}

.info-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  row-gap: 0.25rem;
  align-items: start;
}

/* Grouped pair (Principle 5): shared border belongs to shared parent.
   `border-left` on the container auto-matches the height of the taller child. */
.info-cell-group {
  border-left: 1px solid var(--c-gold);
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Internal divider: Pairing (top) is separated from Vintage (bottom) by border-bottom (gold per design) */
.info-cell--pairing {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-gold);
}

/* Icons sized by HEIGHT (not width) so visual weight is consistent
   despite differing native aspect ratios. */
.info-cell-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: auto;
  height: 1.8rem;                     /* ~32px tall — uniform vertical weight */
  align-self: start;
}

/* Shared typography treatment for all small-caps labels (Principle 10).
   Used by .info-cell-label and card-meta dt — any element that needs the
   "small-caps tracked-out Adelle Sans Bold" treatment can apply .label. */
.label {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.722rem;                /* PSD 13pt at 72 DPI = 13px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-label-red);          /* lighter than eyebrow; per Principle 8 */
}

/* Role class: only layout/spacing concerns; typography comes from .label */
.info-cell-label {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 0.2rem 0;
}

.info-cell-body {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 0.667rem;                /* PSD 12pt at 72 DPI = 12px */
  line-height: 1.5;
  color: var(--c-sepia);
  margin: 0;
}

ul.info-cell-body {
  list-style: disc;
  padding-left: 1.1rem;
}

ul.info-cell-body li {
  margin-bottom: 0.15rem;
}

/* Vintage/ABV strip — sits at bottom of info-cell-group, under Pairing.
   No own border — the parent .info-cell-group's border-left covers it
   (Principle 5: shared borders belong to shared parent). */
.card-meta {
  padding: 0.3rem 0;
}

/* card-meta carries the color (both dt + dd inherit). Typography differs
   slightly from .label (tighter letter-spacing), so it stays per-context. */
.card-meta {
  color: var(--c-label-red);
}

.card-meta dl {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  font-family: var(--f-body);
  font-size: 0.722rem;
  letter-spacing: 0.1em;
}

.card-meta dt {
  text-transform: uppercase;
  font-weight: 700;
}

.card-meta dd {
  margin: 0;
  /* Vintage and ABV VALUES are body-text color + bold to distinguish from
     the per-wine-tinted labels (Vintage / ABV). */
  color: var(--c-sepia);
  font-weight: 700;
}

/* ---------- 7. Footer (positional stack: dirt → tear → brand) ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  color: var(--c-paper);
  /* No min-height — per user principle, footer height comes from content
     + padding/margin, not from box constraints. */
  /* Dirt as a CSS background via ::before — element-level, not an <img>.
     Lets the footer size flow organically (driven by content + padding)
     while the dirt fills whatever depth results. The ::before's top:6.39vw
     offset still satisfies Principle 14 (hard top of dirt hidden behind
     tear's opaque zone, body cream texture shows through the tear's
     alpha-feathered top). */
  /* Per Principle 13 — the footer does NOT own its leading space. */
}

/* Dirt as background — pseudo-element so the offset (top: 6.39vw,
   aligning with the highest point of the torn line per Principle 14)
   can be expressed without affecting site-footer-content's flow.
   background-size: cover scales the dirt to fill whatever depth the
   footer takes; background-position: center frames the texture. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 6.39vw;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('images/footer-dirt.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Layer 2: paper-tear at top of footer.
   PNG top edge aligns with footer geometric top (top:0). The PNG's
   alpha-feathered top fades into the body cream above; the opaque
   cream middle covers the dirt's hard top edge; the transparent
   bottom lets dirt show below the torn line. */
.paper-tear--bottom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* Layer 3: brand + tagline */
.site-footer-content {
  position: relative;
  z-index: 3;
  /* PSD: footer-tag bbox 663 canvas px wide (centered at canvas midpoint).
     Container needs to fit the tag on ONE line + horizontal padding.
     Wordmark (460 canvas px) and tag (663) are both center-aligned, so
     container width is governed by the tag (the wider element). */
  max-width: 900px;
  margin: 0 auto;
  /* PSD-derived padding:
     - top: footer-logo bbox top at 145 canvas px from footer top = 10.07vw
     - bottom: tag bbox bottom at canvas y=3693; footer ends at y=3790
       → 97 canvas px = 6.74vw */
  padding: 10.07vw 2rem 6.74vw;
  text-align: center;
}

.brand-mark--footer {
  /* Per Principle 13 — wordmark owns the gap before the tagline below it.
     PSD: tag bbox top at y=3655, mark bbox bottom at y=3644 → 11 canvas px
     gap = 0.76vw. */
  margin: 0 0 0.76vw 0;
}

.brand-mark--footer svg {
  /* PSD: footer-logo width = 460 canvas px / 1440 canvas width = 31.9vw.
     Cap at 460px (PSD natural). Floor at 240 for narrow viewports. */
  width: clamp(240px, 31.9vw, 460px);
  /* SVG is a block element; explicitly center within the h1 since
     text-align: center on the parent only positions inline children. */
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.6));
}

.footer-tagline {
  font-family: var(--f-quote);
  font-style: italic;
  font-size: 2rem;                    /* PSD 36pt at 72 DPI = 36px */
  color: var(--c-paper);
  letter-spacing: 0.02em;
}

/* ---------- 8. Color override by wine type (Principles 8 + 9) ----------
   Defaults above target RED wines. White wines override via the data-wine-type
   taxonomy attribute — one rule per category, not per varietal. */

.card[data-wine-type="white"] .card-region {
  color: var(--c-eyebrow-green);
}

.card[data-wine-type="white"] .label,
.card[data-wine-type="white"] .card-meta {
  color: var(--c-label-green);
}

/* ---------- 9. Mobile (≤ 720px) ---------- */

@media (max-width: 720px) {
  .hero-brand {
    top: 2rem;
    left: 1.5rem;
  }

  .hero-intro {
    padding: 2rem 1.5rem 2rem;        /* halved top, matched bottom — tighter mobile rhythm */
    font-size: 1.5rem;                /* ~27px — larger per mobile design intent */
  }
  /* Drop the desktop forced sentence break on mobile — desktop's <br> creates
     awkward mid-sentence wraps at narrow widths. Let the script font flow
     naturally; the manifesto reads as a single body that wraps to whatever
     line count the viewport gives. */
  .hero-intro br {
    display: none;
  }

  .varietals {
    padding: 0 1rem 3rem;
  }

  .card {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem;
    /* Match desktop's rendered inter-card gap (~30px = 2.08vw at 1440).
       Without this override, mobile inherits the vw-relative value which
       collapses to ~8px and loses the visual rhythm. */
    margin-bottom: 30px;
  }

  /* Override desktop's grid-column 1/2 — both children now land in the
     single mobile column. Without this, card-image (col 1) collapses to
     0 and the bottle/illo become invisible. DOM order (image first, then
     content) gives the user-asked layout: bottle on illo, then text. */
  .card-image,
  .card-content {
    grid-column: 1;
  }

  .card-name {
    font-size: 3rem;                  /* ~54px */
  }

  .card-image {
    min-height: 320px;
  }

  /* Mobile: rows stack their cells vertically; drop the vertical dividers
     (re-express the relationship as horizontal borders between stacked cells) */
  .info-row--top,
  .info-row--bottom {
    grid-template-columns: 1fr;
  }

  .info-row--top > .info-cell + .info-cell {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--c-gold);
    padding-top: 1rem;
  }

  .info-cell-group {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--c-gold);
    padding-top: 1rem;
  }

  .card-meta dl {
    grid-template-columns: auto auto auto auto;
  }

  /* Footer content needs more breathing room between the torn edge and
     the wordmark on mobile — desktop's 10.07vw collapses to ~39px at
     390 viewport, which sits too close to the torn line. Top and bottom
     balanced. */
  .site-footer-content {
    padding: 5rem 2rem 5rem;
  }

  /* Tagline font reduced so the line "Discover our labor of love, an
     abundant harvest to be shared." holds to 2 lines instead of 3. */
  .footer-tagline {
    font-size: 1.333rem;              /* ~24px */
  }
}