/* Four Gate Whiskey — page patterns. Values come from the approved Home mockup (docs/mockups/home*.html). */

/* ---------- Site layout ---------- */
/* Template parts and sections sit flush; each section owns its spacing. */
body .wp-site-blocks > * { margin-block: 0; }
.is-layout-flow > .fg, .is-layout-constrained > .fg { margin-block: 0; }
.fg-page { padding-block: var(--space-9); }
.fg-page > :first-child { margin-block-start: 0; }
.fg-page p, .fg-page li { max-width: 65ch; }
.fg-page .is-layout-constrained > p { max-width: var(--wp--style--global--content-size); } /* keep page paragraphs on the content column, not centred inside it */
.fg-post-list { list-style: none; padding: 0; display: grid; gap: var(--space-7); }
.fg-page:has(> .wp-block-post-content > .fg:last-child) { padding-bottom: 0; }
@media (max-width: 900px) { .fg-page { padding-block: var(--space-7); } }

/* ---------- Shared ---------- */
.fg-wrap { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--space-5); }
.fg-section { padding-block: var(--space-9); }
.fg-h2 { font-size: 48px; line-height: 50px; }
.fg-editor-note { margin: 0; padding: var(--space-4); border: var(--border-rule) var(--rule); font: var(--text-body-s); color: var(--ink-muted); }
@media (max-width: 900px) {
  .fg-wrap { padding-inline: var(--space-4); }
  .fg-section { padding-block: var(--space-7); }
  .fg-h2 { font-size: 36px; line-height: 38px; }
}

/* ---------- Fence rail divider (pattern fourgate/fence) ---------- */
.wp-block-group.fg-fence { height: 40px; margin-block: var(--space-7); background: url(../images/textures/fence-rail.png) center / auto 40px repeat-x; }
@media (max-width: 900px) { .wp-block-group.fg-fence { height: 32px; margin-block: var(--space-6); background-size: auto 32px; } }

/* ---------- Hero (§1): photo + label panel ---------- */
.fg-hero { position: relative; min-height: min(80vh, 720px); display: flex; align-items: center; overflow: hidden; }
.fg-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.fg-hero__wrap { position: relative; z-index: 1; padding-block: var(--space-7); }
.fg-hero__panel { max-width: 680px; padding: 40px var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; background: color-mix(in srgb, var(--cream) 95%, transparent); border: var(--border-frame) var(--navy); outline: var(--border-rule) var(--cream); outline-offset: 6px; }
.fg-hero__eyebrow { color: var(--stone); }
.fg-hero__title { font-size: 60px; line-height: 62px; }
.fg-hero__line { display: block; }
.fg-hero__line + .fg-hero__line { margin-top: var(--space-3); }
.fg-hero__intro { margin: 0; font-size: 20px; line-height: 30px; max-width: 44ch; color: var(--charcoal); }
.fg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-2); }
.fg-hero .fg-btn--secondary { color: var(--charcoal); border-color: var(--navy); }
.fg-hero .fg-btn--secondary:hover { background: var(--navy); color: var(--cream); }
@media (max-width: 900px) {
  .fg-hero { flex-direction: column; align-items: stretch; min-height: 0; overflow: visible; }
  .fg-hero__img { position: static; height: 320px; }
  .fg-hero__wrap { margin-top: -72px; padding-block: 0 var(--space-2); }
  .fg-hero__panel { max-width: none; padding: 28px 20px; gap: var(--space-4); outline-offset: 4px; }
  .fg-hero__eyebrow { font-size: 12px; line-height: 16px; }
  .fg-hero__title { font-size: 36px; line-height: 38px; }
  .fg-hero__line + .fg-hero__line { margin-top: var(--space-2); }
  .fg-hero__intro { font-size: 18px; line-height: 27px; max-width: none; }
  .fg-hero__actions { flex-direction: column; gap: var(--space-3); width: 100%; }
  .fg-hero__actions .fg-btn { width: 100%; }
}

/* ---------- Feature split (§01) ---------- */
.fg-split--cream { background: var(--surface-alt); }
.fg-split--white { background: var(--surface); }
.fg-split__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: center; }
.fg-split__text { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.fg-split__body { display: grid; gap: var(--space-4); }
.fg-split__body p { margin: 0; font-size: 18px; line-height: 27px; max-width: 52ch; }
.fg-split__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fg-split--image-left .fg-split__img { order: -1; }
@media (max-width: 900px) {
  /* Mobile order from the mockup: text, image, then the link. */
  .fg-split__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .fg-split__text { display: contents; }
  .fg-split .fg-split__img { order: 1; }
  .fg-split__link { order: 2; }
}

/* ---------- Whiskey row (§02) ---------- */
.fg-row { background: var(--surface); }
.fg-row__inner { display: flex; flex-direction: column; gap: var(--space-7); }
.fg-row__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); }
.fg-row__intro { display: flex; flex-direction: column; gap: var(--space-4); }
.fg-row__lead { margin: 0; font-size: 20px; line-height: 30px; max-width: 52ch; }
.fg-row__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.fg-row__more-mobile { display: none; }
@media (max-width: 900px) {
  .fg-row__inner { gap: var(--space-5); padding-inline: 0; }
  .fg-row__head { padding-inline: var(--space-4); }
  .fg-row__intro { gap: var(--space-3); }
  .fg-row__lead { font-size: 18px; line-height: 27px; }
  .fg-row__more { display: none; }
  .fg-row__cards { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--space-4); scroll-padding-inline: var(--space-4); scrollbar-width: none; }
  .fg-row__cards::-webkit-scrollbar { display: none; }
  .fg-row__cards > .fg-card { flex: 0 0 78%; scroll-snap-align: start; }
  .fg-row__more-mobile { display: block; padding-inline: var(--space-4); }
  .fg-row__more-mobile .fg-btn { width: 100%; }
}

/* ---------- Featured stats (§03): the barrel-proof panel ---------- */
.fg-stats { background: var(--surface-alt); }
.fg-stats__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: center; }
.fg-stats__text { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.fg-stats__body { margin: 0; font-size: 18px; line-height: 27px; max-width: 52ch; }
.fg-stats__panel { display: flex; flex-direction: column; gap: var(--space-5); padding: 40px; background: var(--white); border: var(--border-frame) var(--line); }
.fg-stats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: var(--border-rule) var(--line); border-bottom: var(--border-rule) var(--line); }
.fg-stats__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fg-stats__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fg-stats__list--1 { grid-template-columns: minmax(0, 1fr); }
.fg-stats__list > div { padding: var(--space-5) 0; }
.fg-stats__list > div + div { padding-left: var(--space-5); border-left: var(--border-rule) var(--line); }
.fg-stats__list dd { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 56px; color: var(--heading); font-variant-numeric: tabular-nums; }
.fg-stats__summary { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
@media (max-width: 900px) {
  .fg-stats__inner { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .fg-stats__text { gap: 20px; }
  .fg-stats__panel { padding: 20px; gap: var(--space-4); }
  .fg-stats__panel .fg-eyebrow { font-size: 12px; line-height: 16px; }
  .fg-stats__list > div { padding: var(--space-4) 0; }
  .fg-stats__list > div + div { padding-left: var(--space-3); }
  .fg-stats__list dd { margin-top: var(--space-1); font-size: 32px; line-height: 38px; }
}

/* ---------- Award strip ---------- */
.fg-award { background: var(--surface); border-bottom: var(--border-rule) var(--rule); }
.fg-award__inner { display: flex; align-items: center; gap: var(--space-6); padding-block: var(--space-7); }
.fg-award__seal { width: 64px; height: 64px; border-radius: var(--radius-seal); flex-shrink: 0; }
.fg-award__text { display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; }
.fg-award__title { font-size: 24px; line-height: 28px; }
.fg-award__more { flex-shrink: 0; }
@media (max-width: 900px) {
  .fg-award__inner { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--space-3) var(--space-4); padding-block: var(--space-6); }
  .fg-award__seal { width: 48px; height: 48px; }
  .fg-award__text { display: contents; }
  .fg-award__title, .fg-award__more { grid-column: 1 / -1; }
  .fg-award__more { justify-self: start; }
}

/* ---------- States: Find a bottle ---------- */
.fg-states { background: var(--surface-alt); }
.fg-states__box { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; padding: var(--space-7); background: var(--surface); border: var(--border-rule) var(--rule); }
.fg-states__heading { font-size: 32px; line-height: 38px; }
.fg-states__intro { margin: 0; font-size: 18px; line-height: 27px; }
.fg-states__grid { list-style: none; width: 100%; margin: var(--space-2) 0 0; padding: 1px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.fg-states__grid li { background: var(--surface); padding: 20px; }
.fg-states__name { font-size: 24px; line-height: 28px; margin-top: var(--space-1); }
@media (max-width: 900px) {
  .fg-states__box { padding: var(--space-5); gap: var(--space-3); }
  .fg-states__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-states__grid li { padding: 14px var(--space-3); }
  .fg-states__grid .fg-eyebrow { font-size: 12px; line-height: 16px; }
  .fg-states__name { font-size: 20px; line-height: 24px; }
  .fg-states__fill--wide { display: none; }
}

/* ---------- Whiskeys archive grid ---------- */
.fg-whiskey-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.fg-whiskey-grid > li { display: flex; margin: 0; }
.fg-whiskey-grid > li > .fg-card { flex: 1; }
@media (max-width: 900px) { .fg-whiskey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fg-whiskey-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Whiskey detail (interim, until the Whiskeys mockup) ---------- */
.fg-detail__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
.fg-detail__bottle { background: var(--surface-alt); border: var(--border-frame) var(--line); padding: var(--space-3); }
.fg-detail__text { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.fg-detail__text .fg-stats__panel { width: 100%; padding: var(--space-5); }
.fg-detail__text .fg-stats__list dd { font-size: 32px; line-height: 38px; }
.fg-detail__text .fg-stats__list > div + div { padding-left: var(--space-4); }
.fg-detail__lead { margin: 0; font-size: 20px; line-height: 30px; max-width: 52ch; }
.fg-detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.fg-detail__more { display: grid; gap: var(--space-7); margin-top: var(--space-8); max-width: calc(var(--container-content) + 2 * var(--space-5)); margin-inline: 0 auto; }
.fg-detail__body p { margin: 0 0 var(--space-4); font-size: 18px; line-height: 27px; max-width: 65ch; }
.fg-detail__notes { margin: 0; display: grid; gap: var(--space-5); }
.fg-detail__notes dd { margin: var(--space-1) 0 0; font-size: 18px; line-height: 27px; }
@media (min-width: 1249px) { .fg-detail__more { margin-inline: calc((100% - var(--container-wide)) / 2) auto; } }
@media (max-width: 900px) {
  .fg-detail__inner { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .fg-detail__more { margin-top: var(--space-7); }
  .fg-detail__text .fg-stats__list > div + div { padding-left: var(--space-3); }
  .fg-stats__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-stats__list.fg-stats__list--4 > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .fg-stats__list--4 > div:nth-child(n+3) { border-top: var(--border-rule) var(--line); }
}

/* ---------- Contact form (fourgate/contact-form) ---------- */
/* No mockup yet: built from the design system (controls use --border-control, focus ring as buttons). */
.fg-contact { display: grid; gap: var(--space-6); max-width: var(--wp--style--global--content-size, 720px); }
/* The page drops its bottom padding when the last block is a full-width .fg section; the form isn't one, so it keeps its own. */
.fg-page .fg-contact:last-child { padding-bottom: var(--space-9); }
.fg-contact__intro p { margin: 0; font-size: 20px; line-height: 30px; }
.fg-contact__intro p + p { margin-top: var(--space-4); }
.fg-form, .fg-form__fields { display: grid; gap: var(--space-5); }
.fg-form [hidden] { display: none !important; }
.fg-field { display: grid; gap: var(--space-2); }
.fg-field label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.fg-field input, .fg-field textarea { width: 100%; box-sizing: border-box; min-height: 48px; margin: 0; padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: 18px; line-height: 27px; color: var(--ink); background: var(--surface); border: var(--border-control) var(--line); border-radius: 0; box-shadow: none; appearance: none; }
.fg-field textarea { min-height: 180px; resize: vertical; }
.fg-field input:focus-visible, .fg-field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fg-field [aria-invalid="true"] { border: 3px solid var(--heading); }
.fg-field__error { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--heading); }
.fg-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fg-form__status { margin: 0; padding: var(--space-4) var(--space-5); font-size: 18px; line-height: 27px; color: var(--ink); background: var(--surface); border: var(--border-rule) var(--line); }
.fg-form__status[data-state="success"] { background: var(--surface-alt); font-weight: 600; }
.fg-form__status[data-state="error"] { border: 3px solid var(--heading); font-weight: 600; }
.fg-form__status:focus { outline: none; }
.fg-form__status:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fg-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
.fg-form__actions .fg-btn[aria-busy="true"] { cursor: progress; }
.fg-form__note { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
@media (max-width: 900px) { .fg-page .fg-contact:last-child { padding-bottom: var(--space-7); } }
@media (max-width: 600px) {
  .fg-form__actions { flex-direction: column; align-items: stretch; }
  .fg-form__actions .fg-btn { width: 100%; }
}