/* ==========================================================================
   Africa Brand | page-branding.css | Branding and Print page only
   Loaded after main.css. Token colours only; no blur below 768px (main.css raster block).
   ========================================================================== */

/* ---- Hero: the h1 is two short lines, so the piece (frame, reflection, caption) sets the row height and its caption ends
        close to the bottom of .hero__inner. From 1024 up the grid carries extra bottom padding and from 1280 up the thread box
        is pinned to the bottom at a fixed 300px, so the upper path passes 20px or more below the caption at every viewport
        height (measured at 1440x900 and 1280x800). Below 1024 the hero stacks and the thread is boxed behind the photograph
        (as on the Home hero) instead of under the caption. ---- */
@media (min-width: 1024px) { .hero--inner .hero__grid { padding-bottom: clamp(8rem, 15vh, 9.5rem); } }
@media (min-width: 1280px) { .hero--inner .hero__inner .thread { top: auto; bottom: 0; height: 300px; } }
@media (max-width: 1023px) { .hero--inner .hero__inner .thread { top: 54%; height: 32%; } }

/* ---- Sub-heading that introduces a ring-card group: an h3 carrying the eyebrow rule ---- */
.sub-h { display: flex; align-items: center; gap: .75rem; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 1.25rem; font-size: var(--fs-h3); }
.sub-h::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--chrome-line); }
.silk .sub-h::before { background: linear-gradient(90deg, transparent, var(--chrome-600), var(--chrome-400)); }

/* ---- Vehicle photographs: three cards under the bullet tiles ---- */
.work-grid--3 { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
/* #vehicle is 1,500 to 2,600px tall, so the sliced 1600x900 SVG scales 1.6x to 2.8x and both chrome strokes would land on the
   caption row and the group heading. The individual translate composes with the silkC keyframe transform (main.css does the
   same for Home #why); the values were probed per breakpoint so neither stroke touches a caption, label or heading. */
#vehicle .silk__c { translate: 0 -45%; }
@media (min-width: 768px) and (max-width: 1023px) { #vehicle .silk__c { translate: 0 -70%; } }
@media (max-width: 767px) { #vehicle .silk__c { translate: 0 10%; } }

/* ---- Four-card ring grid (PPF, Full Wraps, Decals and Graphics, Tinting): 2 x 2 from 1279 down instead of 3 + 1 ---- */
@media (max-width: 1279px) { .ring-grid--4 { grid-template-columns: 1fr 1fr; } }

/* ---- Billboards and wall murals band: two labelled regions on one dark ground with the three light trails
        placed in the top padding, at the seam between the blocks and in the bottom padding, so no trail can cross copy ---- */
.band .fx-trail--a { top: 3rem; }
.band .fx-trail--c { top: auto; bottom: 3rem; }
.band__seam { position: relative; height: 0; margin: clamp(2.5rem, 2rem + 2.5vw, 4rem) 0; }
.band__seam .fx-trail--b { top: -1px; }

/* ---- Window and glass branding: one wide 16:9 photograph ---- */
.proj--wide .glow-frame__media { aspect-ratio: 16 / 9; }

/* ---- Banners Displays and Events ---- */
.tile-list--stack { grid-template-columns: 1fr; margin-top: .25rem; }
.feature__copy .tile-list--stack > li { padding: .7rem 1rem; }
/* The thread box sits under the card band (the ring cards are opaque, so the paths show only in the gutters and the bottom padding);
   on tablets the grid stacks and the box drops to the last card rows so it clears the Brand Activations heading. */
.thread--band { top: 64%; height: 36%; }
@media (max-width: 1023px) { .thread--band { top: 74%; height: 26%; } }
/* Displays (one column, two stacked cards) beside Brand Activations (three columns, two rows) on one shared 4-track grid so every row aligns. */
.group-grid { grid-template-columns: repeat(4, 1fr); margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.group-grid .sub-h { margin: 0 0 -.15rem; align-self: end; }
.group-grid .gg-h1 { grid-column: 1; grid-row: 1; }
.group-grid .gg-h2 { grid-column: 2 / -1; grid-row: 1; }
.group-grid .gg-d1 { grid-column: 1; grid-row: 2; }
.group-grid .gg-d2 { grid-column: 1; grid-row: 3; }
@media (max-width: 1279px) {
  /* Stacked groups on a 6-track grid: two wide Displays cards, then six Brand Activations cards three per row. */
  .group-grid { grid-template-columns: repeat(6, 1fr); }
  .group-grid .sub-h, .group-grid .gg-h1, .group-grid .gg-h2 { grid-column: 1 / -1; grid-row: auto; margin: 1.25rem 0 0; }
  .group-grid .ring-card { grid-column: span 2; grid-row: auto; }
  .group-grid .gg-d1, .group-grid .gg-d2 { grid-column: span 3; grid-row: auto; }
}
@media (max-width: 767px) {
  .group-grid { grid-template-columns: 1fr 1fr; }
  .group-grid .ring-card, .group-grid .gg-d1, .group-grid .gg-d2 { grid-column: auto; }
  .group-grid .sub-h, .group-grid .gg-h1, .group-grid .gg-h2 { grid-column: 1 / -1; margin-top: .75rem; }
}

/* ---- Promotional Branding: six icon tiles (ring cards on paper with the 46px chrome icon tile from the service cards) ---- */
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* The section is short (about 700px), so the strokes sit low; nudged down so they run through the tile gutters, not under the lead. */
#promo .silk__c { translate: 0 20%; }
.promo-tile { flex-direction: row; align-items: center; gap: .9rem; padding: .85rem 1rem; font: 700 .95rem/1.3 var(--font-display); letter-spacing: -.01em; }
.promo-tile .svc__icon { flex: none; }
.promo-tile:hover .svc__icon { color: var(--molten); box-shadow: inset 0 1px 0 #fff, 0 0 20px -4px rgba(232,99,43,.6); }

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .band__seam { margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0; }
  /* The odd third vehicle card spans the two-column grid at 16:9 (main.css does this only for an even last card). */
  .work-grid--3 > .proj:last-child { grid-column: 1 / -1; }
  .work-grid--3 > .proj:last-child .glow-frame__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .sub-h { margin: 1.75rem 0 .9rem; }
  .group-grid { gap: .9rem; }
  .promo-grid { grid-template-columns: 1fr 1fr; gap: .9rem; }
}
@media (max-width: 639px) {
  .ring-grid--4, .group-grid { grid-template-columns: 1fr; }
  .sub-h { font-size: 1.2rem; margin: 1.4rem 0 .75rem; }
  .work-grid--3 > .proj:last-child { grid-column: 1 / -1; }
  .work-grid--3 .proj__caption { display: none; }
  .tile-list > li { padding: .6rem .85rem; font-size: .9rem; }
  .feature__copy .tile-list--stack > li { padding: .6rem .85rem; }
  .ring-card { padding: 1.1rem 1.1rem; }
  .promo-tile { padding: .7rem .85rem; gap: .75rem; }
  .promo-tile .svc__icon { width: 40px; height: 40px; }
  .promo-tile .svc__icon svg { width: 20px; height: 20px; }
  .proj--wide .glow-frame__media { aspect-ratio: 4 / 3; }
  .band__seam { margin: 1.75rem 0; }
}
@media (max-width: 479px) {
  .promo-grid { grid-template-columns: 1fr; gap: .6rem; }
}