/* =====================================================================
   lxv-content.css  —  LXV editorial content styling
   Powers: Paso Robles Wine Guides (articles + hub) and the homepage
   "Explore Wine Differently" / "Explore Paso Robles" sections.

   FONTS + COLOUR come from the theme's own tokens in styles.css (:root):
   --sc-serif / --sc-sans and the --sc-* palette. Every var() has a fallback,
   so this file still renders correctly if loaded standalone.

   TYPE SIZE is set here deliberately, NOT from the theme's --fs-* scale.
   The theme scale is display-sized (h1 up to 52px, h2 up to 36px, body 18px),
   which is too heavy for long-form reading. This file uses a smaller
   editorial scale with a more generous vertical rhythm.

   >>> TO TUNE: change the values in the TUNING block below. Nothing else
   >>> needs editing — every rule derives from them.

   Scoped to .lxv-guide / .lxv-hub / .lxv-home so nothing leaks into the theme.
   ===================================================================== */

.lxv-guide,.lxv-hub,.lxv-home{
  /* ================== TUNING — edit these ==================
     Sizes are clamp(min, viewport-scale, max): min applies on phones,
     max on desktop. Lower the last number to shrink further.          */
  --f-body:    1rem;                            /* 16px — body copy      */
  --f-h1:      clamp(1.75rem, 3.2vw, 2.375rem); /* 28-38px — page title  */
  --f-h2:      clamp(1.25rem, 2vw, 1.5rem);     /* 20-24px — section head*/
  --f-deck:    clamp(1.0625rem, 1.5vw, 1.1875rem); /* 17-19px — standfirst */
  --f-card:    1.125rem;                        /* 18px — card titles    */
  --lh:        1.85;                            /* body line-height      */
  --rhythm:    1.5rem;                          /* gap under paragraphs  */
  --section-gap: 3.5rem;                        /* gap above section heads */
  --measure:   680px;                           /* article text width     */
  /* ============== end tuning ============== */

  /* small fixed sizes */
  --f-h3:  1.0625rem;  /* 17px — related/list headings */
  --f-sm:  0.875rem;   /* 14px — card body             */
  --f-xs:  0.8125rem;  /* 13px — meta, buttons         */
  --f-2xs: 0.75rem;    /* 12px — card links            */
  --f-3xs: 0.6875rem;  /* 11px — kickers               */

  /* palette + fonts — from the theme */
  --cream:var(--sc-cream,#F7F2EA); --cream-deep:var(--sc-cream-dk,#EDE5D5);
  --gold:var(--sc-gold,#C4A265);   --gold-dk:#A8865A;
  --ink:var(--sc-deep,#2C1810);    --body:var(--sc-text,#3A3530);
  --mid:var(--sc-mid,#5C2E2E);     --muted:var(--sc-text-lt,#7A726A);
  --line:var(--sc-rose,#DDCAC2);   --paper:var(--sc-white,#FEFCF9);
  --serif:var(--sc-serif,'Cormorant Garamond',Garamond,Georgia,serif);
  --sans:var(--sc-sans,'DM Sans','Helvetica Neue',Arial,sans-serif);
}
.lxv-guide *,.lxv-hub *,.lxv-home *{box-sizing:border-box;}

/* =========================== ARTICLE =========================== */
.lxv-guide{
  background:var(--cream); color:var(--body); font-family:var(--sans);
  max-width:calc(var(--measure) + 96px); margin:0 auto;
  padding:72px 48px 80px;
  font-size:var(--f-body); line-height:var(--lh); letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
.lxv-guide .lxv-kicker{font-family:var(--sans); font-size:var(--f-3xs); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dk); margin:0 0 20px;}
/* text-transform:none resets the theme's uppercase h1 (unwieldy on long titles).
   Delete that line if you want guide titles to match the theme's uppercase h1. */
.lxv-guide .lxv-title{font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:var(--f-h1); line-height:1.15; letter-spacing:.01em;
  text-transform:none; margin:0 0 22px;}
.lxv-guide .lxv-deck{font-family:var(--serif); font-size:var(--f-deck); font-weight:400;
  font-style:italic; color:var(--mid); line-height:1.6; letter-spacing:.01em;
  margin:0 0 30px;}
.lxv-guide .lxv-meta{font-size:var(--f-xs); color:var(--muted); letter-spacing:.04em;
  line-height:1.7; padding:16px 0; margin:0 0 var(--section-gap);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.lxv-guide .lxv-meta strong{color:var(--body); font-weight:500;}
.lxv-guide h2.lxv-h2{font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:var(--f-h2); line-height:1.3; letter-spacing:.01em;
  text-transform:none; font-style:normal;
  margin:var(--section-gap) 0 1rem;}
.lxv-guide p{font-size:var(--f-body); line-height:var(--lh); margin:0 0 var(--rhythm);}
/* !important is required here: styles.css sets `a { color: var(--sc-deep)
   !important }` site-wide, which otherwise repaints every link in these blocks
   (and made the dark CTA button's label invisible against its dark background). */
.lxv-guide a{color:var(--gold-dk) !important; text-decoration:none; border-bottom:1px solid var(--line);}
.lxv-guide a:hover{color:var(--ink) !important; border-bottom-color:var(--gold);}
.lxv-guide ul.lxv-list{list-style:none; margin:0 0 var(--rhythm); padding:0;}
.lxv-guide ul.lxv-list li{position:relative; padding:0 0 1rem 26px; margin:0;
  font-size:var(--f-body); line-height:1.8;}
.lxv-guide ul.lxv-list li::before{content:''; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; background:var(--gold); border-radius:50%;}
.lxv-guide ul.lxv-list li strong{color:var(--ink); font-weight:600;}
.lxv-guide .lxv-schedule{margin:0 0 var(--rhythm); padding:0; list-style:none;}
.lxv-guide .lxv-schedule li{display:flex; gap:22px; padding:20px 0;
  border-bottom:1px solid var(--line);}
.lxv-guide .lxv-schedule li:last-child{border-bottom:0;}
.lxv-guide .lxv-schedule .lxv-time{flex:0 0 80px; font-weight:700; color:var(--gold-dk);
  font-size:var(--f-xs); letter-spacing:.03em; padding-top:.25em;}
.lxv-guide .lxv-schedule .lxv-what{flex:1; margin:0; font-size:var(--f-body);
  line-height:1.8;}
/* images (only visible once you uncomment an <img> in the HTML) */
.lxv-guide figure.lxv-figure{margin:var(--section-gap) 0; padding:0;}
.lxv-guide .lxv-img{display:block; width:100%; height:auto; border-radius:6px;}
.lxv-guide figure.lxv-figure figcaption{font-size:var(--f-xs); color:var(--muted);
  font-style:italic; line-height:1.6; margin-top:12px; text-align:center;}
.lxv-guide .lxv-related{margin:var(--section-gap) 0 0; padding:32px 34px;
  background:var(--paper); border:1px solid var(--line); border-radius:8px;}
.lxv-guide .lxv-related h3{font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:var(--f-card); font-style:normal; line-height:1.35; margin:0 0 14px;}
.lxv-guide .lxv-related ul{list-style:none; margin:0; padding:0; columns:2; column-gap:36px;}
.lxv-guide .lxv-related li{padding:9px 0; font-size:var(--f-sm); line-height:1.6;
  break-inside:avoid;}
.lxv-guide .lxv-cta{margin:var(--section-gap) 0 0; text-align:center;}

/* =============== shared button + card system (hub + home) =============== */
/* color !important: without it the theme's `a { color: var(--sc-deep) !important }`
   paints this label #2C1810 — identical to the button's background — so the text
   is invisible until hover. Do not remove the !important flags. */
.lxv-btn,.lxv-guide .lxv-cta a{display:inline-block; background:var(--ink);
  color:var(--cream) !important; border-bottom:0 !important;
  font-family:var(--sans); font-weight:700; font-size:var(--f-xs); letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; padding:15px 38px; border-radius:4px; border:0;}
.lxv-btn:hover,.lxv-guide .lxv-cta a:hover{background:var(--gold-dk); color:#fff !important;}

.lxv-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px; margin:0;}
.lxv-card{display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;}
.lxv-card:hover{box-shadow:0 12px 30px rgba(44,24,16,.10); transform:translateY(-2px);}
.lxv-card .lxv-card-media{display:block; width:100%; aspect-ratio:3/2; object-fit:cover;}
.lxv-card .lxv-card-body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1;}
.lxv-card .lxv-card-kicker{font-family:var(--sans); font-size:var(--f-3xs); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dk); margin:0 0 12px;}
/* font-style:normal resets the theme's italic h3 */
.lxv-card h3{font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:var(--f-card); font-style:normal; text-transform:none;
  line-height:1.3; margin:0 0 12px;}
.lxv-card h3 a{color:var(--ink) !important; text-decoration:none; border:0;}
.lxv-card h3 a:hover{color:var(--gold-dk) !important;}
.lxv-card p{font-family:var(--sans); font-size:var(--f-sm); line-height:1.7;
  color:var(--body); margin:0 0 20px;}
.lxv-card .lxv-card-link{margin-top:auto; font-family:var(--sans); font-size:var(--f-2xs);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-dk) !important; text-decoration:none; border:0;}
.lxv-card .lxv-card-link:hover{color:var(--ink) !important;}

/* =========================== HUB PAGE =========================== */
.lxv-hub{background:var(--cream); color:var(--body); font-family:var(--sans);
  max-width:1120px; margin:0 auto; padding:72px 28px 88px;
  font-size:var(--f-body); line-height:var(--lh);}
.lxv-hub .lxv-hub-head{max-width:640px; margin:0 auto var(--section-gap); text-align:center;}
.lxv-hub .lxv-kicker{font-size:var(--f-3xs); font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-dk); margin:0 0 18px;}
.lxv-hub h1{font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:var(--f-h1); line-height:1.15; letter-spacing:.01em;
  text-transform:none; margin:0 0 18px;}
.lxv-hub .lxv-hub-intro{font-family:var(--serif); font-style:italic; color:var(--mid);
  font-size:var(--f-deck); line-height:1.6; margin:0;}

/* =========================== HOMEPAGE SECTIONS =========================== */
.lxv-home{background:var(--cream); color:var(--body); font-family:var(--sans);
  padding:80px 24px; font-size:var(--f-body); line-height:var(--lh);}
.lxv-home .lxv-home-inner{max-width:1120px; margin:0 auto;}
.lxv-home .lxv-home-head{max-width:620px; margin:0 auto 44px; text-align:center;}
.lxv-home .lxv-kicker{font-size:var(--f-3xs); font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-dk); margin:0 0 16px;}
.lxv-home h2{font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:var(--f-h1); line-height:1.2; letter-spacing:.01em;
  text-transform:none; font-style:normal; margin:0 0 16px;}
.lxv-home .lxv-home-intro{font-size:var(--f-sm); line-height:1.75; color:var(--body); margin:0;}
.lxv-home .lxv-home-btn{text-align:center; margin:48px 0 0;}
/* Explore Paso Robles — compact permanent nav list */
.lxv-home.lxv-explore .lxv-explore-nav{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 48px;
  max-width:800px; margin:0 auto; list-style:none; padding:0;}
.lxv-home.lxv-explore .lxv-explore-nav li{border-bottom:1px solid var(--line);}
.lxv-home.lxv-explore .lxv-explore-nav a{display:block; padding:18px 4px;
  color:var(--ink) !important; font-family:var(--serif); font-size:var(--f-h3);
  line-height:1.4; text-decoration:none;}
.lxv-home.lxv-explore .lxv-explore-nav a:hover{color:var(--gold-dk) !important;}
.lxv-home.lxv-explore .lxv-explore-nav a::after{content:' \2192'; color:var(--gold);
  opacity:0; transition:opacity .15s ease;}
.lxv-home.lxv-explore .lxv-explore-nav a:hover::after{opacity:1;}

/* =========================== RESPONSIVE =========================== */
@media(max-width:900px){
  .lxv-guide{padding:56px 32px 64px;}
}
@media(max-width:600px){
  .lxv-guide,.lxv-hub,.lxv-home{--section-gap:2.5rem; --rhythm:1.25rem;}
  .lxv-guide{padding:40px 22px 48px;}
  .lxv-guide .lxv-related{padding:24px 22px;}
  .lxv-guide .lxv-related ul{columns:1;}
  .lxv-guide .lxv-schedule li{flex-direction:column; gap:4px;}
  .lxv-guide .lxv-schedule .lxv-time{flex:none;}
  .lxv-home{padding:56px 20px;}
}