/* Orpat premium — homepage + legal/simple-content page styles.
   Consumes tokens from orpat-premium.css; all corners use the radius scale. */

/* ---- LEGAL / SIMPLE CONTENT --------------------------------------------- */
.opg-legal-hero{ background:var(--o-cream); padding:clamp(52px,8vw,92px) 0 clamp(10px,2vw,22px); text-align:center; }
.opg-legal-hero .opg-eyebrow{ justify-content:center; }
.opg-legal-hero h1{ font-size:clamp(2rem,4.4vw,3.2rem); color:var(--o-ink); margin:.4em auto 0; }
.opg-legal-wrap{ max-width:840px; }
.opg-legal-body > h1:first-child{ display:none; } /* page's inline title duplicates the hero */
.opg-legal-body h2{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin-top:1.6em; }

/* ---- HOMEPAGE ------------------------------------------------------------ */
.opg-home-intro{ background:var(--o-cream); }
.opg-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.opg-cat{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:230px;
  border-radius:var(--o-radius-lg); overflow:hidden; text-decoration:none; background:var(--o-ink); box-shadow:var(--o-shadow-sm); }
.opg-cat-img{ position:absolute; inset:0; background:var(--o-ink-2) center/cover no-repeat; opacity:.55;
  transition:transform .6s var(--o-ease),opacity .4s var(--o-ease); }
.opg-cat:hover .opg-cat-img{ transform:scale(1.06); opacity:.72; }
.opg-cat::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(10,8,5,.86)); }
.opg-cat-name{ position:relative; z-index:1; color:var(--o-cream); font-size:1.3rem; padding:0 22px 4px; }
.opg-cat-count{ position:relative; z-index:1; color:var(--o-brass-soft); font-size:.8rem; letter-spacing:.02em; padding:0 22px 22px; }
.opg-prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
.opg-prod{ display:flex; flex-direction:column; background:var(--o-white); border:1px solid var(--o-line); border-radius:var(--o-radius);
  overflow:hidden; text-decoration:none; box-shadow:var(--o-shadow-sm); transition:transform .4s var(--o-ease),box-shadow .4s var(--o-ease); }
.opg-prod:hover{ transform:translateY(-5px); box-shadow:var(--o-shadow); }
.opg-prod-img{ aspect-ratio:1; background:var(--o-ivory) center/contain no-repeat; margin:14px 14px 6px; border-radius:var(--o-radius-sm); }
.opg-prod-name{ font-size:.9rem; color:var(--o-ink); line-height:1.35; padding:0 16px; flex:1; }
.opg-prod-price{ font-family:var(--o-serif); color:var(--o-brass-deep); font-size:1.05rem; padding:9px 16px 18px; }
@media(max-width:900px){ .opg-cat-grid,.opg-prod-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .opg-cat-grid{ grid-template-columns:1fr; } }

/* =========================================================================
 * LEGAL PAGE ARTWORK BANNER  (see orpat_legal_banner() in inc/orpat-home-legal.php)
 *
 * Replaces the text hero on legal pages that ship a banner plate. The page name is
 * baked into the artwork, so the <h1> is visually hidden but kept for SEO / a11y.
 *
 * The band is driven by the artwork's own aspect ratio — never stretched, never
 * cropped, no dead space — the same approach used for the category banners in
 * orpat-premium.css. Desktop plate is 2048x344; the mobile crop is 768x900 and is
 * swapped in by <picture> at <=1024px, so the band takes that shape there too.
 *
 * Rollback: delete this block. Pages fall back to .opg-legal-hero automatically once
 * the PHP helper is removed.
 * ======================================================================= */
.opg-legal-banner{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:2048 / 344;
  overflow:hidden;
  background:#5a3a1c;              /* brand brown — only seen if the image fails */
}
.opg-legal-banner picture{ display:block; width:100%; height:100%; }
.opg-legal-banner img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
}
/* Heading lives in the artwork; keep the real <h1> for SEO and screen readers. */
.opg-legal-banner h1{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; padding:0; margin:-1px; border:0;
}
@media (max-width:1024px){
  .opg-legal-banner.has-mobile{ aspect-ratio:768 / 900; }
}