/* ==========================================================================
   Content pages — Apie mus · Mūsų erdvė · Tiekėjai · Kontaktai · DUK (theme/brastos/page-*.php)
   Extends the plain-page frame in woo.css (.pg, .page__wrap, .page__title, .page__content) and reuses
   base.css (.sec, .band--*, .story, .farm, .lead, .link, .btn). Tokens only — no literals.
   Rhythm: one --sec-y step between sections, the half step inside a section (01 §3.2, D-04).
   Breakpoints as home.css: 599 · 799 · 899.
   ========================================================================== */

/* ---------- intro: prose 7 / photo 5 (the story band's proportions, on the page ground) ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-9); align-items: start; }
.intro__text { display: grid; gap: var(--sp-6); align-content: start; min-width: 0; }
.intro__pic { border-radius: var(--rad-m); overflow: hidden; background: var(--photo-ground); }
.intro__pic img { width: 100%; height: auto; }
.intro__pic--portrait { max-width: 440px; justify-self: end; }
.intro--band { align-items: center; }
.intro__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.pg--short { padding-bottom: var(--sec-y-half); }

/* prose: the editable post content. The lead is the client's first paragraph */
.prose .lead { color: var(--ink); text-wrap: pretty; }
.prose p { text-wrap: pretty; }
.prose h2:first-child { margin-top: 0; }
.prose details { max-width: var(--measure); }

@media (max-width: 899px) {
  .intro { gap: var(--sp-7); }
}
@media (max-width: 799px) {
  .intro { grid-template-columns: 1fr; gap: var(--sec-y-half); }
  .intro__pic--portrait { justify-self: start; max-width: 360px; }
}

/* ---------- gallery (Mūsų erdvė): a plain grid, six square tiles per group, the first a 2 × 2 feature
   (two columns: first and last wide). The last photo of a group must therefore be landscape.
   No carousel, no lightbox, no JS. Square crops keep the grid deterministic at every width. ---------- */
.gallery__title { margin-bottom: var(--sp-6); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.gallery__item { aspect-ratio: 1; border-radius: var(--rad-m); overflow: hidden; background: var(--photo-ground); }
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.band--dark .gallery__item { background: var(--band-card); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .gallery__item:first-child, .gallery__item:last-child { grid-column: span 2; grid-row: auto; aspect-ratio: 2 / 1; } }   /* 1 wide + 4 squares + 1 wide: no hole in two columns */
@media (max-width: 599px) { .gallery { gap: var(--sp-2); } .gallery__title { margin-bottom: var(--sp-5); } }

/* a light section after a band keeps its full top step (base.css zeroes it between two light sections) */
.sec[class*="band--"] + .sec:not([class*="band--"]) { padding-top: var(--sec-y); }

/* ---------- NAP list (Kontaktai, the visit band) — 07 §13 labels ---------- */
.nap { font-style: normal; display: grid; gap: var(--sp-5); align-content: start; }
.nap__list { display: grid; gap: var(--sp-4); }
.nap__list div { display: grid; gap: var(--sp-1); }
.nap__list dt { font-size: var(--fz-meta); color: var(--ink-soft); }
.nap__list dd { margin: 0; font-size: var(--fz-h3); font-weight: 600; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.nap__list a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-colour) var(--ease-out); }
.nap__list a:hover { color: var(--forest); }
.nap__map .btn svg { width: 18px; height: 18px; }

/* ---------- visit band (Mūsų erdvė) ---------- */
.visit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-9); align-items: start; }
.visit__text { display: grid; gap: var(--sp-5); }
.visit__text .lead { color: var(--ink-soft); }
@media (max-width: 799px) { .visit { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---------- Kontaktai ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-5); align-items: start; }
.contact__card { padding: var(--sp-6); border-radius: var(--rad-l); background: var(--chrome); display: grid; gap: var(--sp-4); align-content: start; }
.contact__h { font-family: var(--ff-body); font-size: var(--fz-h3); font-weight: 600; line-height: var(--lh-tight); }
.contact__card p { max-width: var(--measure-lead); text-wrap: pretty; }
@media (max-width: 799px) { .contact { grid-template-columns: 1fr; } .contact__card { padding: var(--sp-5); } }

/* ---------- Tiekėjai: the directory (names as text, logo on the photo ground) ---------- */
.producers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.producer { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); align-items: start; padding: var(--sp-4); border-radius: var(--rad-m); background: var(--page); transition: background-color var(--t-colour) var(--ease-out); }
.producer:has(a):hover { background: var(--ground-nest); }
.producer__logo { display: grid; place-items: center; width: 96px; aspect-ratio: 1; padding: var(--sp-2); border-radius: var(--rad-s); background: var(--photo-ground); overflow: hidden; }
.producer__logo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }   /* white-backed logos take the linen, as product cut-outs do (woo.css) */
.producer__mark { display: block; width: 48px; color: var(--ink); --bs-logo-leaf: var(--fresh); }
.producer__mark svg { display: block; width: 100%; height: auto; }
.producer__body { display: grid; gap: var(--sp-1); min-width: 0; }
.producer__own { font-size: var(--fz-meta); font-weight: 600; color: var(--honey-ink); }
.producer__name { font-family: var(--ff-body); font-size: var(--fz-h3); font-weight: 600; line-height: var(--lh-tight); }
.producer__name a { color: var(--ink); text-decoration: none; }
.producer__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rad-m); }   /* the whole card is the target */
.producer__name a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.producer__name a:focus-visible { outline: none; }
.producer__name a:focus-visible::after { outline: var(--focus-ring-w) solid var(--focus); outline-offset: var(--focus-ring-offset); }
.producer__place, .producer__count { font-size: var(--fz-meta); color: var(--ink-soft); }
.producer__blurb { margin-top: var(--sp-1); font-size: var(--fz-body); line-height: var(--lh-body); text-wrap: pretty; }
.producer__count { margin-top: var(--sp-1); }
.producers__note { margin-top: var(--sp-5); font-size: var(--fz-meta); color: var(--honey-ink); }
@media (max-width: 899px) { .producers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (max-width: 599px) { .producers { grid-template-columns: 1fr; gap: var(--sp-3); } .producer { grid-template-columns: 72px minmax(0, 1fr); } .producer__logo { width: 72px; } }

/* ---------- DUK: native <details>, one rule between questions ---------- */
.faqpg { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--sp-9); align-items: start; }
.faq { max-width: var(--measure); }
.faq > h2 { margin: var(--sec-y-half) 0 var(--sp-3); }
.faq > h2:first-child { margin-top: var(--sp-3); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--target-min); margin-inline: calc(-1 * var(--sp-2)); padding: var(--sp-3) var(--sp-2); list-style: none; cursor: pointer; font-size: var(--fz-body); font-weight: 600; line-height: var(--lh-tight); text-wrap: pretty; border-radius: var(--rad-s); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: var(--sp-2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fade) var(--ease-out); }
.faq details[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.faq summary:hover { color: var(--forest); }
.faq details > :not(summary) { margin: 0 0 var(--sp-4); max-width: var(--measure-lead); line-height: var(--lh-body); text-wrap: pretty; }
.faq details ul { padding-left: var(--sp-5); list-style: revert; display: grid; gap: var(--sp-1); }
.faq details a { color: var(--link); text-underline-offset: 3px; }
.faq__help { position: sticky; top: calc(var(--header-h) + var(--sp-7)); margin-top: var(--sp-3); padding: var(--sp-6); border-radius: var(--rad-l); background: var(--chrome); display: grid; gap: var(--sp-3); }
.faq__help h2 { font-family: var(--ff-body); font-size: var(--fz-h3); font-weight: 600; line-height: var(--lh-tight); }
.faq__help a { color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 899px) { .faqpg { grid-template-columns: 1fr; gap: var(--sec-y-half); } .faq__help { position: static; max-width: var(--measure); margin-top: 0; } }
@media (max-width: 599px) { .faq__help { padding: var(--sp-5); } }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after, .producer { transition: none; }
}