/* Creative content: a long-sentence title, a to-scale wall of ad specs, and a note */

.creative-title {
  max-width: 24em;
  font-size: clamp(26px, 2.9vw, 46px);
  line-height: 1.1;
}
.creative-lead {
  max-width: 40em;
  margin: 0;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
}

/* The spec wall */

.specs-intro { max-width: 52em; margin-bottom: clamp(24px, 4vh, 44px); }
.specs-intro .story-title { max-width: 20em; font-size: clamp(26px, 2.9vw, 46px); line-height: 1.1; }
.specs-lead {
  max-width: 44em;
  margin: 0;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.5;
}

.platforms { display: grid; gap: clamp(14px, 2vh, 22px); }
.platform {
  display: grid;
  grid-template-columns: clamp(170px, 16vw, 240px) 1fr;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(20px, 2.4vw, 34px);
  border: 1px solid rgba(16, 40, 76, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .5);
}
.platform-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.platform-head p { margin: 0; font-size: 14px; line-height: 1.4; opacity: .75; }
/* The platform's own mark, in the site's navy */
.platform-logo { flex: none; width: 1.05em; height: 1.05em; fill: var(--navy); }

.specs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 22px 18px; /* the 18px matches GAP in creative.js */
}
.spec { margin: 0; width: var(--w); }
.spec figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.3;
}
.spec figcaption b { display: block; font-size: 13px; }

/* Each tile is the asset's real shape (size set by creative.js), in one of the brand colours */
.spec-shape {
  position: relative;
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.spec:hover .spec-shape { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 14px 30px rgba(16, 40, 76, .22); }
.c-navy { --bg: var(--navy); --fg: var(--white); }
.c-sky { --bg: #cddcf0; --fg: var(--navy); }
.c-sun { --bg: var(--sun); --fg: var(--navy); }
.c-white { --bg: var(--white); --fg: var(--navy); }
.c-white .spec-shape { box-shadow: inset 0 0 0 1px rgba(16, 40, 76, .18); }

/* Image: a sun over a hill */
.g-sun { position: absolute; top: 18%; right: 20%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--fg); opacity: .85; }
.g-hill { position: absolute; left: -20%; right: -20%; bottom: -55%; height: 90%; border-radius: 50%; background: var(--fg); opacity: .3; }

/* Video: a play button and a progress bar */
.g-play {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  border-left: 14px solid var(--fg);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translate(-35%, -50%);
}
.g-bar { position: absolute; left: 10%; right: 10%; bottom: 10%; height: 3px; border-radius: 3px; background: var(--fg); opacity: .3; }
.g-bar::after { content: ""; position: absolute; inset: 0 60% 0 0; border-radius: 3px; background: var(--fg); }

/* Logo: the carpet rider */
.g-logo { position: absolute; inset: 0; margin: auto; height: 46%; width: auto; }
.c-navy .g-logo { filter: brightness(0) invert(1); }

/* Branded effect: a sticker */
.g-star { position: absolute; inset: 22%; fill: var(--navy); }

/* Carousel: cards in a row, the first one forward */
.spec-carousel { display: flex; align-items: center; gap: 6%; padding: 0 8%; }
.g-card { flex: none; width: 34%; aspect-ratio: 1; border-radius: 4px; background: var(--fg); opacity: .3; }
.g-card:first-child { opacity: .9; }

/* Collection: a hero above a 2 × 2 grid */
.spec-collection { display: grid; grid-template-rows: 1.3fr 1fr; gap: 6%; padding: 9%; }
.g-hero { border-radius: 3px; background: var(--fg); opacity: .85; }
.g-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; }
.g-grid i { border-radius: 2px; background: var(--fg); opacity: .35; }

/* Advantage+: a fanned stack of creatives */
.g-sheet { position: absolute; inset: 22%; border-radius: 4px; background: var(--navy); }
.g-sheet:nth-child(1) { transform: rotate(-12deg) translate(-8%, 4%); opacity: .25; }
.g-sheet:nth-child(2) { transform: rotate(6deg) translate(6%, 2%); opacity: .5; }
.g-sheet:nth-child(3) { opacity: .9; }

/* Tiles drop into place one after another as each platform comes into view */
.js .spec { opacity: 0; transform: translateY(24px) scale(.85); transition: opacity .5s ease, transform .7s var(--ease); }
.js .is-in .spec { opacity: 1; transform: none; transition-delay: calc(.15s + var(--n) * .06s); }

/* The note */
.creative-note {
  max-width: 46em;
  margin: 0;
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid rgba(16, 40, 76, .2);
  border-left: 5px solid var(--navy);
  border-radius: 14px;
  background: var(--white);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .platform { grid-template-columns: 1fr; }
  .specs { gap: 18px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .spec { opacity: 1; transform: none; transition: none; }
  .spec-shape { transition: none; }
}