/* ==========================================================================
   Africa Brand | page-signage.css | signage.html layout helpers (spec 5.3)
   Loaded after main.css. Builds on the shared components and the token set only;
   every rule is scoped to a signage layout, nothing restyles a shared class globally.
   ========================================================================== */

/* ---- Alias anchors (#led-illuminated-signs, #3d-fabrication) ----
   Pinned to the section's top edge so the fragment lands on the section like the canonical id does
   (an inline empty span would sit below the section padding and land the h2 under the sticky bar). */
[id="led-illuminated-signs"], [id="3d-fabrication"] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* ---- 2+1 photo stacks inside the split panels (#illuminated, #3d) ----
   Two 4:3 cards share a row and one card runs the full width at 16:9 (last in #illuminated, first in #3d). */
.proj-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.proj-stack .proj--wide { grid-column: 1 / -1; }
.proj-stack .proj--wide .glow-frame__media { aspect-ratio: 16 / 9; }
/* The two small cards are 190 to 260px wide: the chip already names the category, and the long "3D Lettering and Fabricated Signs" label would wrap (Home drops .proj-pair labels the same way). */
.proj-stack .proj:not(.proj--wide) .proj__cat { display: none; }

/* Bullet tiles in a split copy column: one column from 1024 up (two 311px tiles would wrap the longer bullets). */
@media (min-width: 1024px) {
  .feature__copy .tile-list { grid-template-columns: 1fr; }
}

/* ---- Hero thread box ----
   The seven chips wrap to two rows (three between 1024 and 1279), and on short viewports the hero is content-driven, so a
   percentage box can land a path on the chip row. The grid keeps a bottom band instead and both paths run inside it, below
   the last chip row and the caption under the backlit piece, at every width. */
@media (min-width: 1024px) {
  .hero--inner .hero__grid { padding-bottom: 8rem; }
  .hero--inner .hero__inner .thread { top: calc(100% - 14rem); height: 14rem; }
}
@media (max-width: 1023px) {
  .hero--inner .hero__grid { padding-bottom: 4.25rem; }
  .hero--inner .hero__inner .thread { top: calc(100% - 5rem); height: 5rem; }
}
/* #3d between 768 and 1023: the split stacks, the photo stack (with captions) is last, so the pair runs in the section's bottom padding. */
@media (min-width: 768px) and (max-width: 1023px) {
  [id="3d"] .thread { top: calc(100% - 6rem); height: 6rem; }
}

/* ---- Silk chrome stroke offsets ----
   The 1600x900 ribbon SVG is sliced per section, so the chrome hairline lands differently in each: these offsets (the
   Home #why pattern) move it behind the opaque cards and below the headers instead of across a caption row. */
#illuminated .silk__c { translate: 18% -10%; }
#premises .silk__c { translate: -24% 22%; }
#greenwalls .silk__c { translate: 0 -34%; }
@media (max-width: 1023px) {
  #illuminated .silk__c { translate: 12% 10%; }
}

/* ---- Two half-width blocks (#shopfront beside #interior) ----
   Subgrid rows keep the two headers and the two photo rows aligned; browsers without subgrid fall back to two independent columns. */
.twin { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; }
.twin__block { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.twin .sec-head { margin-bottom: 1.75rem; }
.twin__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.twin__media .glow-frame__media { aspect-ratio: 4 / 3; }

/* ---- Seven wireframe Signage cards (#wayfinding) ----
   12-track grid: four cards, then three wider ones, so the second row leaves no hole (the Home service grid's rule). */
.feature + .ring-grid { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.ring-grid--seven { grid-template-columns: repeat(12, 1fr); }
.ring-grid--seven > .ring-card { grid-column: span 3; }
.ring-grid--seven > .ring-card:nth-last-child(-n+3) { grid-column: span 4; }
.ring-card--link { padding-right: 3.4rem; }
.ring-card--link h3 { transition: color .25s; }
.ring-card--link:hover h3 { color: var(--cream); }
.ring-card__go { --bevel-angle: 210deg; position: absolute; top: 1.1rem; right: 1.1rem; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel) border-box; color: var(--amber); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transition: transform .3s var(--ease), color .25s, box-shadow .3s; }
.ring-card__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ring-card--link:hover .ring-card__go { transform: translate(2px, -2px); color: var(--cream); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px -6px rgba(242,154,60,.8); }
/* Thread box for the head plus card grid: both paths run behind the card rows (opaque, Rule B1) and the base, below the lead and the photo caption. */
.thread--cards { top: 58%; height: 42%; }

/* ---- CTA plate: the question is long-worded, so the heading may run wider than the Home plate's 15ch. ---- */
#quote .plate h2 { max-width: 24ch; }

/* ---- Hero capability strip: seven chips ----
   Between 673 and 1279px the strip would scroll with no edge fade, so the chips wrap; phones keep the Home strip's scroll and fade. */
@media (min-width: 673px) and (max-width: 1279px) {
  .hero--inner .caps { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
}

/* ---- Responsive ---- */
@media (max-width: 1279px) {
  .ring-grid--seven > .ring-card:nth-child(n) { grid-column: span 4; }
  .ring-grid--seven > .ring-card:nth-last-child(-n+4) { grid-column: span 6; }
}
@media (max-width: 1023px) {
  .twin { grid-template-columns: 1fr; grid-template-rows: none; gap: 3rem; }
  .twin__block { grid-row: auto; grid-template-rows: none; }
  .twin__pair, .twin__media { max-width: 640px; }
  .thread--cards { top: 62%; height: 38%; }
}
@media (max-width: 767px) {
  .ring-grid--seven > .ring-card:nth-child(n) { grid-column: span 6; }
  .ring-grid--seven > .ring-card:last-child { grid-column: span 12; }
  .ring-card--link { padding-right: 3rem; }
}
@media (max-width: 639px) {
  .ring-grid--seven > .ring-card:nth-child(n) { grid-column: span 12; }
  .feature + .ring-grid { margin-top: 1.5rem; }
  /* Two-up cards on phones follow the Home rule: chip and balanced title only; the wide card keeps its caption. */
  .proj-stack, .twin__pair { gap: .75rem; }
  .proj-stack .glow-frame__media, .twin__pair .glow-frame__media { aspect-ratio: 4 / 5; }
  .proj-stack .proj--wide .glow-frame__media { aspect-ratio: 16 / 9; }
  .proj-stack .proj__caption, .proj-stack .proj__cat, .twin__pair .proj__caption, .twin__pair .proj__cat { display: none; }
  .proj-stack .proj--wide .proj__caption { display: block; }
  .proj-stack .proj__meta, .twin__pair .proj__meta { padding-top: .3rem; }
  .proj-stack .proj__title, .twin__pair .proj__title { font-size: .88rem; line-height: 1.25; text-wrap: balance; }
  .proj-stack .proj--wide .proj__title { font-size: 1.05rem; }
  .twin { gap: 2rem; }
  .twin .sec-head { margin-bottom: 1.2rem; }
  .twin__media .proj__caption { display: none; }
}