/* 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; }
#sofia-rail-section .sofia-all { white-space: nowrap; font: 700 14px/1 inherit;
  color: #1E6FA8; text-decoration: none; border-bottom: 2px solid rgba(30,111,168,.3);
  padding-bottom: 3px; }
#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; }
  #sofia-rail-section .sofia-sub { max-width: none; white-space: nowrap; }
  .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; } }