/*
 * 30-components.css — the component layer. ElNidoGuide-Migration.md §3.
 *
 * NAMING: every class here is prefixed `eng-`. Dokan's front-end stylesheet
 * defines unprefixed `.btn` and `.table`, and this is a Dokan marketplace — using
 * the spec's bare selectors would restyle Dokan's vendor UI and be restyled by it,
 * in both directions. The prototype and its reference render keep the bare names;
 * only the shipped theme is prefixed. See docs/DECISIONS.md #7.
 */

/* ==========================================================================
   §3.1 Buttons — three variants.

   Every variant declares its own colour in EVERY state. This is not redundancy:
   it is the fix for the dark-on-dark hover bug the prototype hit, and §3.1 says
   explicitly to keep it. Removing a colour from any :hover/:active below
   reintroduces that bug the moment a parent sets a colour.
   ========================================================================== */

.eng-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  padding:10px 18px;
  cursor:pointer;
  text-decoration:none;
  border:1px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.eng-btn--block{ display:flex; width:100%; }

/*
 * Every variant is repeated for a., button. and .gb-text — element-qualified, exactly
 * as the prototype's own brand-palette block did.
 *
 * This is not stylistic. A bare `.eng-btn--primary{color:#fff}` is specificity 0-1-0
 * and loses to GeneratePress's `a.gb-text{color:#222}` at 0-1-1, which is how the
 * primary button ended up rendering near-black text on the accent fill — measured at
 * 3.23:1, a WCAG failure and precisely the dark-on-dark bug §3.1 tells us to keep
 * guarding against. Deleting these qualifiers reintroduces it silently.
 *
 * The palette itself is sound: white on accent-600 is 4.93:1, and 9.24:1 on hover.
 */
.eng-btn--primary,
a.eng-btn--primary,
button.eng-btn--primary,
.gb-text.eng-btn--primary{
  background:var(--color-accent-600);
  color:#fff;
  border-color:var(--color-accent-600);
}
.eng-btn--primary:hover,
.eng-btn--primary:focus,
a.eng-btn--primary:hover,
a.eng-btn--primary:focus,
button.eng-btn--primary:hover,
.gb-text.eng-btn--primary:hover{
  background:var(--color-accent-800);
  color:#fff;
  border-color:var(--color-accent-800);
}
.eng-btn--primary:active,
a.eng-btn--primary:active,
button.eng-btn--primary:active{
  background:var(--color-accent-900);
  color:#fff;
  border-color:var(--color-accent-900);
}

.eng-btn--secondary,
a.eng-btn--secondary,
button.eng-btn--secondary,
.gb-text.eng-btn--secondary{
  background:transparent;
  color:var(--color-accent-800);
  border-color:var(--color-accent-400);
}
.eng-btn--secondary:hover,
.eng-btn--secondary:focus,
a.eng-btn--secondary:hover,
a.eng-btn--secondary:focus,
button.eng-btn--secondary:hover,
.gb-text.eng-btn--secondary:hover{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-600);
}
.eng-btn--secondary:active,
a.eng-btn--secondary:active,
button.eng-btn--secondary:active{
  background:var(--color-accent-200);
  color:var(--color-accent-900);
}

.eng-btn--ghost,
a.eng-btn--ghost,
button.eng-btn--ghost,
.gb-text.eng-btn--ghost{
  background:transparent;
  color:var(--color-accent-800);
  border-color:transparent;
}
.eng-btn--ghost:hover,
.eng-btn--ghost:focus,
a.eng-btn--ghost:hover,
a.eng-btn--ghost:focus,
button.eng-btn--ghost:hover,
.gb-text.eng-btn--ghost:hover{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
}
.eng-btn--ghost:active,
a.eng-btn--ghost:active,
button.eng-btn--ghost:active{
  background:var(--color-accent-200);
  color:var(--color-accent-900);
}

.eng-btn:disabled,
.eng-btn[disabled],
.eng-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }

/* ==========================================================================
   §3.2 Blueprint frame — the signature element.

   The prototype marks each corner with an explicit <i class="corner tl"> element.
   In Gutenberg that would mean four extra blocks inside every card, so the marks
   are drawn as pseudo-element background gradients instead: two hairlines crossed
   into a "+". Two pseudo-elements carry two corners; the -x modifier adds the
   other two. Applying both classes to one container yields all four.

   §12: "Corner registration marks on every blueprint object — never drop them."
   Cards stay transparent; the solid accent primary button is the only filled
   object in the entire design.
   ========================================================================== */

.eng-blueprint{
  position:relative;
  border:1px solid var(--color-divider);
  background:transparent;
}

.eng-blueprint::before,
.eng-blueprint::after,
.eng-blueprint-x::before,
.eng-blueprint-x::after{
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  pointer-events:none;
  background:var(--registration-mark);
}

.eng-blueprint::before{ top:-6px;    left:-6px;  }
.eng-blueprint::after{  bottom:-6px; right:-6px; }
.eng-blueprint-x{ position:relative; }
.eng-blueprint-x::before{ top:-6px;    right:-6px; }
.eng-blueprint-x::after{  bottom:-6px; left:-6px;  }

/* ==========================================================================
   §3.3 Figures

   DUOTONE REMOVED — client direction 2026-08-21.

   §3.3 applied the "El Nido Steel" duotone to every content photograph and §12 says
   "Every image duotoned — no full-colour content photos". The client asked for the
   photography to show at full colour with nothing over it, so the preset is gone from
   theme.json and the block attributes have been stripped.

   The figure keeps its blueprint frame (a border and corner marks, both OUTSIDE the
   image) but nothing is painted on top of the photograph. The background is transparent
   rather than --color-surface so no tint shows through a transparent PNG.
   ========================================================================== */

.eng-figure{ margin:0; overflow:hidden; background:transparent; }
.eng-figure > img{ width:100%; height:100%; object-fit:cover; display:block; }

/*
 * BLUEPRINT FRAME REMOVED FROM PHOTOGRAPHS — client direction 2026-08-21.
 *
 * Second half of the same instruction that removed the duotone: the photograph is to be
 * shown on its own, with nothing over it and nothing drawn around it. The hairline border
 * and the four corner registration marks are both suppressed here.
 *
 * Scoped to .eng-figure deliberately. §3.2's blueprint object is still the treatment for
 * CARDS and DIALOGS — the planner card, the totals panel, the booking card, the draft
 * dialog — and those are untouched. This removes the frame from images only, which is
 * what was asked.
 *
 * Done in CSS rather than by stripping the classes from the markup so it is reversible in
 * one edit: delete this block and every framed figure comes back, no content migration.
 * §12 mandates these marks ("never drop them"), so the override is loud on purpose.
 */
.eng-figure.eng-blueprint{ border:0; }
.eng-figure.eng-blueprint::before,
.eng-figure.eng-blueprint::after,
.eng-figure.eng-blueprint-x::before,
.eng-figure.eng-blueprint-x::after{ content:none; }
.eng-figure figcaption,
.eng-caption{
  margin-top:var(--space-2);
  font-size:12px;
  color:var(--color-muted);
}

/* ==========================================================================
   §3.4 Tags, tables, fields, FAQ rows, dialogs
   ========================================================================== */

.eng-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:2px 8px;
  border:1px solid var(--color-divider);
  white-space:nowrap;
}
.eng-tag--accent{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-300);
}
.eng-tag--outline{
  background:transparent;
  color:var(--color-accent-800);
  border-color:var(--color-accent-400);
}
.eng-tag--neutral{
  background:var(--color-surface);
  color:var(--color-text);
}

/* §3.4 — themed header row, hairline row rules, NO zebra fill. */
.eng-table{ width:100%; border-collapse:collapse; font-size:14px; }
.eng-table th{
  text-align:left;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-accent-700);
  padding:8px 12px 8px 0;
  border-bottom:1px solid var(--color-text);
}
.eng-table td{
  padding:10px 12px 10px 0;
  border-bottom:1px solid var(--color-divider);
  vertical-align:top;
}
.eng-table tr:last-child td{ border-bottom:0; }

/* §3.4 — labels 12px uppercase-tracked; inputs square, hairline border. The focus
   ring comes from 10-base.css so there is one definition of it. */
.eng-field{ display:flex; flex-direction:column; gap:5px; }
.eng-field > label,
.eng-label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-muted);
}
.eng-input,
.eng-field input:not([type="checkbox"]):not([type="radio"]),
.eng-field select,
.eng-field textarea{
  font:inherit;
  font-size:14px;
  /* border-box, or `width:100%` means 100% of the track PLUS 22px of padding and 2px of
     border — which is how a 154px grid cell rendered a 180px control that hung over the
     card's edge (photographed by the owner, 2026-09-04). GeneratePress does not set a
     global box-sizing that reaches these, so the controls state it themselves. */
  box-sizing:border-box;
  padding:9px 11px;
  border:1px solid var(--color-divider);
  background:var(--color-bg);
  color:var(--color-text);
  width:100%;
  /* 44px is the design system's floor for anything you tap, and padding alone did not
     reach it: a select rendered 39px and a date input 43px, so the planner card's own
     controls were the smallest targets on the page. Measured on staging, 2026-09-04. */
  min-height:44px;
}
.eng-field textarea{ min-height:96px; resize:vertical; }

/* §3.4 — segmented control (Joiner/Private, pace, payment method). */
.eng-seg{ display:inline-flex; border:1px solid var(--color-divider); }
.eng-seg__opt{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  font-size:13px;
  cursor:pointer;
  border-right:1px solid var(--color-divider);
}
.eng-seg__opt:last-child{ border-right:0; }
.eng-seg__opt:has(input:checked){
  background:var(--color-accent-100);
  color:var(--color-accent-900);
}

/* §3.4 — FAQ accordions are native <details>: hairline top rule, Barlow Condensed
   summary, no disclosure marker. Native means keyboard and screen-reader support
   come free. */
.eng-faq{ border-top:1px solid var(--color-divider); }
.eng-faq > summary{
  cursor:pointer;
  font-family:var(--font-heading);
  font-weight:600;
  padding:var(--space-3) 0;
  list-style:none;
}
.eng-faq > summary::-webkit-details-marker{ display:none; }
.eng-faq > summary::marker{ content:""; }
.eng-faq[open] > summary{ color:var(--color-accent-800); }

/* §3.4 — REMOVED (2026-09-02). `.eng-dialog`, `.eng-dialog__backdrop` and
   `.eng-dialog__title` styled the draft-itinerary dialog, which is gone: /plan/ carries
   the planner card itself (inc/planner-card.php). The mobile menu — §3.4's other
   dialog — never used these; it is `#eng-menu` plus `html.eng-menu-open`
   (inc/chrome.php). Nothing in the theme emits the three class names any more, so the
   rules went, and with them the `[hidden]` restatement that existed only to undo the
   backdrop's own `display:flex`. */

/* ==========================================================================
   §3.5 Numbered section header (the homepage rhythm, 01–05)
   ========================================================================== */

.eng-secthead{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.eng-secthead__num{
  font-family:var(--font-heading);
  font-size:38px;
  font-weight:600;
  color:var(--color-accent);
  line-height:1;
}
.eng-secthead__title{ font-size:var(--type-h2-section); }
.eng-secthead__sub{ font-size:var(--type-meta); color:var(--color-muted); }
.eng-secthead__link{ margin-left:auto; font-size:13px; }

/* ---- Shared text roles (§2.2) ---- */
.eng-kicker{
  font-size:var(--type-kicker);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-accent-700);
}
.eng-muted{ font-size:var(--type-meta); color:var(--color-muted); }

/* ==========================================================================
   §4 Site chrome — masthead, footer, mobile tab bar.

   These are built as GP Block Elements in wp-admin; the classes below are what
   those Elements reference, so the Element carries structure and this file
   carries every measurement. Editing the Element should never require editing a
   colour or a size.
   ========================================================================== */

/* ---- §4.1 Masthead — STICKY as of the chrome revamp (2026-09-01, client
   decision superseding the prototype's scroll-away header). The trick: the
   whole masthead is sticky with a negative top equal to everything above the
   nav row (rule + utility strip + hairline, measured into --eng-above-nav by
   inc/chrome.php's inline script; 34px fallback covers no-JS), so the utility
   strip scrolls away naturally and only the nav row stays pinned. Once
   scrolled, `.is-scrolled` (same script) condenses the nav's padding and adds
   a 1px divider bottom edge — an edge, never a shadow (§12). ---- */
.eng-masthead{
  position:sticky;
  top:calc(-1 * var(--eng-above-nav, 34px));
  z-index:900;
  background:var(--color-bg);
}
.eng-masthead.is-scrolled{ border-bottom:1px solid var(--color-divider); }
.eng-masthead__rule{ height:4px; background:var(--color-text); }
.eng-masthead__hair{ height:1px; background:var(--color-text); }

/* §4.1 — utility strip: one flex row, 10.5px uppercase-tracked. */
.eng-utility{
  display:flex;
  flex-wrap:wrap;
  gap:4px 22px;
  padding:6px var(--space-4);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.eng-utility__cond{ color:var(--color-accent-700); }

/* §4.1 — nav row: brand left, links centre, actions right. */
.eng-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3) var(--space-4);
  padding:var(--space-3) var(--space-4);
}
.eng-nav a{ text-decoration:none; }
.eng-nav__links{ display:flex; flex-wrap:wrap; gap:var(--space-4); font-size:14px; }
.eng-nav__actions{ display:flex; align-items:center; gap:var(--space-4); margin-left:auto; }

/* Chrome revamp (2026-09-01): condensed nav once scrolled; link underline that
   animates in on hover/focus and stays on the current page (aria-current is set
   by inc/chrome.php's script — static GB links can't know the page). a.-free
   selectors are safe here: the masthead sits OUTSIDE .inside-article, so GP's
   0-1-1 link colour never competes. */
.eng-masthead.is-scrolled .eng-nav{ padding-top:var(--space-2); padding-bottom:var(--space-2); }
.eng-nav__links a{
  position:relative;
  padding:4px 0;
  color:var(--color-text);
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.eng-nav__links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:2px;
  background:var(--color-accent-700);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
.eng-nav__links a:hover::after,
.eng-nav__links a:focus-visible::after,
.eng-nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.eng-nav__links a[aria-current="page"]{ color:var(--color-accent-800); font-weight:600; }
@media (prefers-reduced-motion:reduce){
  .eng-nav__links a::after{ transition:none; }
}

/* §4.1 — brand lockup: pin + stacked EL NIDO / GUIDE wordmark. */
.eng-brand{ display:flex; align-items:center; gap:10px; color:var(--color-text); }
.eng-brand__mark{ display:flex; flex-direction:column; line-height:1; }
.eng-brand__name{
  font-family:var(--font-heading);
  font-size:22px;
  font-weight:600;
  letter-spacing:.02em;
}
.eng-brand__sub{
  font-family:var(--font-heading);
  font-size:10px;
  font-weight:500;
  letter-spacing:.38em;
  opacity:.72;
  margin-top:3px;
}

/* §4.1 — the "My trip" count chip: square, text-coloured, inverted. */
.eng-chip{
  display:inline-flex;
  align-items:center;
  background:var(--color-text);
  color:var(--color-bg);
  padding:1px 6px;
  font-size:11px;
}

/* ---- §4.2 Footer ---- */
.eng-footer{ border-top:4px solid var(--color-text); padding:var(--space-6) var(--space-4); }
.eng-footer__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-6);
}
.eng-footer__head{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-accent-700);
  margin-bottom:var(--space-2);
}
.eng-footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; }
.eng-footer__bottom{
  border-top:1px solid var(--color-divider);
  margin-top:var(--space-6);
  padding-top:var(--space-3);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--space-2);
  font-size:12px;
  color:var(--color-muted);
}

/* ---- §4.3 Mobile bottom tab bar. Hidden ≥768px in 50-responsive.css. ---- */
.eng-tabbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  background:var(--color-bg);
  border-top:1px solid var(--color-text);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.eng-tabbar__item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--color-text);
  border-right:1px solid var(--color-divider);
}
.eng-tabbar__item:last-child{ border-right:0; }
.eng-tabbar__item[aria-current]{ color:var(--color-accent-700); }

/* §4.3 — booking strip that sits above the tab bar on commerce pages. */
.eng-bookingstrip{
  position:fixed;
  left:0;
  right:0;
  bottom:48px;
  z-index:49;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--color-bg);
  border-top:1px solid var(--color-divider);
}

/* Utility-strip variants. A plain .eng-muted would also impose --type-meta (13px)
   and fight the strip's 10.5px, so the strip gets colour-only modifiers. */
.eng-utility__dim{ color:var(--color-muted); }

/* Guarantee: no filter, blend or tint on any content photograph (client direction). */
.eng-figure > img,
.wp-block-image img{ filter:none !important; mix-blend-mode:normal !important; opacity:1 !important; }

/* §4.3 — booking strip internals. The strip's position/fixed rules are above. */
.eng-bookingstrip__price{
  display:grid;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}
.eng-bookingstrip__from{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:17px;
  line-height:1.15;
}
.eng-bookingstrip__note{
  font-size:11px;
  color:var(--color-muted);
  line-height:1.3;
}
.eng-bookingstrip__cta{ flex:0 0 auto; min-height:44px; }

/* The tab bar is 48px and the strip sits on top of it, so a commerce page needs the
   sum cleared at the foot of the document or the strip covers the last of the content. */
@media (max-width:767px){
  body.single-product{ padding-bottom:120px; }
}

/* ==========================================================================
   Season note — /plan/ and the four Tour guide pages. inc/december.php.

   Border and corner marks come from the .eng-blueprint / .eng-blueprint-x classes
   already on the markup (§3.2); this only sets the internal layout.
   ========================================================================== */
.eng-season-note{
  padding:var(--space-4);
  margin:0 0 var(--space-6);
  display:grid;
  gap:var(--space-3);
}
.eng-season-note p{ margin:0; max-width:62ch; }
.eng-season-note__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); }

/* ==========================================================================
   §3.9 Split hero — [eng_hero] (inc/hero.php). Every hub page opens with it.

   Text panel first in the DOM so the H1 sits in the first mobile viewport; the
   photograph beside it from 768px; nothing painted over the picture. The figure
   is the page's LCP image: srcset/sizes, width/height and fetchpriority come
   from the shortcode. Radii and shadows: none — this is a blueprint object.
   ========================================================================== */

.eng-splithero{
  display:grid;
  grid-template-columns:1fr;
  margin:var(--space-6) 0 var(--space-8);
  border:1px solid var(--color-divider);
}
.eng-splithero__panel{
  background:var(--color-text);
  color:#fff;
  padding:var(--space-8) var(--space-4);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.eng-splithero__figure{
  margin:0;
  aspect-ratio:16/10;
  max-height:60svh;
  background:var(--color-surface);
  overflow:hidden;
}
.eng-splithero__figure img,
.eng-splithero__img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.eng-splithero__title{
  font-family:var(--font-heading);
  font-size:var(--type-h1-hero);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 var(--space-3);
  text-wrap:balance;
}
.eng-splithero__title strong{ font-weight:700; color:var(--color-accent-200); }
.eng-splithero__lede{
  color:var(--color-accent-200);
  font-size:var(--type-body-article);
  line-height:1.55;
  margin:0 0 var(--space-6);
  max-width:56ch;
  text-wrap:pretty;
}
.eng-splithero__lede a{ color:#fff; text-underline-offset:3px; }
.eng-splithero__ctas{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.eng-splithero__cta,
a.eng-splithero__cta,
.inside-article a.eng-splithero__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 22px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  border:1px solid #fff;
  border-radius:0;
  background:#fff;
  color:var(--color-text);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.eng-splithero__cta:hover,
.eng-splithero__cta:focus,
a.eng-splithero__cta:hover,
.inside-article a.eng-splithero__cta:hover{ background:var(--color-accent-100); color:var(--color-accent-900); border-color:var(--color-accent-100); }
.eng-splithero__cta--alt,
a.eng-splithero__cta--alt,
.inside-article a.eng-splithero__cta--alt{ background:transparent; color:#fff; border-color:var(--color-accent-300); }
.eng-splithero__cta--alt:hover,
.eng-splithero__cta--alt:focus,
a.eng-splithero__cta--alt:hover,
.inside-article a.eng-splithero__cta--alt:hover{ background:var(--color-accent-800); color:#fff; border-color:var(--color-accent-800); }
.eng-splithero--text .eng-splithero__panel{ padding:var(--space-8) var(--space-6); }
@media (max-width:767px){
  .eng-splithero__cta,
  a.eng-splithero__cta{ width:100%; }
}
@media (min-width:768px){
  .eng-splithero{ grid-template-columns:1fr 1fr; }
  .eng-splithero__panel{ padding:var(--space-8) var(--space-6); }
  .eng-splithero__figure{ aspect-ratio:auto; max-height:none; height:100%; min-height:360px; }
}
@media (min-width:1024px){
  .eng-splithero{ grid-template-columns:45fr 55fr; }
  .eng-splithero__figure{ max-height:560px; }
}
/* The landmark the primary CTA scrolls to; offset for the sticky masthead. */
/* The scrolled masthead is 111px tall (utility strip tucked, nav showing); land the content
   a clear step below it. */
.eng-splithero__anchor{ display:block; height:0; scroll-margin-top:calc(var(--rail-top) + var(--space-8) + var(--space-3)); }

/* The hero replaces the page's own first section; keep the page rhythm underneath. */
.eng-splithero + .eng-section,
.eng-splithero + .eng-section--first{ padding-top:0; }

/* ==========================================================================
   §3.11 Island gallery — a scroll-snap rail of photographs (2026-09-04)
   ========================================================================== */

/*
 * The section that replaced the home page's single Bacuit Bay picture. It is a real
 * horizontally scrolling list, not a slideshow: CSS does the whole job, and
 * assets/js/eng-gallery.js only adds the buttons and the counter on top.
 *
 * Full-bleed by design. The rail runs edge to edge and the NEXT picture is deliberately
 * left half in frame, which is what tells a reader there is more to see — no arrows
 * drawn over the photograph, no dots, no instructional label. Nothing is drawn on the
 * pictures at all: client direction of 2026-08-21, the same rule that strips the
 * blueprint frame from .eng-figure. Captions live underneath.
 */
.eng-gallery{ padding:0 0 var(--space-8); }
.eng-gallery__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-4);
  padding:0 var(--space-4);
  margin-bottom:var(--space-4);
}
.eng-gallery__title{
  font-size:var(--type-h2-section);
  line-height:1.1;
  margin:0;
}
.eng-gallery__nav{ display:flex; gap:var(--space-2); flex:0 0 auto; }
.eng-gallery__btn{
  min-width:44px;
  min-height:44px;
  padding:0;
  font-size:16px;
  line-height:1;
}
/* The rail loops, so neither arrow is ever an end-stop and neither is ever disabled.
   The rule stays for the moment a future gallery has looping switched off. */
.eng-gallery__btn[disabled]{ opacity:.45; cursor:default; }

.eng-gallery__rail{
  display:flex;
  gap:var(--space-3);
  /* The first slide lines up with the page gutter; the last can still reach the left
     edge, which scroll-padding alone cannot do. */
  padding:0 var(--space-4);
  margin:0;
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--space-4);
  -webkit-overflow-scrolling:touch;
}
/* The scrollbar is browser chrome nobody designed: on a rail this wide it sits under the
   captions and reads as a rule. Hidden on the pointer platforms that draw a persistent
   one; the rail is still scrollable by every other means, and the buttons exist. */
.eng-gallery__rail{ scrollbar-width:none; }
.eng-gallery__rail::-webkit-scrollbar{ display:none; }
.eng-gallery__rail:focus-visible{
  outline:2px solid var(--color-accent-700);
  outline-offset:4px;
}
.eng-gallery__slide{
  flex:0 0 auto;
  /* 86vw on a phone so one picture holds the screen with the next just showing; 46vw on
     a desktop so two sit side by side and a third peeks. */
  width:min(86vw, 520px);
  scroll-snap-align:start;
}
.eng-gallery__figure{ margin:0; }
.eng-gallery__img{
  width:100%;
  /* One ratio for every frame, whatever the original is: the rail reads as a filmstrip
     rather than a ragged edge, and object-fit does the cropping. */
  aspect-ratio:3 / 2;
  object-fit:cover;
  display:block;
}
/* Element-qualified: `.eng-figure figcaption` above is 0-1-1 and sets 12px, so a bare
   class here would lose to it and the caption would render at the small figure size. */
figcaption.eng-gallery__cap{
  display:flex;
  gap:var(--space-2);
  font-size:14px;
  line-height:1.45;
  color:var(--color-muted);
  padding-top:var(--space-2);
}
/* The frame number, in the heading face — the one place a count belongs, because in a
   rail it says where you are rather than decorating a list. */
.eng-gallery__num{
  flex:0 0 auto;
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--color-accent-700);
}
.eng-gallery__count{
  padding:var(--space-3) var(--space-4) 0;
  margin:0;
  font-family:var(--font-heading);
  font-size:14px;
  letter-spacing:.04em;
  color:var(--color-muted);
}

@media (min-width:768px){
  .eng-gallery__slide{ width:min(62vw, 560px); }
}
@media (min-width:1024px){
  .eng-gallery{ padding-bottom:var(--space-8); }
  .eng-gallery__head,
  .eng-gallery__rail,
  .eng-gallery__count{ padding-left:var(--space-6); padding-right:var(--space-6); }
  .eng-gallery__rail{ scroll-padding-left:var(--space-6); }
  .eng-gallery__slide{ width:min(46vw, 640px); }
}

/* A rail that animates itself is the one thing a reduced-motion visitor asked not to
   have. The script already jumps instead of gliding; this covers the snap itself. */
@media (prefers-reduced-motion: reduce){
  .eng-gallery__rail{ scroll-behavior:auto; }
}