/* AiAd27 web layer. The campaign uses three grounds: cream, ink and one strand. */

body {
  background: var(--a27-cream);
  color: var(--a27-ink);
}

.site-header {
  background: var(--a27-scrim);
  border-bottom: 1px solid var(--a27-rule);
  box-shadow: none;
}

.header-inner { height: 78px; }

.site-logo__img,
.custom-logo {
  width: 180px;
  height: auto;
  max-width: 46vw;
  max-height: none;
}

.main-navigation ul { gap: clamp(1rem, 2vw, 2rem); }

.main-navigation a {
  color: var(--a27-ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.main-navigation a::after { background: var(--a27-safe-deep); }

.main-navigation a.nav-cta,
.btn,
.hero-cta__btn--primary {
  background: var(--a27-ink);
  color: var(--a27-cream);
  border: 1px solid var(--a27-ink);
  border-radius: 0;
}

.main-navigation a.nav-cta:hover,
.btn:hover,
.hero-cta__btn--primary:hover { background: var(--a27-safe-deep); border-color: var(--a27-safe-deep); }

.hero-section {
  /* Hero body size, shared by the subtitle and the strand summary. They were
     set separately — a clamp against a fixed 1.1rem — so they matched at small
     widths and drifted apart as the viewport grew, 23.2px against 17.6px. */
  --hero-body: clamp(1.12rem, 2vw, 1.45rem);
  --hero-bright: var(--a27-safe);
  --hero-deep: var(--a27-safe-deep);
  --hero-mark: url('../brand/aiad27/icon-safe.svg');
  background: var(--hero-bright);
  padding-top: 78px;
  transition: background-color 1.1s ease;
}

.hero-section[data-strand="smart"] { --hero-bright: var(--a27-smart); --hero-deep: var(--a27-smart-deep); --hero-mark: url('../brand/aiad27/icon-smart.svg'); }
.hero-section[data-strand="creative"] { --hero-bright: var(--a27-creative); --hero-deep: var(--a27-creative-deep); --hero-mark: url('../brand/aiad27/icon-creative.svg'); }
.hero-section[data-strand="responsible"] { --hero-bright: var(--a27-responsible); --hero-deep: var(--a27-responsible-deep); --hero-mark: url('../brand/aiad27/icon-responsible.svg'); }
.hero-section[data-strand="future"] { --hero-bright: var(--a27-future); --hero-deep: var(--a27-future-deep); --hero-mark: url('../brand/aiad27/icon-future.svg'); }

.hero-title-block {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(1.15rem, 2.2vw, 1.55rem);
  min-height: 0;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem);
  text-align: left;
}

.hero-copy {
  align-self: start;
  max-width: none;
  width: 100%;
  position: relative;
  top: auto;
  z-index: 1;
}

.hero-slogan,
.section-label {
  color: var(--a27-ink);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-brand {
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-rows: auto auto;
  column-gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  width: max-content;
  max-width: 100%;
  font-size: clamp(3.25rem, 7.2vw, 6.7rem);
}

.hero-lockup {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: min(300px, 100%);
  height: auto;
  margin: 0 0 1.25rem auto;
}

.hero-title-block .hero-date {
  grid-column: 1;
  grid-row: 2;
  color: #FFFFFF;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .9;
  margin: 0;
  text-align: left;
}

.hero-title-block .hero-date__line {
  display: block;
}

.hero-title-block .hero-date__line--loop {
  text-align: right;
}

/* The strand-side mark is the same graphic as .hero-brand__mark and only one of
   the two is ever shown. Desktop keeps it beside the hero title; narrow screens
   move it beside the strand word. */
.hero-strand-feature__mark {
  display: none;
  flex: none;
  width: .78em;
  height: .78em;
  background: var(--a27-ink, #231F20);
  -webkit-mask: var(--hero-mark) center / contain no-repeat;
  mask: var(--hero-mark) center / contain no-repeat;
}

.hero-brand__mark {
  grid-column: 2;
  grid-row: 2;
  display: block;
  align-self: center;
  width: 1.72em;
  height: 1.72em;
  background: var(--a27-ink, #231F20);
  -webkit-mask: var(--hero-mark) center / contain no-repeat;
  mask: var(--hero-mark) center / contain no-repeat;
}

.hero-title-block .hero-subtitle {
  color: var(--a27-ink);
  font-size: var(--hero-body);
  line-height: 1.35;
  margin: 1.65rem 0 0;
  max-width: min(42rem, 100%);
  text-align: left;
}

.hero-title-block .hero-subtitle strong { color: var(--a27-ink); font-weight: 700; }

#hero .hero-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  column-gap: 0;
  row-gap: 0;
  margin: 1rem 0 0;
  max-width: min(42rem, 100%);
  width: 100%;
}

#hero .hero-cta__btn {
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: .85rem 1rem;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  justify-content: center;
}

.hero-cta__btn--secondary {
  background: #FFFFFF;
  border: 1px solid var(--a27-ink);
  color: var(--a27-ink);
}

#hero .hero-cta__btn--secondary { border-left-width: 0; }

/* Rollover takes the strand's deep, so it changes with the hero and reads as
   colour without competing with the bright ground behind it. Cream type on a
   deep is the campaign's reverse pairing and clears contrast on all five. */
.hero-cta__btn--secondary:hover,
.hero-cta__btn--secondary:focus-visible {
  background: var(--hero-deep);
  border-color: var(--hero-deep);
  color: var(--a27-cream);
}

.hero-strand-feature {
  align-self: start;
  justify-self: stretch;
  position: relative;
  top: auto;
  width: 100%;
  max-width: none;
  color: var(--a27-ink);
  z-index: 0;
  margin-top: 0;
}

.hero-strand-feature__stage {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: .2rem 0 .15rem;
  perspective: 950px;
  font-size: clamp(3.75rem, 6vw, 6rem);
}

.hero-strand-feature__word {
  display: block;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -.085em;
  line-height: .88;
  transform-origin: left center;
}

/* Longer labels keep a single intentional word on the full-width stage. */
.hero-section[data-strand="creative"] .hero-strand-feature__word {
  font-size: clamp(3.5rem, 5.4vw, 5.5rem);
}

.hero-section[data-strand="responsible"] .hero-strand-feature__word {
  font-size: clamp(3rem, 4.6vw, 4.75rem);
  letter-spacing: -.095em;
}

.hero-strand-feature.is-flipping .hero-strand-feature__word { animation: aiad27StrandFlip .54s cubic-bezier(.2,.8,.2,1); }

.hero-strand-feature__summary { border-top: 1px solid currentColor; font-size: var(--hero-body); line-height: 1.25; margin: .85rem 0 0; padding: .8rem 0 .95rem; }

/* Match the CTA row width (42rem) so Safe…Future stretch to the same right
   edge as the second button, then space the five labels across that span. */
.hero-strand-feature__themes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .35rem .75rem;
  width: 100%;
  max-width: min(42rem, 100%);
  margin: 0 0 1.15rem;
}

.hero-strand-feature__theme {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  /* White, as asked. Note this fails WCAG AA on every strand ground at this
     size — see the commit message for the ratios; the labels are 12.8px bold,
     which needs 4.5:1. */
  color: #FFFFFF;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .35rem 0 .4rem;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  width: auto;
  flex: 0 0 auto;
}

.hero-strand-feature__theme.is-active { border-bottom: 2px solid currentColor; }

@keyframes aiad27StrandFlip {
  0% { opacity: 1; transform: rotateX(0deg) translateY(0); }
  48% { opacity: 0; transform: rotateX(-78deg) translateY(-.1em); }
  52% { opacity: 0; transform: rotateX(78deg) translateY(.1em); }
  100% { opacity: 1; transform: rotateX(0deg) translateY(0); }
}

/* Partner strip: its own cream band at the top of the page, above the hero.
   It used to sit inside the hero on the strand ground, which needed a cream
   plate behind every logo to be legible. On cream the plates are redundant, so
   they are gone — the request was to drop the shapes rather than keep fighting
   them. */
/* The strip sits at the top of the campaign section, so it needs no fixed
   header clearance of its own — the hero is first in main again and keeps it.
   Bled to the viewport edges: a logo row that runs off both sides reads as a
   continuous scroll, where a boxed one just looks cropped. */
.partner-strip {
  margin-inline: calc(50% - 50vw);
  /* The section padded above the strip while the strip padded only below, so
     the row read low in the band: 76px of space above the logos against 32px
     down to the rule. Cancelling the section's top padding and padding the
     strip evenly centres the logos between the top of the cream band and the
     rule beneath them. */
  margin-top: calc(-1 * var(--section-padding-y));
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--a27-rule);
}

.partner-strip .hero-partner-marquee {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 0;
}

/* A fixed box per logo, with no ground. Incoming artwork ranges from 300x80 to
   236x300, so without this the portrait logos rendered several times the height
   of the row: BCS came through 123px tall in a 50px strip and was cropped.
   max-width/max-height with contain letterboxes any ratio inside the box,
   rather than a percentage height that resolves against the wrong thing. */
.partner-strip .hero-partner-marquee__link {
  /* Shared as lengths, not percentages: a centred grid item does not resolve a
     percentage max-height against its grid area, so `max-height: 100%` was
     ignored and the aspect ratio won — BCS (236x300) rendered 132px tall in a
     40px row. Constraining the image to these same two lengths cannot fail. */
  --logo-w: clamp(6.5rem, 13vw, 9rem);
  --logo-h: clamp(2.5rem, 5vw, 3.25rem);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--logo-w);
  height: var(--logo-h);
  background: none;
  clip-path: none;
}

.partner-strip .hero-partner-marquee__img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--logo-w);
  max-height: var(--logo-h);
  object-fit: contain;
  /* Full colour: on cream every logo reads as its owner intended. */
  filter: none;
  opacity: 1;
}

.partner-strip .hero-partner-marquee__link:focus-visible {
  outline: 2px solid var(--a27-ink);
  outline-offset: 3px;
}

.section { background: var(--a27-cream); padding: var(--section-padding); }
.section--alt { background: var(--a27-card); }
.section-title { font-size: clamp(2.45rem, 5vw, 4.25rem); line-height: .98; letter-spacing: -.055em; max-width: 900px; }
.section-desc { color: var(--a27-dim); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.5; max-width: 690px; }

#campaign .campaign-content {
  position: relative;
  padding-left: 0;
}
#campaign .campaign-content::before {
  content: '“';
  position: absolute;
  top: -.28em;
  right: 100%;
  margin-right: clamp(0.15rem, 1.2vw, 0.65rem);
  color: var(--a27-safe-deep);
  font-size: clamp(5.5rem, 12vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
  user-select: none;
}
#campaign .section-label { color: var(--a27-safe-deep); }
#campaign .momentum-section { border-top: 1px solid var(--a27-rule); margin-top: 4rem; padding-top: 4rem; }
#campaign .partner-card {
  background: transparent;
  border: 1px solid var(--a27-rule);
  box-shadow: none;
}
#campaign .partner-card--ai-resources { background: var(--a27-card); }
#campaign .partner-card--dummy {
  background: var(--a27-cream);
  border-color: var(--a27-ink);
}
#campaign .partner-card--dummy:hover {
  background: var(--a27-ink);
  color: var(--a27-cream);
}

#schedule .section-label { color: var(--a27-smart-deep); }
#timeline .section-label { color: var(--a27-future-deep); }
#free-resources .section-label, #partner-resources .section-label { color: var(--a27-creative-deep); }
#ai-tools .section-label, #contact .section-label { color: var(--a27-responsible-deep); }

.aiad-schedule-row .schedule-card,
.timeline-card,
.resource-card,
.featured-resource-card { background: transparent; border-radius: 0; }

#principles { background: var(--a27-cream); }
#principles .section-label { color: var(--a27-creative-deep); }

.principles-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.8rem, 1.8vw, 1.5rem);
  margin-top: 3rem;
}

.principle-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0;
  overflow: visible;
}

.principle-card::before { display: none; }
.principle-card:hover { transform: none; box-shadow: none; }

.principle-card .principle-badge {
  width: 72px;
  max-width: 72px;
  min-height: 72px;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.principle-card .principle-badge__img {
  width: 72px;
  height: 72px;
  max-width: 72px;
  max-height: 72px;
  object-fit: contain;
}
.principle-card h3 { color: var(--principle-deep); font-size: 1.45rem; line-height: 1; letter-spacing: -.04em; }
.principle-card .section-desc { font-size: .95rem; line-height: 1.4; margin-top: .45rem; }
.principle-card--safe { --principle-deep: var(--a27-safe-deep); }
.principle-card--smart { --principle-deep: var(--a27-smart-deep); }
.principle-card--creative { --principle-deep: var(--a27-creative-deep); }
.principle-card--responsible { --principle-deep: var(--a27-responsible-deep); }
.principle-card--future { --principle-deep: var(--a27-future-deep); }
a.principle-card:hover h3,
a.principle-card:focus-visible h3 { color: var(--a27-ink); }

.section--green,
#aim {
  background: var(--a27-ink);
  color: var(--a27-cream);
}

.section--green :is(.section-title, .section-label, .aim-text),
#aim :is(.section-title, .section-label, .aim-text) { color: var(--a27-cream); }
.section--green .section-label, #aim .section-label { color: var(--a27-responsible); }
.section--green .aim-item, #aim .aim-item { border-color: #54504E; }
.section--green .aim-num, #aim .aim-num { color: var(--a27-responsible); }

.resource-card,
.featured-resource-card,
.partner-card,
.assets-pack__card,
.contact-wrapper { border-radius: 0; box-shadow: none; border-color: var(--a27-rule); }

.resource-card:hover,
.featured-resource-card:hover,
.partner-card:hover { transform: none; box-shadow: none; border-color: var(--a27-ink); }

.site-footer { background: var(--a27-ink); border: 0; color: var(--a27-cream); padding: 4rem 0 2rem; }
.site-footer :is(.footer-widget__title, .footer-links a, .footer-copy) { color: var(--a27-cream); }
/* Dim is a cream-ground value; on the ink footer it reads at 2:1, so the
   muted footer link takes the rule hairline value instead (8.5:1). */
.site-footer .footer-links__pending { color: var(--a27-rule); }
.site-footer :is(.footer-widgets, .footer-bottom) { border-color: var(--a27-dim); }
.site-footer .footer-social a { background: transparent; border: 1px solid var(--a27-dim); color: var(--a27-cream); }
.site-footer .footer-social a:hover { background: var(--a27-future); color: var(--a27-ink); border-color: var(--a27-future); }

/* Chamfer signature — official shapes from the brand kit */
.a27-chamfer-panel {
  -webkit-mask: url('../brand/aiad27/shape-chamfer-panel.svg') center / 100% 100% no-repeat;
  mask: url('../brand/aiad27/shape-chamfer-panel.svg') center / 100% 100% no-repeat;
}

.a27-chamfer-tile {
  -webkit-mask: url('../brand/aiad27/shape-chamfer-tile.svg') center / 100% 100% no-repeat;
  mask: url('../brand/aiad27/shape-chamfer-tile.svg') center / 100% 100% no-repeat;
}

@media (max-width: 1024px) {
  .hero-title-block { min-height: auto; gap: 1.2rem; }
  .hero-copy,
  .hero-strand-feature {
    position: static;
    top: auto;
    width: 100%;
    max-width: none;
  }
  .hero-strand-feature {
    justify-self: stretch;
    margin-top: .5rem;
    z-index: 0;
  }
  .hero-copy { z-index: 1; }
  .hero-strand-feature__stage {
    position: relative;
    overflow: visible;
  }
  .principles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .site-header, .header-inner { height: 68px; }
  .site-header .header-inner {
    width: min(1200px, calc(100% - 3rem));
    padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
  }
  .site-logo__img,
  .custom-logo {
    width: min(160px, 52vw);
    max-width: none;
  }
  .hero-section { padding-top: 68px; }
  .hero-title-block { min-height: auto; padding: 2.5rem 0; }

  /* The hero was being clipped on narrow screens, not scrolled. A grid item's
     automatic minimum is its content size, so `width: max-content` on
     .hero-brand inflated the 1fr track to 490px inside a 343px container and
     the section cropped the overflow. Let the track and the block shrink. */
  .hero-title-block { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { min-width: 0; }
  .hero-brand {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2.1rem, 10.5vw, 3.25rem);
    column-gap: clamp(.5rem, 2.5vw, 1rem);
  }
  /* Title and mark are both sized in em off .hero-brand so they scale as one.
     Overriding the title with its own vw clamp here broke that link, which is
     why the mark no longer fitted beside it. */
  .hero-title-block .hero-date {
    font-size: 1em;
    text-align: right;
  }
  .hero-title-block .hero-date__line,
  .hero-title-block .hero-date__line--loop {
    text-align: right;
  }
  /* The mark moves to the strand word here, so the hero title gets the full
     width instead of sharing it with a graphic that pushed it off-screen. */
  .hero-brand__mark { display: none; }
  .hero-brand { grid-template-columns: minmax(0, 1fr); }
  .hero-strand-feature__stage {
    display: flex;
    align-items: center;
    gap: .28em;
  }
  .hero-strand-feature__word { width: auto; }
  .hero-strand-feature__mark { display: block; }

  /* Five equal columns cannot hold "RESPONSIBLE" at this size, so the labels
     overran their cells and collided. Let them wrap and take their own width;
     the active underline then hugs the word rather than the column. */
  #hero .hero-cta { grid-template-columns: 1fr; }
  #hero .hero-cta__btn { width: 100%; }
  #hero .hero-cta__btn--secondary { border-left-width: 1px; border-top-width: 0; }
  .hero-strand-feature { margin-top: 0; width: 100%; }
  .hero-strand-feature__themes {
    justify-content: flex-start;
    gap: .25rem clamp(.5rem, 2vw, 1rem);
    margin-bottom: .9rem;
  }
  .hero-strand-feature__stage { min-height: 0; }
  /* Five stacked cards ran to ~890px on a phone. The grid's own aria-label
     already promises "swipe sideways to explore each card", so this restores
     that: one full-bleed snapping row instead of a column. */
  .principles-grid {
    display: flex;
    grid-template-columns: none;
    gap: .9rem;
    margin: 2rem 0 0;
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(50% - 50vw);
    padding: 0 max(1.5rem, calc(50vw - 50%)) .5rem;
    overscroll-behavior-x: contain;
  }
  .principles-grid::-webkit-scrollbar { display: none; }
  .principles-grid > .principle-card {
    flex: 0 0 clamp(9.25rem, 44vw, 12.5rem);
    max-width: none;
    padding: 0;
    scroll-snap-align: start;
  }
  .main-navigation { background: var(--a27-cream); border-color: var(--a27-rule); }
  #campaign .campaign-content { padding-left: 0; }
  #campaign .campaign-content::before {
    font-size: clamp(3.75rem, 18vw, 6rem);
    margin-right: 0.2rem;
  }
}

@media (max-width: 440px) {
  .principle-card .principle-badge,
  .principle-card .principle-badge__img {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
  }
}

/* The homepage AI Tools cards carried a category, a title, a use-case line, a
   three-item feature list and a link. The use-case line already says what the
   bullets repeat — "Lesson planning, differentiation, feedback" against
   "Lesson planning assistance / Differentiation strategies / Student feedback
   generation" — so on the homepage the list is duplicated detail. Hidden here
   only; the AI Tools archive keeps it, which is where the detail belongs. */
#ai-tools .tool-card__features,
#ai-tools .tool-card__features-more {
  display: none;
}

/* The timeline filter row already scrolled on mobile, but it was inset inside
   the container, so a button clipped flat against the gutter with nothing to
   suggest the row continued. Bleeding it to the viewport edges lets the next
   button peek past the gutter, which is the affordance, and snapping keeps the
   row tidy once dragged.

   The selectors are doubled deliberately. components/timeline.css and
   components/tools.css are enqueued conditionally in inc/setup.php and land
   AFTER this file, so this brand layer loses every equal-specificity contest
   against them. Doubling the class wins without depending on load order.
   Reordering the enqueue would be the real fix, but it would also let every
   other rule in this file start overriding those two stylesheets, so that is
   a deliberate change to make and test on its own. */
@media (max-width: 767px) {
  .timeline-filters.timeline-filters {
    margin-inline: calc(50% - 50vw);
    padding: .5rem max(1.5rem, calc(50vw - 50%));
    gap: .4rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .timeline-filters.timeline-filters .timeline-filter-btn { scroll-snap-align: start; }
}

/* Pills are the one soft-UI idiom still fighting the chamfer signature; the
   campaign squares its corners everywhere else. */
.timeline-filter-btn.timeline-filter-btn { border-radius: 0; }