@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   Programme (Event Itinerary) — real screen styles.
   Originally a Phase-1 clone of the design template's Programme page
   (`<main class="poster">` block), used as a hash-toggled (#programme-v2)
   debug preview rendering hardcoded placeholder data. Approved in design
   review and promoted to the live renderer: buildItinerary()/pv2ShowDay()
   in app.js now build this exact markup from real cms_itinerary data and
   inject it into #detailContent inside the app's normal #screen-detail
   navigation shell. Every selector below stays scoped under
   .programme-v2-scope so nothing here can leak onto, or be overridden by,
   the site's other screens/styles.
   Source: New Website Design Templet/styles.css (+ sections.css,
   sections-fix.css, info-sections.css, auth.css — none of those four
   contain rules touching .poster/.hero/.schedule/etc.; the only hit
   was auth.css's generic `.poster[hidden]{display:none}`, which is
   redundant with the native [hidden] behavior and is not copied).
   ============================================================ */

.programme-v2-scope{font-family:'Outfit',Arial,sans-serif;color:#132350;background:#dbe2e8;box-sizing:border-box;display:flex;justify-content:center;padding:0}
.programme-v2-scope *{box-sizing:border-box}
.programme-v2-scope button{font:inherit;-webkit-appearance:none;appearance:none}

/* display:block override is required: the base .programme-v2-scope rule
   above sets display:flex (needed when it's a separate wrapper centering a
   .poster child, per the original template's two-element structure) — but
   here .poster and .programme-v2-scope both land on the SAME <main>
   element, so without this override .poster becomes a flex container and
   squeezes its own children (hero/days/schedule/footer) into one row
   instead of stacking them. margin:0 auto below already centers this
   element within its own parent, so the flex/justify-content centering
   from the base rule was never needed here anyway. */
.programme-v2-scope.poster{display:block;position:relative;width:min(100%,651px);overflow:hidden;background:#fff;box-shadow:0 0 24px #00152d55;margin:0 auto}

/* ---------- hero ---------- */
.programme-v2-scope .hero{position:relative;height:308px;overflow:hidden;background:#0a2049}
.programme-v2-scope .hero-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}

.programme-v2-scope .menu,
.programme-v2-scope .bell{position:absolute;z-index:5;border:0;cursor:pointer}
.programme-v2-scope .menu{left:58px;top:48px;width:26px;height:21px;background:transparent;padding:0}
.programme-v2-scope .menu span{display:block;height:3px;margin:4px 0;border-radius:3px;background:#fff}
.programme-v2-scope .bell{top:30px;right:36px;width:55px;height:55px;border-radius:50%;background:#f7f9f5;padding:13px}
.programme-v2-scope .bell svg{display:block;width:100%;height:100%;fill:none;stroke:#0a2049;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.programme-v2-scope .bell i{position:absolute;top:5px;right:6px;width:9px;height:9px;border-radius:50%;background:#f5283f}

.programme-v2-scope .headline{position:absolute;z-index:3;left:52px;top:72px;transform:rotate(-3deg);color:#fff;text-shadow:2px 3px 4px rgba(0,16,40,.45)}
.programme-v2-scope .headline h1,
.programme-v2-scope .headline h2{margin:0;font-style:italic;font-weight:900;line-height:.88}
.programme-v2-scope .headline h1{font-family:'Outfit',Arial,sans-serif;font-size:70px;letter-spacing:-2px;transform:scaleX(.9);transform-origin:left center}
.programme-v2-scope .headline h2{margin:12px 0 0 10px;font-family:'Outfit',Arial,sans-serif;font-size:53px;letter-spacing:-2px;font-weight:800;color:#ffc61a;text-shadow:2px 3px 3px rgba(0,16,40,.35);transform:scaleX(.95);transform-origin:left center}

.programme-v2-scope .ribbon{position:absolute;z-index:4;left:78px;bottom:127px;transform:rotate(-3.5deg);padding:8px 24px 10px 22px;color:#fff;font-size:21px;font-weight:800;font-style:italic;letter-spacing:.5px;background:#4cbe2b;
  clip-path:polygon(2% 20%,12% 3%,31% 13%,52% 2%,72% 12%,88% 0,100% 24%,97% 76%,86% 97%,67% 87%,45% 99%,25% 89%,9% 100%,0 70%)}

/* ---------- day tabs ---------- */
/* Full width, edge-to-edge, evenly divided by however many days exist
   (flex:1 on .day below handles the equal split for any day count) — no
   rounded corners, per repo owner's request to square this off. */
.programme-v2-scope .days{position:relative;z-index:10;display:flex;width:100%;margin:-70px 0 0;left:0;right:0}
.programme-v2-scope .day{flex:1;border:0;cursor:pointer;background:#0a2049;color:#fff;line-height:1.35;padding:10px 4px;min-height:70px;
  box-shadow:0 6px 16px rgba(0,20,45,.14)}
.programme-v2-scope .day strong,
.programme-v2-scope .day span{display:block}
.programme-v2-scope .day strong{font-size:18px;letter-spacing:.8px;font-weight:800}
.programme-v2-scope .day span{font-size:13px;margin-top:3px}
.programme-v2-scope .day.active{background:#fff;color:#132350;position:relative;z-index:2;box-shadow:none}

/* ---------- schedule ---------- */
/* min-height dropped from the template's fixed 741px (sized for a 7-item
   day): real data can be as short as the CMS's current single "TBC"
   placeholder item per day, and a fixed tall min-height would leave a huge
   empty gap under it. Sizes to content instead. */
.programme-v2-scope .schedule{position:relative;padding:12px 44px 22px 59px;background:#fff}
/* Timeline connector line + dot removed entirely per repo owner's request
   ("suggest remove the dot + line entirely") — was reading as visual
   clutter rather than a useful connector. */
.programme-v2-scope .timeline{display:none}
.programme-v2-scope .event{position:relative;display:grid;grid-template-columns:95px 70px 1fr;gap:15px;align-items:center;height:101px}
.programme-v2-scope .time{font-weight:800;font-size:19px;line-height:1.05;letter-spacing:.35px;text-align:center}
.programme-v2-scope .time span{display:block;margin-top:6px;font-size:14px;text-align:center}
.programme-v2-scope .dot{display:none}
.programme-v2-scope .icon{position:relative;display:grid;place-items:center;width:57px;height:57px;border-radius:50%;color:#fff}
.programme-v2-scope .icon svg{width:33px;height:33px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.programme-v2-scope .icon i{font-size:28px;color:#fff}
.programme-v2-scope .details{align-self:stretch;margin:8px 0;display:flex;flex-direction:column;justify-content:center;padding:0 14px 0 16px;border-radius:14px;background:#fafafa}
.programme-v2-scope .details h3{margin:0 0 9px;font-size:17px;line-height:1.1;font-weight:700;letter-spacing:-.2px;color:#16255a}
.programme-v2-scope .place{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600}
.programme-v2-scope .place svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}

.programme-v2-scope .green-c{color:#52bb23}.programme-v2-scope .green-b{background:#55bd24}
.programme-v2-scope .yellow-c{color:#e8a600}.programme-v2-scope .yellow-b{background:#ffc21d}
.programme-v2-scope .orange-c{color:#ff8b0c}.programme-v2-scope .orange-b{background:#ff8b06}
.programme-v2-scope .pink-c{color:#f82764}.programme-v2-scope .pink-b{background:#f82662}
.programme-v2-scope .blue-c{color:#1858df}.programme-v2-scope .blue-b{background:#1459db}
.programme-v2-scope .purple-c{color:#7136dd}.programme-v2-scope .purple-b{background:#7136dd}
.programme-v2-scope .teal-c{color:#11a4aa}.programme-v2-scope .teal-b{background:#11a5aa}

/* ---------- footer ---------- */
.programme-v2-scope .footer{position:relative;height:154px;overflow:hidden;background:#fff;color:#fff}
.programme-v2-scope .footer-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.programme-v2-scope .footer p{position:absolute;z-index:3;left:206px;top:20px;margin:0;transform:rotate(-4deg);
  font-family:'Outfit',Arial,sans-serif;
  font-size:31px;letter-spacing:-1px;font-style:italic;font-weight:900;line-height:1.08}
.programme-v2-scope .footer em{color:#5ed11b;font-style:italic}
.programme-v2-scope .x{position:absolute;z-index:3;font-weight:400;line-height:1;font-size:52px}
.programme-v2-scope .x.green{left:158px;top:48px;color:#9be100}
.programme-v2-scope .x.white{right:145px;top:78px;color:#fff}

/* ---------- fluid below the 651px design width ---------- */
@media(max-width:650px){
  .programme-v2-scope .hero{height:47.31vw}
  .programme-v2-scope .menu{left:8.91vw;top:7.37vw;width:4vw;height:3.23vw}
  .programme-v2-scope .menu span{height:.46vw;margin:.61vw 0}
  .programme-v2-scope .bell{top:4.61vw;right:5.53vw;width:8.45vw;height:8.45vw;padding:2vw}
  .programme-v2-scope .bell i{top:.77vw;right:.92vw;width:1.38vw;height:1.38vw}
  .programme-v2-scope .headline{left:7.99vw;top:11.06vw}
  .programme-v2-scope .headline h1{font-size:10.75vw;letter-spacing:-.3vw}
  .programme-v2-scope .headline h2{margin:1.84vw 0 0 1.54vw;font-size:8.14vw}
  .programme-v2-scope .ribbon{left:11.98vw;bottom:19.51vw;font-size:3.23vw;padding:1.23vw 3.69vw 1.54vw 3.38vw}

  /* No fixed height here (unlike the template's original rule): .day
     buttons need ~70px (two text lines) to render without clipping, but a
     fixed 10.75vw (~58px at common phone widths) box was shorter than
     that — content overflowed the box while .schedule below still
     positioned itself against the box's declared (too-short) height,
     causing the day-tabs to visually overlap the first schedule row.
     Letting height auto-size to the .day children's own min-height fixes
     it, matching how the desktop (non-media) rule already behaves. */
  .programme-v2-scope .days{width:100%;margin:-10.75vw 0 0}
  .programme-v2-scope .day strong{font-size:3.8vw}
  .programme-v2-scope .day span{font-size:2.9vw;margin-top:.46vw}

  /* Icons/fonts enlarged for mobile readability (repo owner: "really too
     small to read"). Time column narrowed slightly (14.59vw -> 11.5vw) and
     the icon/time gap tightened (2.3vw -> 1.6vw) so the now-larger time
     text still fits without wrapping, shifting it a bit further left as
     asked, while giving the enlarged icon column its own width bump. */
  .programme-v2-scope .schedule{padding:1.84vw 6.76vw 3.38vw 9.06vw}
  .programme-v2-scope .timeline{left:24.5vw;top:5.22vw;bottom:4.3vw}
  .programme-v2-scope .event{grid-template-columns:11.5vw 13.5vw 1fr;gap:1.6vw;height:21vw}
  .programme-v2-scope .time{font-size:4.4vw}
  .programme-v2-scope .time span{font-size:3.3vw;margin-top:.92vw}
  .programme-v2-scope .dot{left:15.4vw;width:1.69vw;height:1.69vw}
  .programme-v2-scope .icon{width:11.5vw;height:11.5vw}
  .programme-v2-scope .icon svg{width:6.6vw;height:6.6vw}
  .programme-v2-scope .icon i{font-size:5.6vw}
  .programme-v2-scope .details{margin:1.23vw 0;padding:0 2.15vw 0 2.46vw;border-radius:2.15vw}
  .programme-v2-scope .details h3{font-size:4.1vw;margin-bottom:1.38vw}
  .programme-v2-scope .place{font-size:3vw}
  .programme-v2-scope .place svg{width:3vw;height:3vw}

  .programme-v2-scope .footer{height:23.65vw}
  .programme-v2-scope .footer p{left:31.64vw;top:3.07vw;font-size:4.76vw}
  .programme-v2-scope .x{font-size:7.99vw}
  .programme-v2-scope .x.green{left:24.27vw;top:7.37vw}
  .programme-v2-scope .x.white{right:22.27vw;top:11.98vw}
}