/* ============================================================
   ScoreChom — Advertisers page styles
   ------------------------------------------------------------
   Photo-led hero, phone-mockup ad placements, school-logo trust
   strip. Depends on vars.css + base.css.
   ============================================================ */

/* ---- HERO ---- */
.adv-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 6vw, 96px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
}
/* ----- HERO BACKGROUND -----
   The hero uses a pure dark gradient — no photo — because the PDF-rendered
   images in our library carry their own text/layout that would bleed through.
   Atmosphere comes from coloured radial gradients (orange + green wash). */
.adv-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 80% 15%, rgba(255, 85, 51, 0.28), transparent 60%),
    radial-gradient(50% 40% at 12% 90%, rgba(25, 184, 106, 0.22), transparent 60%),
    linear-gradient(180deg, #050912 0%, #070b18 60%, #0a1228 100%);
}
.adv-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* subtle grid texture for visual interest without competing content */
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(70% 80% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
}
.adv-hero__inner {
  position: relative;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  color: #fff;
}
.adv-hero__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.adv-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: #fff;
  align-self: flex-start;
}
.adv-hero__eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
}
.adv-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.94;
  letter-spacing: 0.005em;
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.adv-hero__title span { display: block; }
.adv-hero__title .accent { color: var(--brand); }
.adv-hero__title .italic { font-style: italic; font-weight: 800; color: var(--brand-yellow); }
.adv-hero__sub {
  font-family: var(--font-script);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--brand-yellow);
  margin: 0;
}
.adv-hero__lede {
  font-size: clamp(15px, 1.2vw, 17px);
  color: rgba(255, 255, 255, 0.86);
  max-width: 540px;
  margin: 0;
  line-height: 1.6;
}
.adv-hero__cta-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

/* Phone mock in the hero with a highlighted ad slot overlay */
.adv-hero__phone {
  position: relative;
  justify-self: end;
  max-width: 360px;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: #05080F;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.06),
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(255, 85, 51, 0.18);
  transform: rotate(-2deg);
}
.adv-hero__phone img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.adv-hero__phone-highlight {
  position: absolute;
  left: 6%; right: 6%;
  bottom: 14%;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-deep));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(255, 122, 85, 0.5), 0 8px 20px rgba(255, 85, 51, 0.45);
  animation: adv-pulse 2s var(--ease) infinite;
}
@keyframes adv-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* ---- WHY ADVERTISE — 4 proof cards ---- */
.adv-proof {
  background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
  padding: clamp(48px, 7vw, 96px) 0;
}
.adv-proof__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: 0 var(--space-5);
}
.adv-proof__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-7);
  color: #fff;
}
.adv-proof__head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  margin: var(--space-3) 0;
  color: #fff;
}
.adv-proof__head h2 .accent { color: var(--brand-orange); }
.adv-proof__head p { color: rgba(255,255,255,0.78); font-size: var(--fs-md); margin: 0; line-height: 1.6; }
.adv-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.adv-proof-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: #fff;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.adv-proof-card:hover { transform: translateY(-4px); border-color: var(--brand); }
.adv-proof-card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--brand-orange);
  font-size: 22px;
  margin-bottom: var(--space-4);
}
.adv-proof-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  margin: 0 0 6px;
  color: var(--brand-yellow);
}
.adv-proof-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* ---- WHERE YOUR AD SHOWS — phone mockups ---- */
.adv-placements {
  background: var(--brand-navy);
  padding: clamp(48px, 7vw, 96px) 0;
}
.adv-placements__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: 0 var(--space-5);
}
.adv-placements__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-7);
  color: #fff;
}
.adv-placements__head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  margin: var(--space-3) 0;
  color: #fff;
}
.adv-placements__head h2 .accent { color: var(--brand-orange); }
.adv-placements__head p { color: rgba(255,255,255,0.78); font-size: var(--fs-md); margin: 0; line-height: 1.6; }
.adv-placements__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.adv-slot {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.adv-slot:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.adv-slot__mock {
  position: relative;
  aspect-ratio: 9/16;
  background: #050912;
  overflow: hidden;
}
.adv-slot__mock img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.adv-slot__ad {
  position: absolute;
  left: 10%; right: 10%;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-deep));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(255, 122, 85, 0.45), 0 6px 16px rgba(255, 85, 51, 0.4);
}
/* Variant placements */
.adv-slot[data-type="hero"] .adv-slot__ad   { top: 6%;  height: 18%; font-size: 14px; }
.adv-slot[data-type="banner"] .adv-slot__ad { bottom: 8%; height: 7%; }
.adv-slot[data-type="mrec"] .adv-slot__ad   { top: 40%; height: 22%; }
.adv-slot[data-type="event"] .adv-slot__ad  { top: 30%; height: 36%; left: 6%; right: 6%; font-size: 14px; }

.adv-slot__caption {
  padding: var(--space-4) var(--space-5);
  color: #fff;
}
.adv-slot__caption h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  margin: 0 0 4px;
  color: #fff;
}
.adv-slot__caption .sc-eyebrow { font-size: 10px; margin-bottom: 6px; }
.adv-slot__caption p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* ---- TARGETING + PROMISE (two-column with brush callout) ---- */
.adv-context {
  background: linear-gradient(180deg, var(--brand-navy) 0%, #0c1325 100%);
  padding: clamp(48px, 7vw, 96px) 0;
}
.adv-context__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.adv-context__col h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1;
  margin: var(--space-3) 0 var(--space-3);
  color: #fff;
}
.adv-context__col h2 .accent { color: var(--brand-orange); }
.adv-context__col p { color: rgba(255,255,255,0.78); font-size: var(--fs-md); line-height: 1.6; margin: 0 0 var(--space-4); }
.adv-context__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.adv-context__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.adv-context__list li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

/* The "brush callout" — orange handwritten card from the PDF */
.adv-callout {
  position: relative;
  background: var(--brand-orange);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  font-family: var(--font-script);
  font-size: clamp(20px, 1.8vw, 26px);
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 24px 60px rgba(255, 85, 51, 0.32);
  transform: rotate(-1.2deg);
}
.adv-callout::after {
  content: "";
  position: absolute;
  inset: -8px;
  background:
    radial-gradient(ellipse at 10% 10%, rgba(255, 122, 85, 0.45), transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(217, 65, 29, 0.5),  transparent 50%);
  border-radius: var(--radius-xl);
  z-index: -1;
  filter: blur(20px);
}
.adv-callout strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--space-2);
}

/* ---- TRUST STRIP — school logos ---- */
.adv-trust {
  background: var(--brand-navy);
  padding: clamp(40px, 6vw, 72px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.adv-trust__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: 0 var(--space-5);
  text-align: center;
}
.adv-trust__label {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-5);
}
.adv-trust__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 48px);
}
.adv-trust__logos img {
  height: 48px;
  width: auto;
  opacity: 0.7;
  filter: grayscale(1) brightness(1.4);
  transition: opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
}
.adv-trust__logos img:hover {
  opacity: 1;
  filter: none;
}

/* ---- FINAL CTA ---- */
.adv-final-cta {
  position: relative;
  padding: clamp(60px, 8vw, 120px) 0;
  background:
    linear-gradient(135deg, rgba(7,11,24,0.86), rgba(7,11,24,0.92)),
    url("../../images/marketing/site/hero-rugby.png");
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}
.adv-final-cta__inner {
  max-width: var(--container-md);
  margin-inline: auto;
  padding: 0 var(--space-5);
}
.adv-final-cta h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1;
  margin: 0 0 var(--space-4);
  color: #fff;
}
.adv-final-cta h2 em { font-style: normal; color: var(--brand-yellow); font-family: var(--font-script); }
.adv-final-cta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-md);
  max-width: 580px;
  margin: 0 auto var(--space-5);
  line-height: 1.6;
}
.adv-final-cta__cta {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1060px) {
  .adv-proof__grid { grid-template-columns: repeat(2, 1fr); }
  .adv-placements__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .adv-hero__inner { grid-template-columns: 1fr; }
  .adv-hero__phone { justify-self: center; max-width: 260px; transform: none; }
  .adv-context__inner { grid-template-columns: 1fr; }
  .adv-context__list { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .adv-proof__grid { grid-template-columns: 1fr; }
  .adv-placements__grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
}