.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container-narrow {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Vertical rhythm: 50px mobile / 60px tablet / 88px desktop (max 110px),
   replacing the previous 96-160px scale that produced 180-300px combined
   gaps between adjacent sections (each section's own padding-top +
   padding-bottom stacking with the next section's). */
.section {
  padding-block: 50px;
}

@media (min-width: 768px) {
  .section { padding-block: 60px; }
}

@media (min-width: 960px) {
  .section { padding-block: 88px; }
}

.section-head {
  max-width: 640px;
  margin-bottom: 40px;
}
.section-head p.lead { margin-top: var(--space-3); }

/* Centered section intros (Propshop-proportion widths) — scoped to
   .text-center so left-aligned .section-head usage elsewhere (service,
   venue, exhibition, industry detail pages) is untouched. The heading is
   kept narrower than the paragraph so it wraps into fewer, more balanced
   lines instead of the previous narrow-container early wrap. */
.section-head.text-center {
  max-width: 900px;
  margin-inline: auto;
}
.section-head.text-center h2 {
  max-width: 820px;
  margin-inline: auto;
  margin-top: 16px;
}
.section-head.text-center p.lead {
  max-width: 900px;
  margin-inline: auto;
  margin-top: 24px;
  line-height: 1.8;
}
@media (max-width: 767px) {
  .section-head.text-center,
  .section-head.text-center h2,
  .section-head.text-center p.lead {
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 959px) {
  .section-head.text-center,
  .section-head.text-center h2,
  .section-head.text-center p.lead {
    max-width: 90%;
  }
}

/* ---- Hero ---- */
.hero {
  padding-block: clamp(48px, 7vh, 88px);
}
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(46px, 5.2vw, 82px);
  line-height: 0.96;
  max-width: 1050px;
  margin-inline: auto;
  color: var(--text-inverse);
}
@media (max-width: 1440px) {
  .hero h1 {
    font-size: clamp(44px, 4.8vw, 68px);
    max-width: 920px;
  }
}
@media (max-height: 800px) and (min-width: 1024px) {
  .hero h1 { font-size: clamp(40px, 4.2vw, 60px); }
}
.hero-container { max-width: 640px; }
@media (min-width: 1024px) {
  .hero-container { max-width: 1120px; }
}

/* ---- Scroll cue (hero only) ---- */
.scroll-cue {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-top: 28px;
  color: var(--text-inverse-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.scroll-cue-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: scroll-cue-move 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-move {
  0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 0.9; }
  50% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-line { animation: none; }
}
@media (min-width: 640px) {
  .scroll-cue { display: flex; }
}
/* Short laptop screens: nothing left below the cue to hint at scrolling to,
   since the hero is already capped tighter there (see components.css). */
@media (max-height: 760px) and (min-width: 1024px) {
  .scroll-cue { display: none; }
}
.hero-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
}
.hero h1 { margin-block: 0 18px; }
.hero-brand-line {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-inverse-muted);
  margin-top: 0;
  margin-bottom: 26px;
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: 24px; }
/* Safety net: .btn uses white-space:nowrap for visual consistency, which
   means a longer CTA label can overflow a narrow phone screen even inside
   a wrapping flex row. Below 420px, let hero/CTA-band buttons stack
   full-width and wrap their own text rather than risk horizontal scroll. */
@media (max-width: 420px) {
  .hero-actions .btn,
  .cta-band .btn { flex: 1 1 100%; white-space: normal; text-align: center; justify-content: center; }
}

/* Mobile hero: let content size itself naturally rather than forcing the
   desktop viewport-relative height, and scale the heading against its own
   width band instead of the desktop clamp. */
@media (max-width: 767px) {
  .hero { padding-block: 72px 64px; }
  .hero h1 { font-size: clamp(38px, 12vw, 58px); line-height: 0.98; }
}

.hero-diagram { width: 100%; }
/*
 * The hero diagram's fine-print annotations (dimension labels, leader-line
 * callouts) render illegibly small once the SVG is scaled down for phone
 * widths (a design meant to read at ~600px+ shrinks its 11px labels to
 * ~5px). Below 640px we show just the clean line drawing and drop the
 * unreadable micro-text rather than ship illegible copy.
 */
@media (max-width: 639px) {
  .hero-diagram .diagram-detail { display: none; }
}

/* ---- Two-column content + sidebar (service/exhibition/venue/industry templates) ---- */
.content-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  .content-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
/*
 * Grid items default to min-width: auto, which sizes them to fit their
 * widest child's intrinsic content — a data table (e.g. the venue halls
 * table) can be wider than the track even though it's wrapped in an
 * overflow-x:auto div, silently blowing out the whole page's scroll width.
 * minmax(0, ...) above + min-width: 0 here forces the intended track width
 * to win, so wide content scrolls inside its own wrapper instead of the page.
 */
.content-main, .content-sidebar { min-width: 0; }
.content-main > * + * { margin-top: var(--space-7); }
.content-sidebar > * + * { margin-top: var(--space-6); }

.sidebar-block {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.sidebar-block h3 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.sidebar-block dl { display: flex; flex-direction: column; gap: var(--space-4); }
.sidebar-block dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.sidebar-block dd { margin: 0; margin-top: var(--space-1); }

/* ---- Utility layout helpers ---- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.text-secondary { color: var(--text-secondary); }

/*
 * .flex.justify-between is used sitewide for "heading + action button" rows
 * (section headers, admin list headers, CTA bands). These must stack on
 * narrow screens instead of squeezing the button into overflow — wrapping
 * by default here fixes every current and future use of the pattern at once.
 */
.flex.justify-between {
  flex-wrap: wrap;
  row-gap: var(--space-3);
}

/* Subtle scroll reveal — opt-in via data-reveal, respects reduced-motion via base.css.
   Items can set style="--i:2" to stagger within a group (see homepage.js /
   templates that loop cards) — transition-delay stays 0 if --i is unset. */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Asymmetric / alternating section layouts (homepage) ---- */
.split-asym {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  .split-asym { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-7); }
  .split-asym.split-reverse { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .split-asym.split-reverse > :first-child { order: 2; }
  .split-asym.split-reverse > :last-child { order: 1; }
}

/* Offsets one column vertically to break the "stacked rows" rhythm */
.offset-down { position: relative; }
@media (min-width: 960px) {
  .offset-down { margin-top: var(--space-8); }
}

/* ---- Detail-page hero band (service/venue/exhibition/industry/blog) ---- */
.detail-hero {
  padding-block: var(--space-7) var(--space-6);
}
.detail-hero .eyebrow { margin-bottom: var(--space-2); }
.detail-hero h1 { margin-top: var(--space-3); }