/* =======================================
   UI overrides: arrows + centered slogan
   ======================================= */

/* Make sure we beat any earlier rules */
.hero-row .nav,
.slogan-row .nav,
.linked-row .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  background:#b40016 !important; /* red pill */
  color:#111 !important;          /* black chevrons */
  border:1px solid #00000033;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.hero-row #hero-prev{  left:-12px }
.hero-row #hero-next{  right:-12px }

/* keyboard focus: visible but not ugly */
.hero-row .nav:focus-visible,
.slogan-row .nav:focus-visible,
.linked-row .nav:focus-visible{
  outline:3px solid #ffe27a;
  outline-offset:3px;
}

/* Centered slogan card under hero */
#slogan-card{
  background:#000c;
  color:#fff;
  border-radius:12px;
  padding:18px 20px;
  width:min(96vw,var(--rail-max));
  margin:0 auto;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  text-align:center;
  font-size:1.05rem;
  line-height:1.45;
}

/* --- layering: arrows & captions above tiles --- */
.hero-row .rail { position: relative; }
.hero-row .tiles { position: relative; overflow: visible; }

.hero-row .tile { position: relative; }
.hero-row .tile img { display:block; width:100%; height:100%; object-fit:cover; }

/* nav arrows must be on top of everything in hero */
.hero-row .nav { position:absolute; z-index: 20; }

/* caption pill should float above the image */
.hero-row .cap{
  position:absolute; left:12px; bottom:14px;
  z-index: 15;
  background:#000c; color:#fff;
  padding:6px 10px; border-radius:12px;
  font-size:.85rem; box-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* === Keep hero nav arrows fully on-screen (override) === */
.hero-row .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;                 /* above images */
  pointer-events:auto;
}

/* Pull arrows inside the rail; override any previous values */
.hero-row .nav.prev{ left: 12px !important; }
.hero-row .nav.next{ right: 12px !important; }

/* Respect iOS safe areas on notched devices */
@supports (inset: 0) {
  .hero-row .nav.prev{ left: max(12px, env(safe-area-inset-left)) !important; }
  .hero-row .nav.next{ right: max(12px, env(safe-area-inset-right)) !important; }
}