/* ==========================================================================
   SHOUTOUT PAGES — SECTION DESIGN
   Split out of shoutout-landing.css when it passed the 1,500-line limit.
   Loaded by /buy-youtube-shoutouts and /free-youtube-shoutouts. Holds the
   section surface system and the two sections built on top of it.
   ========================================================================== */

/* ==========================================================================
   SECTION SURFACES

   Was: two hard-coded lists of section names, which only covered the free
   page. Every section added to the buy page since then rendered transparent,
   so eight sections ran together as one undivided wall of text. It also only
   ever alternated white against #f8fafc, a two percent difference that reads
   as no separation at all.

   Now each section declares its own surface in the markup, so the rhythm is
   visible where a designer actually edits, and a new section can never fall
   through the gap. Three surfaces, used with intent:

     plain  white, the default reading surface
     muted  a real step down in tone, with a hairline to define the edge
     tint   a brand wash, reserved for the ONE commercial moment on a page
            (the order form on the buy page, the upgrade block on the free
            page). If everything is tinted, nothing is.

   The hero and the closing call to action stay on the dark night surface.
   ========================================================================== */
body.sol-page .sol-surface--plain { background-color: #fff; }

body.sol-page .sol-surface--muted {
  background-color: var(--color-gray-100);
  box-shadow: inset 0 1px 0 var(--color-gray-200), inset 0 -1px 0 var(--color-gray-200);
}

body.sol-page .sol-surface--tint {
  background-color: rgba(var(--color-primary-rgb), 0.045);
  box-shadow: inset 0 1px 0 rgba(var(--color-primary-rgb), 0.14),
              inset 0 -1px 0 rgba(var(--color-primary-rgb), 0.14);
}

/* Upsell visual: the three shoutout types named, replacing the megaphone
   squircle that survived the first rebuild. */
body.sol-page .sol-upsell-viz {
  display: flex;
  flex-direction: column;
  gap: 9px;
  /* .paid-upsell__visual is a fixed 100x100 tinted box on mobile (160px on
     desktop) because it was built to hold a single icon. These pills are
     bigger than that, so the inherited box has to go entirely or they spill
     out of it on all four sides. */
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 0; /* kills the inherited icon sizing */
}
body.sol-page .sol-upsell-viz__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
}
body.sol-page .sol-upsell-viz__row i { color: var(--color-primary); font-size: var(--font-size-sm); }

/* Steps: give the title two lines' worth of room so all four body
   paragraphs start at the same height. text-wrap:balance was breaking
   two of the four onto a second line and staggering the row. */
.sol-steps__title { min-height: 2.6em; }
@media (max-width: 991px) { .sol-steps__title { min-height: 0; } }

/* ══════════════════════════════════════════════════════════════════
   9. STICKY CTA — see public/css/components/sticky-cta.css

   The look moved into that shared component so the subscribers, views,
   comments, likes and watch-hours pages get the same bar. Only this page
   family's footer clearance stays here, below.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   10. MOBILE TIGHTENING — 60% of traffic lands here
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* The breadcrumb is floated into the hero's top padding, so that padding
     has to clear it. At space-10 the crumb overlapped the eyebrow by 2px. */
  .sol-hero { padding: var(--space-16) 0 var(--space-12); }
  .sol-hero__sub { font-size: var(--font-size-base); }
  .sol-hero__hint { gap: var(--space-3); font-size: var(--font-size-xs); }
  .sol-console { padding: 0 var(--space-4) var(--space-4); }
  .solc__chrome { margin: 0 calc(-1 * var(--space-4)); padding: 10px var(--space-4); }
  .sol-cards__card { padding: var(--space-5); }
  .sol-steps__item { padding: var(--space-5); }
  /* Keep the last section clear of the sticky bar */
  .final-cta { padding-bottom: calc(var(--space-16) + 64px); }
}