/*
 * Page-specific CSS consolidated from each approved mockup's own inline
 * <style> block (mockups/homepage.html, hub-trumpet.html,
 * review-yamaha-ytr-2330.html, comparison-trumpet-vs-cornet.html,
 * best-guide-trumpets-for-beginners.html, 404.html, search-results.html).
 *
 * These rules were never part of assets/css/components.css — each mockup
 * kept them in its own <head> because they're specific to that one page
 * type (hero layout, error-page centering, etc.), not reusable components.
 * When the PHP templates were built from these mockups, only the shared
 * tokens.css/base.css/components.css bundle was carried over, so pages
 * that depend on one of these page-specific rules (most visibly the
 * homepage hero) rendered without them. This file fixes that by loading
 * all of them, everywhere, the same way components.css does — a class
 * simply does nothing on pages that don't use it, so there's no harm in
 * loading the full set globally instead of splitting it per template.
 */

/* ---- homepage.html ---- */
.hero {
  /* Reverted — two rounds of "not enough" feedback pushed this to
     calc(--space-9 + --space-5) = 120px block, which then flipped to "way
     too much" once seen live. Back to a single sane token instead of
     stacking further guesses; --space-8 (64px) matches the reference
     screenshot's proportions much more closely than 120px did. */
  padding-block: var(--space-8);
  background: var(--gradient-hero);
}
.hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass-deep);
  margin-bottom: var(--space-4);
}
.hero h1 { font-size: var(--text-2xl); max-width: 16ch; }
.hero p.hero__sub { font-size: var(--text-md); color: var(--color-ink-soft); margin-top: var(--space-4); max-width: 46ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__byline {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  padding-bottom: var(--space-2);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}
.hero__byline strong { color: var(--color-ink-soft); }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero h1 { font-size: var(--text-3xl); }
}

/*
 * Hero visual — second column of .hero__grid. Renders one of two things:
 * (a) a real product-photo collage once at least one product has a
 * confirmed image URL (see field_primary_image_url / Tools -> OI Core:
 * Amazon Affiliate Links), or (b) a decorative instrument-outline
 * illustration placeholder when none are confirmed yet — so the hero never
 * collapses to a bare single column while photos are pending, but also
 * never shows a fabricated or stock product photo standing in for a real
 * one. front-page.php decides which to render; both share this container.
 */
.hero__visual {
  position: relative;
  display: none;
  min-height: 440px;
}
@media (min-width: 1024px) {
  .hero__visual { display: block; }
}
/*
 * Amazon source photos come in wildly inconsistent native dimensions — a
 * tall narrow flute shot, a wide angled saxophone shot, a square case shot —
 * and there is no way to normalize that at the source without re-shooting
 * or cropping the photos ourselves (which this site does not do; see the
 * SiteStripe image tool's own docblock on never editing merchant photos).
 * The fix lives entirely in CSS: every card below is forced to the SAME
 * fixed aspect-ratio box regardless of the photo's native shape, and
 * `object-fit: contain` scales each photo to fit inside that box without
 * cropping or distorting it — so a tall flute and a wide saxophone photo
 * both render as consistent, evenly sized cards instead of whatever odd
 * shape their original file happened to be.
 */
.hero__visual-img {
  position: absolute;
  aspect-ratio: 1 / 1;
  height: auto;
  box-sizing: border-box;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  background: #fff;
  object-fit: contain;
  border: 1px solid var(--color-line);
}
/*
 * 6 slots (was 3) for a fuller collage. Earlier indexes (0-2) are the
 * larger, more central cards; later ones (3-5) are smaller accent cards
 * tucked into the remaining corners. Any count from 1-6 confirmed photos
 * still composes cleanly since each index has its own fixed spot — there's
 * no dependency between how many photos exist and how any one is placed.
 */
.hero__visual-img--0 { width: 34%; top: 4%;  right: 0%;  z-index: 6; padding: var(--space-4); }
.hero__visual-img--1 { width: 30%; top: 32%; right: 21%; z-index: 5; padding: var(--space-4); transform: rotate(-3deg); }
.hero__visual-img--2 { width: 27%; bottom: 2%; right: 8%; z-index: 4; padding: var(--space-3); transform: rotate(4deg); }
.hero__visual-img--3 { width: 28%; bottom: 6%; left: 2%;  z-index: 3; padding: var(--space-4); transform: rotate(-5deg); }
.hero__visual-img--4 { width: 24%; top: 2%;  left: 10%; z-index: 2; padding: var(--space-3); transform: rotate(3deg); }
.hero__visual-img--5 { width: 21%; top: 38%; left: 0%;  z-index: 1; padding: var(--space-3); transform: rotate(-4deg); }

/* Placeholder state: shown on all breakpoints (not just desktop) so mobile visitors don't see a bare hero either. */
.hero__visual--placeholder {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  min-height: 260px;
}
.hero__visual-illustration { width: 100%; max-width: 340px; height: auto; }
.hero__visual-caption {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  max-width: 34ch;
  margin: 0;
}
.section-foot-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-brass-deep);
  text-decoration: none; margin-top: var(--space-6);
}
.section-foot-link:hover { color: var(--color-walnut); }
.section-foot-link svg { width: 16px; height: 16px; }
.rec-cards-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.article-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--color-ink);
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.article-card:hover, .article-card:focus-visible { box-shadow: var(--shadow-md); border-color: var(--color-brass); color: var(--color-ink); }
.article-card__type { font-size: var(--text-xs); font-weight: 700; color: var(--color-brass-deep); text-transform: uppercase; letter-spacing: 0.05em; }
.article-card h3 { font-size: var(--text-md); }
.article-card p { font-size: var(--text-sm); color: var(--color-ink-soft); }
.article-card__meta { font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: auto; padding-top: var(--space-3); }

/* ---- hub-trumpet.html ---- */
.repertoire-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.repertoire-list li { font-size: var(--text-sm); color: var(--color-ink-soft); padding-left: var(--space-4); position: relative; }
.repertoire-list li::before { content: "\266A"; position: absolute; left: 0; color: var(--color-brass-deep); }

/* ---- review-yamaha-ytr-2330.html ---- */
.spec-table th, .spec-table td { font-size: var(--text-sm); }
.strengths-weaknesses { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .strengths-weaknesses { grid-template-columns: repeat(2, 1fr); } }
.sw-col { border-radius: var(--radius-lg); padding: var(--space-5); }
.sw-col--strengths { background: var(--color-verified-bg); }
.sw-col--weaknesses { background: var(--color-caution-bg); }
.sw-col h3 { font-size: var(--text-md); margin-bottom: var(--space-3); }
.sw-col ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sw-col li { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* ---- comparison-trumpet-vs-cornet.html ---- */
.vs-head { display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; text-align: center; }
.vs-head__side h2 { font-size: var(--text-xl); }
.vs-head__vs { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-brass-deep); }

/* ---- best-guide-trumpets-for-beginners.html ---- */
.price-band-key { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: var(--space-3); }
.price-band-key span { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---- 404.html ---- */
.error-hero { text-align: center; padding-block: var(--space-9) var(--space-7); max-width: 640px; margin-inline: auto; }
.error-hero__code { font-family: var(--font-display); font-size: 5.5rem; color: var(--color-brass); line-height: 1; margin-bottom: var(--space-4); }
.error-hero p { color: var(--color-ink-soft); font-size: var(--text-md); margin: var(--space-4) auto var(--space-6); max-width: 46ch; }
.error-search { display: flex; gap: var(--space-3); max-width: 480px; margin-inline: auto var(--space-7); }
.error-search input {
  flex: 1; padding: 0.85em 1.2em; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-line-deep); font-size: var(--text-base);
  background: var(--color-surface); color: var(--color-ink);
}

/* ---- header brand tagline (added alongside the Shop page + search fix) ----
 * .brand was a single flex row (icon + name only). Splitting the name into
 * its own .brand__text column lets a tagline sit directly under it without
 * changing .brand's own icon-plus-label layout for anything else that reads
 * it. Hidden below 640px purely for header space — the name+icon alone is
 * still a fully sufficient home link on small screens; the tagline is
 * marketing copy, not the primary navigational label.
 *
 * Also hidden between 640px and 1279px (i.e. only shown at >=1280px): the
 * tagline text itself is long ("The World's Most Trusted Guide to Orchestra
 * Instruments") and the header is back to a single row holding brand + 8
 * nav links + search. Rather than let the tagline squeeze the nav (the
 * thing that actually matters functionally), it only appears once there's
 * genuinely room for it, on wider desktop screens. Ordinary laptop widths
 * (1024-1279px) still get the full nav + search with the name-only brand.
 */
.brand__text { display: flex; flex-direction: column; line-height: 1.15; gap: 1px; }
.brand__tagline {
  display: none;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
  white-space: nowrap;
}
@media (min-width: 1280px) {
  .brand__tagline { display: block; }
}

/* ---- header search ----
 * Was a hidden dropdown panel behind a button (still a real input, just
 * hidden until clicked, and dependent on JS to reveal it). Replaced with
 * .header-search-inline — a plain, always-visible search box in
 * components.css (see oi_core_site_header()'s docblock comment) — no
 * open/close state to get wrong, works with JS disabled. This block is
 * intentionally left empty; kept as a marker in case any external CSS
 * still targets the old .header-search-panel class name. */

/* ---- Shop page (all-products grid + filter bar) ---- */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
.shop-filter-group { display: flex; flex-direction: column; gap: var(--space-1); min-width: 180px; }
.shop-filter-group label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
}
.shop-filter-group select {
  padding: 0.6em 0.9em;
  border: 1.5px solid var(--color-line-deep);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.shop-filter-count { font-size: var(--text-sm); color: var(--color-ink-faint); margin-left: auto; align-self: center; }

.shop-card__ctas {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}
.shop-card__ctas .btn { flex: 1; justify-content: center; text-align: center; }
[data-shop-card][hidden] { display: none; }

/* ---- search-results.html ---- */
.search-hero { display: flex; flex-direction: column; gap: var(--space-4); }
.search-input-row { display: flex; gap: var(--space-3); max-width: 640px; }
.search-input-row input {
  flex: 1; padding: 0.85em 1.2em; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-line-deep); font-size: var(--text-base);
  background: var(--color-surface); color: var(--color-ink);
}
.search-meta { font-size: var(--text-sm); color: var(--color-ink-faint); }
.demo-divider { display: flex; align-items: center; gap: var(--space-4); margin-block: var(--space-8); }
.demo-divider::before, .demo-divider::after { content: ""; flex: 1; border-top: 1px dashed var(--color-line-deep); }
.demo-divider span { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-faint); white-space: nowrap; }