/* main.css — site-specific overrides and page modules.
   Loaded AFTER colors_and_type.css + site.css. The design system
   (design-system/) stays the source of truth; only additions live here. */

/* ============================================================
   NEWSLETTER ARCHIVE
   Uses the design system's own .cols/.cols-3 + .card components —
   the same pattern as the home page's "Three ways to taste with us".
   Only two things are overridden, both for one reason: these images
   are DOCUMENT COVERS, not photographs.

   1. site.css sets `.card .ph img{position:absolute;object-fit:cover}`,
      which fills the 190px band by cropping. On a newsletter cover that
      slices the masthead off — and the archive mixes portrait, landscape
      and half-letter issues, so it would crop unpredictably. These are
      contained on warm paper instead, so every cover stays whole.
   2. Cards are flexed so the button sits on the baseline of each row
      even when summaries differ in length.
   ============================================================ */

.card.nl{ display:flex; flex-direction:column; }
.card.nl .body{ display:flex; flex-direction:column; flex:1; }
.card.nl .btn{ align-self:flex-start; margin-top:auto; }

/* document cover well — contained, never cropped */
.card.nl .ph{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.card.nl .ph img{
  position:static;
  inset:auto;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--border-ink);
  box-shadow:var(--shadow-sm);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.card.nl:hover .ph img{ transform:scale(1.03); }

/* issue meta line, sits between the summary and the button */
.card.nl .nl-meta{
  font-family:var(--serif-accent);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  color:var(--ink-soft);
  margin:0 0 18px;
}
.card.nl .nl-dot{ color:var(--line-strong); padding:0 6px; }

.nl-count{
  font-family:var(--sans);
  font-size:var(--step--1);
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:var(--space-4);
  margin-top:var(--space-6);
}

@media (prefers-reduced-motion:reduce){
  .card.nl .ph img{ transition:none; }
  .card.nl:hover .ph img{ transform:none; }
}

/* ============================================================
   HOME HERO
   site.css caps the hero headline at 640px and the lede at 560px.
   "Wines Without Compromise" broke after "Without" at 60px, so the
   text container is widened by 20% (640 -> 768, 560 -> 672).
   ============================================================ */
.hero h1{ max-width:768px; }
.hero p{ max-width:672px; }

/* ============================================================
   CONTACT FORM (KDS form suite)
   Server-side validation errors come back as a <ul> from
   clsForm.Errors.ToHtmlList(); invalid inputs are redrawn with the
   library's "kds-formfield-not-valid" class. Both styled in brand.
   ============================================================ */
.form-errors{
  background:rgba(110,31,42,.07);
  border:1px solid rgba(110,31,42,.35);
  border-left:3px solid var(--burgundy);
  border-radius:6px;
  padding:14px 18px;
  margin:0 0 22px;
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink);
}
.form-errors p{ margin:0 0 8px; }
.form-errors ul{ margin:0; padding-left:20px; }
.form-errors li{ margin:2px 0; color:var(--burgundy); }
.field input.kds-formfield-not-valid,
.field textarea.kds-formfield-not-valid{ border-color:var(--burgundy); box-shadow:0 0 0 3px rgba(110,31,42,.12); }

/* ============================================================
   CONTACT MAP (Google Maps Embed API)
   site.css's .map-ph is a 220px gradient placeholder. With a live
   iframe inside, grow it and let the iframe fill the frame; the
   "Open in Google Maps" button overlays the bottom-right corner.
   ============================================================ */
.map-ph.live{ height:340px; }
.map-ph iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.map-ph:has(iframe)::after{ content:none; }
.map-ph .map-open{ position:absolute; right:14px; bottom:12px; z-index:2; box-shadow:var(--shadow-md); }

/* ============================================================
   SQUARE PHOTO FRAME
   site.css fixes `.experience .img-ph` at 340px tall (landscape).
   `.square` opts a single entry into a 1:1 frame instead — used on
   the Vineyards page for portrait-shot sites (Wildwood, Rossi Ranch)
   where a taller frame keeps more of the photo beside long copy.
   Cropping still happens via object-fit/object-position on the img.
   ============================================================ */
.experience .img-ph.square{ height:auto; aspect-ratio:1 / 1; }

/* `.fit` shows the photo at its natural aspect ratio, full width, NO crop —
   for client-supplied images that must not be trimmed (Estate, Hawk Hill).
   The frame follows the image height instead of the fixed 340px. */
.experience .img-ph.fit{ height:auto; }
.experience .img-ph.fit img{ position:static; inset:auto; height:auto; }

/* ============================================================
   WINE CLUB (/wine-club/)
   Built from the design system's .features + .feature cards. The
   four club variants each end in a button, which the stock card
   doesn't allow for (p{margin:0}); flex the card so buttons align.
   ============================================================ */
.club-options .feature{ display:flex; flex-direction:column; }
.club-options .feature p{ margin-bottom:18px; }
.club-options .feature .btn{ align-self:flex-start; margin-top:auto; }

/* primary join panel: a burgundy card inside <main>, not a full-bleed band */
.club-join{
  background:var(--burgundy);
  color:var(--butter);
  border-radius:12px;
  box-shadow:var(--shadow-md);
  padding:48px 44px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:center;
}
.club-join::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 130% at 85% 0%,rgba(201,150,47,.22),transparent 60%); }
.club-join>*{ position:relative; }
.club-join .eyebrow{ color:var(--ochre); margin:0; line-height:1.2; }
.club-join h2{ font-family:var(--serif-display); font-weight:600; font-size:38px; color:var(--butter); margin:6px 0 14px; line-height:1.1; }
.club-join p{ font-family:var(--serif-display); font-style:italic; font-size:19px; color:var(--butter-deep); margin:0 0 26px; line-height:1.45; max-width:520px; }
/* buttons on burgundy — restate the on-dark styles so nothing upstream can wash them out */
.club-join .btn-on-dark{ background:var(--butter); color:var(--espresso); border-color:var(--butter); }
.club-join .btn-on-dark:hover{ background:#fff; border-color:#fff; color:var(--espresso); }
.club-join .btn-outline-light{ background:transparent; border-color:rgba(252,237,192,.6); color:var(--butter); }
.club-join .btn-outline-light:hover{ background:rgba(252,237,192,.16); border-color:var(--butter); color:var(--butter); }

/* benefits list: ONE marker only (a plain disc) — no icon + bullet doubling */
.club-join ul{ list-style:disc; margin:0; padding:0 0 0 20px; display:flex; flex-direction:column; gap:10px; }
.club-join li{ font-family:var(--sans); font-size:15px; line-height:1.5; color:var(--butter); padding-left:4px; }
.club-join li::marker{ color:var(--ochre); }
@media (max-width:860px){
  .club-join{ grid-template-columns:1fr; padding:36px 28px; }
}

/* "Already a member?" call-out: a tall, narrow paper card floated right at the
   top of the intro (level with the section eyebrow). Built from the .feature
   card vocabulary (paper, hairline, .fic icon tile). The intro copy is capped
   at 820px, so on desktop the card sits in the free column beside it. */
.has-callout{ display:flow-root; }   /* contain the float */
.member-callout{
  float:right;
  width:240px;
  margin:0 0 28px 40px;
  padding:26px 24px 28px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow-sm);
  text-align:center;
}
.member-callout .fic{ width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:rgba(168,82,30,.1); display:flex; align-items:center; justify-content:center; color:var(--sienna); }
.member-callout .fic i{ width:26px; height:26px; }
.member-callout strong{ display:block; font-family:var(--serif-display); font-weight:600; font-size:22px; line-height:1.15; color:var(--espresso); margin:0 0 10px; }
.member-callout p{ font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0 0 20px; }
.member-callout .btn{ display:inline-block; }
@media (max-width:860px){
  .member-callout{ float:none; width:auto; margin:0 0 32px; }
}