/* S368 Sofia video carousel - GAUSA home page */
#homepage #secondary-content #sofia-rail-section.row,
#sofia-rail-section { padding: 22px 0 0; background: #F4F6F8; }
#sofia-rail-section .sofia-head { max-width: 1180px; margin: 0 auto 20px; padding: 0 18px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
#sofia-rail-section .sofia-eyebrow { font: 700 11px/1 inherit; letter-spacing: .14em;
  text-transform: uppercase; color: #1E6FA8; margin: 0 0 8px; }
#sofia-rail-section h2 { font-size: 26px; line-height: 1.15; margin: 0; font-weight: 700;
  letter-spacing: -.02em; color: #333; }
#sofia-rail-section .sofia-sub { margin: 8px 0 0; font-size: 15px; line-height: 1.5;
  color: #666; max-width: 52ch; }
#sofia-rail-section .sofia-head > div:first-child { min-width: 0; }
/* S374: .sofia-all is now an INLINE <a> at the end of .sofia-sub, not its own <p>.
   The shorthand "font: 700 14px/1 inherit" is dropped so the link takes the paragraph's
   size and line-height and sits on the text baseline; a 1.0 line-height inline in a 1.5
   paragraph is what made it look detached. nowrap keeps the phrase from breaking mid-link.
   No font-weight and no underline: inline in a sentence the bold read as a second heading,
   and the border-bottom that was its underline is gone too. Colour alone distinguishes it.
   The border-bottom is removed rather than left at a transparent colour so nothing
   reserves vertical space, and text-decoration: none is kept because the site stylesheet
   underlines anchors by default - dropping the declaration would put the underline back
   by inheritance rather than removing it. */
#sofia-rail-section .sofia-all { white-space: nowrap; margin-left: 6px;
  color: #1E6FA8; text-decoration: none; border-bottom: 0; padding-bottom: 0; }
#sofia-rail-section .sofia-all:hover { color: #48A3DA; text-decoration: none; }
#sofia-rail-section .sofia-arrows { display: none; gap: 8px; }
#sofia-rail-section .sofia-arrows button { width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #E2E9EF; background: #fff; cursor: pointer; font-size: 16px; color: #333;
  line-height: 1; padding: 0; }
#sofia-rail-section .sofia-arrows button:hover { border-color: #48A3DA; color: #1E6FA8; }
#sofia-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 18px 22px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#sofia-rail::-webkit-scrollbar { display: none; }
.sofia-card { position: relative; flex: 0 0 auto; scroll-snap-align: start; border: 0;
  padding: 0; margin: 0; width: 63vw; max-width: 250px; aspect-ratio: 9 / 16;
  border-radius: 14px; overflow: hidden; background: #0E1B24; cursor: pointer;
  text-align: left; box-shadow: 0 6px 24px rgba(14,27,36,.10); transition: transform .25s ease;
  display: block;
  /* S371: the card is an <a> now, not a <button>, so the UA link defaults have to be
     neutralised. Every text colour inside the card is set explicitly (.sofia-aud, h3, p,
     .sofia-dur), so only the underline and the visited colour needed suppressing. */
  text-decoration: none; color: inherit; }
.sofia-card:hover, .sofia-card:visited, .sofia-card:focus { text-decoration: none; color: inherit; }
/* S371 - PRE-EXISTING, not caused by the <button>-to-<a> change. The audience filter in
   sofia-rail.js hides cards with setAttribute('hidden','hidden'), which relies on the UA
   rule [hidden]{display:none}. The author rule .sofia-card{display:block} above outranks
   the UA sheet, so the attribute has no effect and the Families / Au Pair filter shows
   every card in all three modes. This restores the intent. Found by reading the CSS
   cascade against the JS - NOT confirmed in a browser, see the QA note in the handoff. */
.sofia-card[hidden] { display: none; }
.sofia-card:focus-visible { outline: 3px solid #F2762E; outline-offset: 3px; }
.sofia-card img.sofia-thumb { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.sofia-card .sofia-scrim { position: absolute; inset: 0; background: linear-gradient(to top,
  rgba(6,16,23,.97) 0%, rgba(6,16,23,.95) 18%, rgba(6,16,23,.86) 30%,
  rgba(6,16,23,.45) 42%, rgba(6,16,23,0) 56%); }
.sofia-card .sofia-body { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 14px 16px; color: #fff; }
.sofia-card .sofia-aud { display: block; font: 700 10px/1 inherit; letter-spacing: .12em;
  text-transform: uppercase; color: #CDE8F8; margin: 0 0 7px; }
.sofia-card h3 { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #CDE8F8;
  text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.sofia-card p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: #DCE7EE;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sofia-card .sofia-play { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(255,255,255,.92); display: block; }
.sofia-card .sofia-play::after { content: ""; position: absolute; top: 11px; left: 13px;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #1E6FA8; }
.sofia-card .sofia-dur { position: absolute; top: 14px; left: 12px; font: 700 11px/1 inherit;
  color: #fff; background: rgba(6,16,23,.55); padding: 5px 8px; border-radius: 6px; }
#sofia-modal { position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; background: rgba(6,16,23,.88); padding: 16px; }
#sofia-modal.on { display: flex; }
#sofia-modal .sofia-box { width: min(420px, 41vh); max-width: 100%; background: #000; border-radius: 16px;
  overflow: hidden; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
#sofia-modal video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  max-height: 74vh; background: #000; object-fit: cover; }
#sofia-modal .sofia-meta { background: #fff; padding: 14px 16px 16px; }
#sofia-modal .sofia-meta h3 { margin: 0; font-size: 17px; line-height: 1.25; color: #333; }
#sofia-modal .sofia-meta p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: #666; }
#sofia-modal .sofia-meta a { display: inline-block; margin-top: 10px; font-weight: 400;
  color: #1E6FA8; font-size: 14px; }
#sofia-modal .sofia-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 19px;
  line-height: 1; cursor: pointer; z-index: 2; }
@media (hover: hover) {
  .sofia-card:hover { transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(14,27,36,.28); }
}
@media screen and (min-width: 900px) {
  #sofia-rail-section .sofia-arrows { display: flex; }
  #sofia-rail-section h2 { font-size: 32px; }
  #sofia-rail { max-width: 1180px; margin: 0 auto; gap: 18px; }
  /* S374: white-space:nowrap removed. The subtitle now carries the "See all au pair
     videos" link inline, and an unbreakable combined string overflows the column between
     roughly 900px and 1100px. It still renders on one line at desktop widths; it can now
     wrap instead of overflowing when it cannot. */
  #sofia-rail-section .sofia-sub { max-width: none; }
  .sofia-card { width: 222px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .sofia-card { transition: none; } }

/* S368 audience filter - .bnSeg toggle ported from the LCC Onboarding matrix */
.sofia-filter { display: flex; align-items: center; gap: 10px; }
.sofia-filter .sofia-filter-label { font-size: 12px; color: #7B8A95; white-space: nowrap; }
.bnSeg { display: inline-flex; align-items: center; background: #eceef1;
  border: 1px solid #dfe3e8; border-radius: 8px; padding: 2px; gap: 2px; vertical-align: middle; }
.bnSeg button { border: none; background: transparent; padding: 4px 12px; border-radius: 6px;
  font-size: 12px; line-height: 15px; color: #5a6066; cursor: pointer; font-weight: 500; }
.bnSeg button.on { background: #fff; color: #1a1a1a; box-shadow: 0 1px 2px rgba(0,0,0,.14);
  font-weight: 600; }
.sofia-card[hidden] { display: none; }
#sofia-rail-section .sofia-controls { display: flex; align-items: center; gap: 14px;
  max-width: 1180px; margin: 0 auto 12px; padding: 0 18px; }
#sofia-rail-section .sofia-controls .sofia-arrows { margin-left: auto; }

/* S368 the Content-Syndication band sits under the video rail on the home page and on the
   video hub, so it needs a deeper tone than the near-white it uses on landing pages -
   otherwise it merges with the #F4F6F8 carousel above it. */
#homepage .gapcs-band, body#videoWatch .gapcs-band {
  /* S368: the band is a plain div inside .container-fluid, which pads 15px each side.
     Bootstrap .row siblings cancel that with margin:0 -15px - matching it here makes the
     band run edge to edge like every other panel instead of floating 15px inside. */
  margin-left: -15px;
  margin-right: -15px;
  background: rgb(226,233,238);
  border-top: 1px solid rgb(209,219,227);
  border-bottom: 1px solid rgb(209,219,227); }
#homepage .gapcs-band .gapcs-card, body#videoWatch .gapcs-band .gapcs-card {
  border-color: rgb(214,223,231); }
/* S368: .gapcs-next sits at right:-6px, which is fine when the band is inside a
   narrower container but pushes 6px past the viewport once the band runs full bleed.
   Measured at 820px: scrollWidth 826 with the band, 820 without. Pull both arrows
   inside the edge on the pages where the band is full width. */
#homepage .gapcs-band .gapcs-prev, body#videoWatch .gapcs-band .gapcs-prev { left: 6px; }
#homepage .gapcs-band .gapcs-next, body#videoWatch .gapcs-band .gapcs-next { right: 6px; }

/* S368 nav arrows on the rail edges, matching .gapcs-nav on the Au Pairs Available Now band */
.sofia-railwrap { position: relative; max-width: 1180px; margin: 0 auto; }
.sofia-nav { position: absolute; top: 38%; width: 40px; height: 40px; border-radius: 50%;
  background: rgb(255,255,255); border: 1px solid rgb(220,225,230);
  box-shadow: 0 2px 8px rgba(0,0,0,0.14); cursor: pointer; display: none;
  align-items: center; justify-content: center; font-size: 18px; color: rgb(60,70,80); z-index: 2; }
.sofia-nav-prev { left: 6px; }
.sofia-nav-next { right: 6px; }
.sofia-nav:hover { border-color: #48A3DA; color: #1E6FA8; }
#sofia-rail-section .sofia-head .sofia-filter { align-self: center; }
@media screen and (min-width: 900px) { .sofia-nav { display: flex; } }


/* ===================================================================
   S377: MOBILE HEAD LAYOUT for the home-page video rail.

   Measured before this block: .sofia-head is display:flex with
   justify-content:space-between at EVERY width, and the only breakpoint in
   this file is min-width:900px. So on a 390px viewport the copy column and
   the audience filter sat side by side, squeezing the heading to roughly two
   words per line ("AU PAIR / QUESTIONS, / ANSWERED / IN / UNDER / A / MINUTE")
   while the toggle floated alongside it.

   Below 900px the head now stacks: the copy column takes the full width and
   wraps naturally, and the filter drops BELOW the subtitle - which puts it
   under the "See all au pair videos" link, where it reads as a control for
   the rail rather than as a second heading.

   text-wrap:pretty is applied unconditionally (desktop too) so the heading
   never leaves a single orphan word on its last line. It degrades to normal
   wrapping in browsers that do not support it - no layout depends on it.
   =================================================================== */
#sofia-rail-section h2,
#sofia-rail-section .sofia-sub { text-wrap: pretty; overflow-wrap: break-word; }

@media screen and (max-width: 899px) {
  #sofia-rail-section .sofia-head { flex-direction: column; align-items: stretch;
    gap: 14px; padding: 0 16px; }
  #sofia-rail-section .sofia-head > div:first-child { width: 100%; max-width: none; }
  #sofia-rail-section .sofia-sub { max-width: none; }
  #sofia-rail-section h2 { font-size: 24px; }
  /* align-self:center is set for the desktop row layout above; in a column it would
     centre the toggle under left-aligned copy. */
  #sofia-rail-section .sofia-head .sofia-filter { align-self: flex-start;
    flex-wrap: wrap; row-gap: 8px; }
}

/* The link is the last phrase of the subtitle. nowrap keeps it whole, but at 320-360px
   the sentence before it can leave too little room on the line, so allow the link to
   start on its own line rather than overflow the column. */
@media screen and (max-width: 420px) {
  #sofia-rail-section .sofia-all { display: inline-block; margin-left: 0; }
}