/* ==========================================================================
   AdBrust Pain ("Sound familiar?")
   Ported from the Astro build (src/styles/global.css). Spec: docs/ADBRUST-BLUEPRINT.md + reference/design/pain-reference-exoape.png.
   OWNER DECISION: this section follows the Exo Ape style, not the CLAUDE.md
   heading style: Inter 400 everywhere, sentence case, no bold, no uppercase.
   Desktop: 12-column grid on the hero's own side padding (8.3vw / 4vw),
   so the label lines up with the hero text. Cards are staggered with
   margin-top, never absolute positioning.
   ========================================================================== */
.adbrust-section.adbrust-pain {
  --adbrust-pain-pad-l: var(--adbrust-pad-left);
  --adbrust-pain-pad-r: var(--adbrust-pad-right);
  --adbrust-pain-num-w: 32px;                  /* space for the card number left of the title */
  --adbrust-pain-stagger: 0px;                 /* how much lower every second card sits */

  position: relative;
  background: var(--adbrust-ink);
  color: var(--adbrust-surface);
  font-family: var(--adbrust-font-body);
  font-weight: 400;
  padding-block: var(--adbrust-section-gap);
  overflow: hidden;                    /* clips the marquee: no horizontal page scroll */
}

/* Headings in this section: Inter 400, sentence case (overrides the global heading style) */
.adbrust-section.adbrust-pain h2, .adbrust-section.adbrust-pain h3 { font-family: var(--adbrust-font-body); font-weight: 400; text-transform: none; color: var(--adbrust-white); }

.adbrust-pain .adbrust-pain__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: var(--adbrust-pain-pad-l) var(--adbrust-pain-pad-r);
}

/* ---- Intro: label + statement (1.0.1: paragraph and turn line removed) ---- */
.adbrust-pain .adbrust-pain__label { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--adbrust-white); }
.adbrust-pain .adbrust-pain__title {
  margin-top: clamp(24px, 2.8vw, 40px);
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
/* ---- Cards ---- */
.adbrust-pain .adbrust-pain__cards { margin-top: clamp(56px, 7.6vw, 110px); row-gap: 48px; align-items: start; }
.adbrust-pain .adbrust-pain__cards--b { margin-top: clamp(56px, 6.9vw, 100px); }

.adbrust-pain .adbrust-pain-card {
  display: grid;
  grid-template-columns: var(--adbrust-pain-num-w) minmax(0, 1fr);
  align-items: last baseline;          /* number sits beside the LAST line of the title */
  align-content: start;
  row-gap: 20px;
}
.adbrust-pain .adbrust-pain-card__num { grid-column: 1; grid-row: 1; font-size: 12px; line-height: 1; color: var(--adbrust-slate); }
.adbrust-pain .adbrust-pain-card__title {
  grid-column: 2; grid-row: 1;
  font-size: clamp(22px, 6vw, 28px);    /* 1.0.2: smaller than the H2 */
  line-height: 1.2;
  letter-spacing: -0.03em;
  max-width: 16ch;                     /* 35–42 character titles break into ~3 lines, like the reference */
}
.adbrust-pain .adbrust-pain-card__text {
  grid-column: 2; grid-row: 2;
  font-size: 15px;
  line-height: 1.6;
  max-width: 22rem;
  color: var(--adbrust-surface);
}

/* Mobile: one column, cards separated by 1px Slate lines */
.adbrust-pain .adbrust-pain__cards .adbrust-pain-card { padding-top: 48px; border-top: var(--adbrust-border); }

/* ---- Giant marquee (full bleed) ---- */
.adbrust-pain .adbrust-pain__marquee {
  margin-top: clamp(56px, 6.9vw, 100px);
  overflow: hidden;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--adbrust-surface);
  opacity: .12;                        /* OWNER DECISION: quiet background element */
  white-space: nowrap;
  user-select: none;
}
.adbrust-pain .adbrust-pain__marquee-item { display: inline-flex; align-items: center; flex: none; }
.adbrust-pain .adbrust-pain__marquee-item > span { padding-right: .6em; }    /* generous space between repeats */

/* Marquee movement (repeat, loop, pause on hover, reduced motion) comes from AdBrust Motion */

/* ---- Desktop (768px and up): 12 columns, staggered cards ---- */
@media (min-width: 768px) {
  .adbrust-section.adbrust-pain {
    --adbrust-pain-num-w: clamp(28px, 3.1vw, 45px);
    --adbrust-pain-stagger: clamp(56px, 6.9vw, 100px);
  }
  .adbrust-pain .adbrust-pain__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .adbrust-pain .adbrust-pain__head { grid-column: 1 / span 6; }

  .adbrust-pain .adbrust-pain__cards { row-gap: clamp(64px, 8.3vw, 120px); }
  .adbrust-pain .adbrust-pain__cards .adbrust-pain-card {
    padding-top: 0; border-top: 0;
    margin-left: calc(-1 * var(--adbrust-pain-num-w));   /* number hangs left, title starts on the column line */
  }
  .adbrust-pain .adbrust-pain-card__title { font-size: clamp(24px, 2.3vw, 34px); }   /* 1.0.2: clearly smaller than the H2 (max 52px) */

  /* Group A: titles start at column 3 (~22%) and column 8 (~58%) */
  .adbrust-pain .adbrust-pain__cards--a .adbrust-pain-card:nth-child(odd)  { grid-column: 3 / span 4; }
  .adbrust-pain .adbrust-pain__cards--a .adbrust-pain-card:nth-child(even) { grid-column: 8 / span 4; }
  /* Group B: titles start at column 2 (~15%) and column 7 (~51%) */
  .adbrust-pain .adbrust-pain__cards--b .adbrust-pain-card:nth-child(odd)  { grid-column: 2 / span 4; }
  .adbrust-pain .adbrust-pain__cards--b .adbrust-pain-card:nth-child(even) { grid-column: 7 / span 4; }
  /* every second card sits lower */
  .adbrust-pain .adbrust-pain__cards .adbrust-pain-card:nth-child(even) { margin-top: var(--adbrust-pain-stagger); }

  .adbrust-pain .adbrust-pain__marquee { font-size: clamp(80px, 17vw, 260px); }

}

/* Tablet: give the cards a bit more width */
@media (min-width: 768px) and (max-width: 1023px) {
  .adbrust-pain .adbrust-pain__cards--a .adbrust-pain-card:nth-child(odd),
  .adbrust-pain .adbrust-pain__cards--b .adbrust-pain-card:nth-child(odd)  { grid-column: 2 / span 5; }
  .adbrust-pain .adbrust-pain__cards--a .adbrust-pain-card:nth-child(even),
  .adbrust-pain .adbrust-pain__cards--b .adbrust-pain-card:nth-child(even) { grid-column: 8 / span 5; }
}

/* Heading/text sizes are fixed per element; reset anything a theme adds */
.adbrust-section.adbrust-pain h2, .adbrust-section.adbrust-pain h3 { font-style: normal; }
.adbrust-section.adbrust-pain p { font-family: var(--adbrust-font-body); font-weight: 400; }
.adbrust-section.adbrust-pain p.adbrust-pain__label { font-weight: 500; }