:root{
  /* theme variables are defined in theme-default.css */
  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --max: 1100px;

  --tile-img-radius: 14px;
  --tile-img-aspect: 16 / 9; /* can be overridden by theme */
  --ad-img-aspect: 16 / 6;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* =========================================================
   Shared Accessibility Helpers
   PURPOSE:
   - Make keyboard focus obvious across the site
   - Provide a visible skip link for screen-reader/keyboard users
   ========================================================= */
.skip-link{
  position: absolute;
  left: 14px;
  top: -48px;
  z-index: 200;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  border: 2px solid #0f172a;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.skip-link:focus{
  top: 14px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid #0f62fe;
  outline-offset: 3px;
}

/* =========================================================
   Top Bar
   ========================================================= */
.appbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--appbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.appbar__inner{
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.brand{
  color: var(--text);
  text-decoration:none;
  font-weight: 900;
  letter-spacing:.4px;
}
.appnav{ display:flex; gap: 10px; }
.appnav a{
  color: var(--muted);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 12px;
}
.appnav a.active, .appnav a:hover{
  color: var(--text);
  background: var(--hover);
}

/* =========================================================
   Generated Text Menu
   PURPOSE:
   - Provide a hamburger-triggered text menu grouped by public section
   - Stay always available on phones
   - Respect the desktop on/off setting from Site Settings
   ========================================================= */
.appmenu{
  position: relative;
  flex: 0 0 auto;
}

.appmenu__toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.appmenu__toggle:hover{
  background: var(--hover);
}

.appmenu__icon{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
}

.appmenu__icon span{
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.appmenu__toggle-text{
  line-height: 1;
}

.appmenu__backdrop[hidden],
.appmenu__panel[hidden]{
  display: none !important;
}

.appmenu__backdrop{
  position: fixed;
  inset: 0;
  z-index: 39;
  border: 0;
  padding: 0;
  background: rgba(15, 23, 42, .24);
}

.appmenu__panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - 110px);
  overflow: auto;
  overflow-x: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}

.appmenu__header{
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.appmenu__group{
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card2);
}

.appmenu__group + .appmenu__group{
  margin-top: 10px;
}

.appmenu__summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.appmenu__summary::-webkit-details-marker{
  display: none;
}

.appmenu__summary::after{
  content: '▾';
  font-size: 14px;
  color: var(--muted);
  transition: transform .18s ease;
}

.appmenu__group[open] .appmenu__summary::after{
  transform: rotate(180deg);
}

.appmenu__items{
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
}

.appmenu__item{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255,255,255,.72);
}

.appmenu__item:hover{
  background: var(--hover);
}

.appmenu__item--section-home{
  font-weight: 800;
}

html.appmenu-open,
html.appmenu-open body{
  overflow: hidden;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px;
}
.breadcrumbs{
  max-width: calc(var(--max) - 80px);
  margin: 0 auto 12px;
}
.breadcrumbs__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.breadcrumbs__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumbs__item + .breadcrumbs__item::before{
  content: "/";
  color: color-mix(in srgb, var(--muted) 70%, var(--text) 30%);
  margin-right: 2px;
}
.breadcrumbs__link{
  color: var(--muted);
  text-decoration: none;
}
.breadcrumbs__link:hover{
  color: var(--text);
  text-decoration: underline;
}
.breadcrumbs__current{
  color: var(--text);
}

/* =========================================================
   Tiles grid (LOCKED 4-COLUMN MAX)
   PURPOSE:
     - Desktop: exactly 4 columns max, grows vertically
     - Tablet: 2 columns
     - Mobile: 1 column
     - Supports slot placement (grid-row/grid-column styles on items)
     - On smaller screens we IGNORE explicit positions and flow in order
   ========================================================= */

.grid{
  display:grid;
  gap: 12px;
  align-items: start;
}

/* Default (mobile) */
.grid--slots{
  grid-template-columns: 1fr;
  grid-auto-flow: row;
}

/* Tablet */
@media (min-width: 640px){
  .grid--slots{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}

/* Desktop */
@media (min-width: 1100px){
  .grid--slots{ grid-template-columns: repeat(4, minmax(220px, 1fr)); }

  /* =========================================================
     Desktop Slot Placement
     PURPOSE:
     - Apply authored column/row placement only on large screens
     - Prevent mobile devices from flashing desktop inline positions on first paint
     ========================================================= */
  .grid--slots .griditem.has-slot-style{
    grid-column: var(--slot-col, auto) / span var(--slot-col-span, 1);
  }

  .grid--slots .griditem.has-slot-style.is-locked{
    grid-row: var(--slot-row, auto) / span var(--slot-row-span, 1);
  }
}

/* =========================================================
   Public Masonry (Desktop only)
   - Uses CSS Grid + JS to compute row spans from actual height
   - Keeps column spans intact
   - Locked items keep explicit grid-row positions
   ========================================================= */

@media (min-width: 1100px){
  .grid--slots.is-masonry{
    grid-auto-rows: 10px;
    grid-auto-flow: row dense;
  }
}

/* On non-desktop widths, force flow order (ignore explicit coordinates) */
@media (max-width: 1099px){
  .grid--slots .griditem{
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Legacy span helpers (still supported) */
.grid .span-full,
.grid .span-4{ grid-column: 1 / -1; }
.grid .span-2{ grid-column: span 2; }


.tile{
  display:flex;
  flex-direction: column;
  text-decoration:none;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}

.tile__media{
  width: 100%;
  aspect-ratio: var(--tile-img-aspect);
  background: var(--media-bg);
  display:flex;
  align-items:center;
  justify-content:center;
}

.tile__img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* looks clean for tiles */
  display:block;
}

.tile__ph{
  width:100%;
  height:100%;
  background: var(--media-bg);
}

.tile__meta{
  padding: 10px 12px 12px;
}
.tile__title{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.25;
}
.tile__sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

/* =========================================================
   Tile Graphic Layout Variants
   PURPOSE:
   - Preserve the legacy "cover image" tile look by default
   - Allow tiles to reuse the same prepared graphics as centered or left-side art
   ========================================================= */
.tile__media--graphic{
  padding: 16px;
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.01));
}

.tile__img--graphic{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 170px;
  object-fit: contain;
}

.tile--graphic-top .tile__media{
  aspect-ratio: 16 / 10;
}

.tile--graphic-left{
  flex-direction: row;
  align-items: stretch;
}

.tile--graphic-left .tile__media{
  width: clamp(110px, 36%, 180px);
  min-width: 110px;
  aspect-ratio: auto;
  border-right: 1px solid var(--line);
}

.tile--graphic-left .tile__meta{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tile--custom-inline{
  display: block;
  padding: 12px;
}

.tile--custom-inline .tile__meta--custom-inline{
  padding: 0 0 12px;
}

.tile--custom-inline .custom-page-scope{
  width: 100%;
}

@media (max-width: 719px){
  .tile--graphic-left{
    flex-direction: column;
  }

  .tile--graphic-left .tile__media{
    width: 100%;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================
   Full-width blocks (modules)
   NOTE:
   - Modules are rendered between tile grids as full-width blocks.
   - If you later want modules to behave like tiles, that will be a
     renderer + admin option (not CSS-only).
   ========================================================= */
.block{
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.block__title{
  font-weight: 900;
  margin-bottom: 10px;
}

/* Grid items already get their spacing from the parent grid gap.
   Remove per-card top/bottom margins inside grid slots so stacked modules,
   especially tickers/crawls, do not leave oversized gaps between rows. */
.grid--slots .griditem > .block{
  margin: 0;
}

/* =========================================================
   Shared Module Graphic Wrapper
   PURPOSE:
   - Let every module type use the same optional left/top graphic treatment
   - Flatten legacy .block containers inside the wrapper so older modules still
     look like one card instead of nested cards
   ========================================================= */
.module-shell{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.module-shell__graphic{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.01));
}

.module-shell__graphic-link,
.module-shell__graphic-art{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.module-shell__graphic img{
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.module-shell--graphic-left{
  flex-direction: row;
  align-items: stretch;
}

.module-shell--graphic-left .module-shell__graphic{
  flex: 0 0 clamp(120px, 30%, 220px);
}

.module-shell--graphic-left .module-shell__body{
  flex: 1 1 auto;
  min-width: 0;
}

.module-shell--graphic-top .module-shell__graphic{
  min-height: 140px;
}

.module-shell__body > .block{
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.block--external-launch .block__title{
  margin: 0;
}

.external-launch__title-link{
  display: inline-flex;
  color: var(--text);
  text-decoration: none;
}

.external-launch__title-link:hover .block__title,
.external-launch__title-link:focus-visible .block__title{
  text-decoration: underline;
}

@media (max-width: 719px){
  .module-shell--graphic-left{
    flex-direction: column;
  }

  .module-shell--graphic-left .module-shell__graphic{
    flex-basis: auto;
  }
}

/* =========================================================
   Lists
   ========================================================= */
.list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.list__item{
  text-decoration:none;
  color: var(--text);
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card2);
}
.list__item:hover{
  background: var(--hover);
}
.list__title{
  font-weight: 800;
  font-size: 14px;
}
.list__meta{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.list__footer{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.list__more{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}
.list__more:hover{
  background: var(--hover);
}

/* =========================================================
   Ads
   ========================================================= */
.adgrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px){
  .adgrid{ grid-template-columns: 1fr 1fr; }
}

.adcard__media{
  width:100%;
  aspect-ratio: var(--ad-img-aspect);
  max-height: 120px;            /* ✅ caps banner height */
  background: var(--media-bg);
  display:flex;
  align-items:center;
  justify-content:center;
}

.adcard__img{
  max-width: 100%;
  max-height: 120px;            /* ✅ matches cap */
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
}

.adcard__ph{
  height: 140px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
}
.adcard__label{
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}

/* =========================================================
   Article
   ========================================================= */
.article{
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.article__title{ margin: 6px 0 12px; font-size: 20px; }
.article__meta{
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.article__body img{ max-width:100%; height:auto; }
.article--standalone{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.article__panel{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px);
}
.article--standalone .article__title{
  margin-top: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
}
.article--standalone .article__meta{
  margin-bottom: 18px;
}
.article__body > * + *{
  margin-top: 14px;
}
.article__disclaimer{
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card2) 88%, white 12%);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.article__disclaimer p{
  margin: 0;
}
.standalone-page-ad-wrap{
  margin: 18px auto;
}
.standalone-page-ad{
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
.standalone-page-ad--horizontal{
  max-width: 780px;
  margin: 0 auto;
}
.standalone-page-ad--square{
  max-width: 340px;
  margin: 0 auto;
}
.standalone-page-ad__img{
  display: block;
  width: 100%;
  height: auto;
}
.system-page-ad-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 16px;
  align-items: start;
}
.system-page-ad-grid .standalone-page-ad-wrap{
  margin: 0;
  width: 100%;
}
.system-page-ad-grid .standalone-page-ad--square{
  max-width: none;
  width: 100%;
}
.system-page-ad-grid .standalone-page-ad{
  border-radius: 20px;
}
.system-page-ad-grid .standalone-page-ad__img{
  width: 100%;
  aspect-ratio: 300 / 250;
  object-fit: cover;
}
@media (max-width: 719px){
  .article__panel{
    padding: 16px;
  }
  .standalone-page-ad-wrap{
    margin: 14px auto;
  }
  .standalone-page-ad--square{
    max-width: 280px;
  }
}

@media (max-width: 700px){
  .system-page-ad-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .system-page-ad-grid .standalone-page-ad-wrap{
    margin: 0;
  }
  .system-page-ad-grid .standalone-page-ad--square{
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 430px){
  .system-page-ad-grid{
    grid-template-columns: 1fr;
  }
  .system-page-ad-grid .standalone-page-ad-wrap{
    margin: 14px auto;
  }
  .system-page-ad-grid .standalone-page-ad--square{
    max-width: 280px;
    width: 100%;
  }
}

/* =========================================================
   Empty
   ========================================================= */
.empty{ color: var(--muted); padding: 16px 0; }

/* =========================================================
   Modal
   ========================================================= */
.modal{ position: fixed; inset: 0; display: none; z-index: 100; }
.modal.is-open{ display: block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.modal__panel{
  position:absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(960px, 94vw);
  height: min(720px, 86vh);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display:flex;
  flex-direction: column;
}
.modal__bar{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.modal__btn{
  border: 1px solid var(--line);
  background: var(--card2);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 800;
}
.modal__btn:hover{ background: var(--hover); }
.modal__frame{
  flex:1;
  width:100%;
  border:0;
  background: #fff;
}

/* =========================================================
   Modal Scroll Lock (paired with assets/site.js)
   PURPOSE: Prevent background scroll while global modal is open.
   SAFE TO EDIT: YES
   ========================================================= */
html.modal-open, html.modal-open body{ overflow:hidden; }

/* =========================================================
   BRANDING (logo + tagline)
   NOTE:
   - Public header loads these fields from DB site_settings.
   - If logo URL is blank, the <img> element is not rendered.
   ========================================================= */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}

.brand__logo{
  width: auto;
  max-width: 200px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  display: block;
}

.brand__text{
  display:flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.brand__name{
  font-weight: 900;
  letter-spacing: .4px;
  font-size: 18px;
}

.brand__tagline{
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 720px){
  .brand__logo{
    width: auto;
    max-width: 150px;
    height: 48px;
    flex-basis: auto;
  }
}

/* =========================================================
   Mobile Header / Dashboard Layout
   PURPOSE:
   - Keep the public dashboards readable on phones
   - Let brand + nav stack cleanly instead of fighting for one row
   ========================================================= */
@media (max-width: 719px){
  .appbar__inner{
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 12px;
    gap: 10px;
  }

  .brand{
    width: auto;
    flex: 1 1 auto;
    gap: 12px;
  }

  .brand__text{
    flex: 1 1 auto;
  }

  .brand__name{
    font-size: 20px;
    line-height: 1.05;
  }

  .brand__tagline{
    font-size: 12px;
    line-height: 1.2;
  }

  .appnav{
    display: none;
  }

  .appmenu{
    margin-left: auto;
  }

  .appmenu__toggle{
    padding: 10px 12px;
  }

  .appmenu__panel{
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100dvh - (env(safe-area-inset-top, 0px) + 84px));
    border-radius: 22px;
    padding: 14px;
  }

  .wrap{
    padding: 10px;
  }

  .breadcrumbs{
    max-width: none;
    margin-bottom: 10px;
  }

  .breadcrumbs__list{
    font-size: 12px;
    gap: 6px;
  }

  .grid{
    gap: 10px;
  }

  .block{
    margin: 10px 0;
  }

  .site-footer{
    margin-top: 12px;
    padding: 12px 10px;
  }
}

/* =========================================================
   TABLET FRAME WRAPPER (Day 2)
   PURPOSE:
   - Mobile-first: no heavy bezel
   - Tablet/Desktop: framed "tablet" look
   ========================================================= */
.tablet{
  max-width: var(--max);
  margin: 0 auto;
}

.tablet__inner{
  background: transparent;
}

/* Tablet frame turns on at tablet breakpoint */
@media (min-width: 720px){
  .tablet{
    padding: 14px;
    border-radius: calc(var(--radius) + 10px);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow: var(--shadow);
  }
  .tablet__inner{
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    background: transparent; /* keeps your theme bg behavior */
  }
}

/* =========================================================
   Site Footer (DB-driven)
   NOTE:
   - Footer content is stored in site_settings:
       footer_html (HTML)
       footer_small_print (text)
   - footer_html is printed as HTML (admin-controlled)
   ========================================================= */
.site-footer{
  max-width: var(--max);
  margin: 14px auto 20px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.site-footer__html a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__small{
  margin-top: 8px;
  opacity: 0.9;
}

.site-footer__utility-links{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.site-footer__utility-links a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =======================================================================
   AD MODULE (Deployment requirement)
   - Image only
   - No "Sponsored" heading
   - Image fills entire tile
   ======================================================================= */
.tile--ad{
  height: 100%;
}
.tile--ad .tile__media{
  height: 100%;
  aspect-ratio: auto; /* override tile aspect ratio */
}
.tile--ad .tile__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Multi-image ad grid (image only) */
.adgrid--images{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 719px){
  .adgrid--images{ grid-template-columns: 1fr; }
}
.adimg{
  display:block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}
.adimg img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
}

/* =========================================================
   TV Hub / ONTV Plus: responsive overrides for embedded custom pages
   (Scoped so it won't affect the rest of the site)
   ========================================================= */

.custom-page-scope{
  max-width: 100%;
}

.custom-page-scope *{
  max-width: 100%;
  box-sizing: border-box;
}

/* Allow filter/tool rows to wrap on small screens */
.custom-page-scope form,
.custom-page-scope .controls,
.custom-page-scope .filters,
.custom-page-scope .toolbar,
.custom-page-scope .searchbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.custom-page-scope input,
.custom-page-scope select,
.custom-page-scope button{
  max-width: 100%;
}

/* Wide results: keep page responsive, allow horizontal scroll inside */
.custom-page-scope table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

.custom-page-scope .table-wrap,
.custom-page-scope .list-wrap,
.custom-page-scope .results-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Any embeds inside the custom page */
.custom-page-scope iframe,
.custom-page-scope video{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
}

/* =========================================================
   TV Hub / Custom Page embeds: force responsive layout
   Why: embedded custom pages (e.g., ONTV Plus) can include
        fixed/min widths that break mobile sizing.
   Scope: ONLY affects content rendered by the custom_page module
          (wrapped in .custom-page-scope).
   ========================================================= */

.custom-page-scope{ max-width: 100%; }

/* Don’t let embedded markup force the page wider than the viewport */
.custom-page-scope, .custom-page-scope *{
  max-width: 100%;
  box-sizing: border-box;
}

/* Common control bars: allow wrapping on mobile */
.custom-page-scope form,
.custom-page-scope .controls,
.custom-page-scope .filters,
.custom-page-scope .toolbar,
.custom-page-scope .searchbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.custom-page-scope input,
.custom-page-scope select,
.custom-page-scope button{
  max-width: 100%;
}

/* Tables/lists: contain instead of forcing horizontal page width */
.custom-page-scope table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

.custom-page-scope .table-wrap,
.custom-page-scope .list-wrap,
.custom-page-scope .results-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Media embeds */
.custom-page-scope iframe,
.custom-page-scope video,
.custom-page-scope img{
  max-width: 100% !important;
}

.custom-page-scope iframe,
.custom-page-scope video{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
}

/* =========================================================
   Reduced Motion
   PURPOSE:
   - Respect user motion preferences for smoother accessibility behavior
   - Reduce animation/transition churn across shared public UI
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html:focus-within{
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}