/* ==========================================================================
   home.css — homepage revamp (hero search, "Local Now" band, camera carousel,
   gas card, "Explore Your Community" grid). Page-scoped; loaded only by
   index.php via asset_v('/css/home.css'). Self-contained: no dependency on the
   social-layer (.sc-*) assets. Matches the site card system used by the hubs
   (deals-hub.css / weather-hub.css): navy #003366, Oswald headings, rounded
   cards with a 1px #e2e8f0 border and a soft shadow.
   ========================================================================== */

:root{
  --aphome-navy:  var(--color-primary, #003366);
  --aphome-navy2: #00427d;
  --aphome-green: #1b8743;
  --aphome-ink:   #22303c;
  --aphome-muted: #5b6b7a;
  --aphome-line:  #e2e8f0;
  --aphome-card-shadow: 0 2px 10px rgba(15,23,42,.05);
  --aphome-card-radius: 14px;
}

/* ------------------------------------------------------------------ Hero -- */
.aphome-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(160deg,#eaf2fb 0%,#f7fafc 100%);
  border-bottom:1px solid var(--aphome-line);
  padding:26px 0 30px;
}
.aphome-hero .container{ position:relative; z-index:2; max-width:920px; }

/* --- Media hero (aerial photo / GO-train video) ---------------------------
   Enabled automatically when an asset exists in /img/home/ (see hero-search.php).
   Falls back to a dark navy gradient so the white text stays legible if the
   asset is slow, blocked, or absent. */
.aphome-hero--media{
  background:linear-gradient(150deg,#00294f 0%,#003366 55%,#004a8f 100%);
  border-bottom:0;
  padding:46px 0 48px;
}
.aphome-hero-bg,
.aphome-hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
}
.aphome-hero-bg{ background-size:cover; background-position:center; }
.aphome-hero-video{ object-fit:cover; }
.aphome-hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(2,15,33,.45) 0%, rgba(2,15,33,.64) 100%);
}
/* White-on-dark text treatment when media is present */
.aphome-hero--media .aphome-hero-title{ color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.40); }
.aphome-hero--media .aphome-hero-sub{ color:rgba(255,255,255,.92); text-shadow:0 1px 10px rgba(0,0,0,.40); }
.aphome-hero--media .ap-search-near,
.aphome-hero--media .ap-search-near a,
.aphome-hero--media .ap-search-near .custom-control-label{ color:rgba(255,255,255,.92) !important; }
.aphome-hero--media .ap-search-near a{ text-decoration:underline; }
/* Reduced-motion: never autoplay video — the poster/photo shows instead. */
@media (prefers-reduced-motion:reduce){
  .aphome-hero-video{ display:none; }
}
.aphome-hero-title{
  font-family:'Oswald',sans-serif;
  color:var(--aphome-navy);
  font-weight:700;
  line-height:1.1;
  margin:0 0 6px;
  font-size:clamp(1.5rem, 4.2vw, 2.35rem);
}
.aphome-hero-sub{
  color:var(--aphome-muted);
  font-size:clamp(.95rem, 2.2vw, 1.05rem);
  margin:0 0 16px;
}
/* The reusable search widget (inc/searchform.php) carries a bottom margin; trim
   it inside the hero so the chip row sits close. */
.aphome-hero .ap-search-form{ margin-bottom:12px !important; }
.aphome-hero .ap-search-form .d-flex{ min-height:48px; }
.aphome-hero .ap-search-input{ height:48px; line-height:48px; font-size:1.02rem; }

/* Quick category chips */
.aphome-chips{
  display:flex; flex-wrap:wrap; gap:8px;
  align-items:center;
}
.aphome-chips .aphome-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px;
  background:#fff; border:1px solid #d5e0ee;
  color:var(--aphome-navy); text-decoration:none;
  font-size:.9rem; font-weight:600; line-height:1;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.aphome-chips .aphome-chip i{ font-size:.92em; opacity:.85; }
.aphome-chips .aphome-chip:hover,
.aphome-chips .aphome-chip:focus{
  background:var(--aphome-navy); border-color:var(--aphome-navy);
  color:#fff; text-decoration:none; transform:translateY(-1px);
}
.aphome-chips .aphome-chip:hover i,
.aphome-chips .aphome-chip:focus i{ opacity:1; }

/* -------------------------------------------------------------- Local Now -- */
.aphome-localnow{ margin:20px 0 4px; }
.aphome-section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin:0 0 12px;
}
.aphome-section-head h2{
  font-family:'Oswald',sans-serif; color:var(--aphome-navy);
  font-weight:700; margin:0; font-size:1.45rem; text-transform:uppercase;
  letter-spacing:.3px;
}
.aphome-section-head .aphome-seelink{
  font-size:.85rem; font-weight:600; color:var(--aphome-green);
  text-decoration:none; white-space:nowrap;
}
.aphome-section-head .aphome-seelink:hover{ text-decoration:underline; }

/* Generic card shell shared by the camera + gas cards */
.aphome-card{
  background:#fff; border:1px solid var(--aphome-line);
  border-radius:var(--aphome-card-radius); box-shadow:var(--aphome-card-shadow);
  overflow:hidden; height:100%;
}

/* --------------------------------------------------------- Camera carousel -- */
.aphome-carousel{ position:relative; }
.aphome-cam-vp{ position:relative; }
.aphome-cam-track{
  display:flex; gap:0;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                 /* Firefox */
  scroll-behavior:smooth;
}
.aphome-cam-track::-webkit-scrollbar{ display:none; }   /* WebKit */
.aphome-cam-track:focus{ outline:none; }
.aphome-cam-track:focus-visible{ outline:2px solid var(--aphome-navy); outline-offset:-2px; }

.aphome-cam-slide{
  flex:0 0 100%; max-width:100%;
  scroll-snap-align:start;
  position:relative; text-decoration:none; color:#fff;
  display:block;
}
@media (min-width:768px){
  .aphome-cam-slide{ flex-basis:50%; max-width:50%; }
}
.aphome-cam-imgwrap{
  position:relative; aspect-ratio:16/9; background:#0a1a2f;
  overflow:hidden;
}
/* aspect-ratio fallback for older engines */
@supports not (aspect-ratio:1/1){
  .aphome-cam-imgwrap{ height:0; padding-top:56.25%; }
}
.aphome-cam-imgwrap img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.aphome-cam-cap{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:8px;
  padding:22px 12px 9px;
  background:linear-gradient(to top, rgba(2,12,26,.86) 0%, rgba(2,12,26,0) 100%);
  color:#fff; font-size:.86rem; line-height:1.15;
}
.aphome-cam-cap .aphome-cam-shield{
  height:26px; width:auto; flex:0 0 auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.aphome-cam-cap .aphome-cam-loc{ font-weight:600; }
.aphome-cam-live{
  position:absolute; top:9px; left:9px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(2,12,26,.72); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
}
.aphome-cam-live .dot{
  width:7px; height:7px; border-radius:50%; background:#ff4d4f;
  box-shadow:0 0 0 0 rgba(255,77,79,.7); animation:aphome-pulse 1.8s infinite;
}
@keyframes aphome-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,77,79,.6); }
  70%{ box-shadow:0 0 0 7px rgba(255,77,79,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,77,79,0); }
}
@media (prefers-reduced-motion:reduce){
  .aphome-cam-live .dot{ animation:none; }
  .aphome-cam-track{ scroll-behavior:auto; }
}

/* Prev / next arrows */
.aphome-cam-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3; width:38px; height:38px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); color:var(--aphome-navy);
  font-size:1.2rem; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.aphome-cam-btn:hover{ background:#fff; }
.aphome-cam-btn[hidden]{ display:none; }
.aphome-cam-prev{ left:8px; }
.aphome-cam-next{ right:8px; }

.aphome-cam-count{
  position:absolute; top:9px; right:9px; z-index:2;
  background:rgba(2,12,26,.72); color:#fff;
  font-size:.72rem; font-weight:600;
  padding:2px 9px; border-radius:999px;
}

/* Dot indicators */
.aphome-cam-dots{
  display:flex; justify-content:center; gap:6px;
  padding:10px 0 2px;
}
.aphome-cam-dots button{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:#c5d0dd; cursor:pointer; transition:background .15s ease, transform .15s ease;
}
.aphome-cam-dots button.on{ background:var(--aphome-navy); transform:scale(1.15); }

/* --------------------------------------------------------------- Gas card -- */
.aphome-gas-card{ display:flex; flex-direction:column; }
.aphome-gas-imglink{ display:block; line-height:0; }
.aphome-gas-imglink img{ width:100%; height:auto; display:block; }
.aphome-gas-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px; }
.aphome-gas-low{
  font-size:.95rem; color:var(--aphome-ink); line-height:1.3; margin:0;
}
.aphome-gas-low .aphome-gas-price{
  font-family:'Oswald',sans-serif; font-weight:700;
  color:var(--aphome-green); font-size:1.15rem;
}
.aphome-gas-low .aphome-gas-station{ font-weight:600; }
.aphome-gas-cta{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--aphome-navy); color:#fff; text-decoration:none;
  font-weight:600; font-size:.9rem;
  padding:9px 16px; border-radius:8px;
  transition:background .15s ease;
}
.aphome-gas-cta:hover, .aphome-gas-cta:focus{ background:#00284f; color:#fff; text-decoration:none; }

/* When the camera band is missing, the gas card fills the row: cap its width so
   the landscape image doesn't blow up on desktop. */
.aphome-localnow--gasonly .aphome-gas-card{ max-width:560px; margin:0 auto; }

/* ------------------------------------------------ Explore Your Community -- */
.aphome-explore{ padding:6px 0 2px; }
.aphome-explore h2{
  font-family:'Oswald',sans-serif; color:var(--aphome-navy);
  font-weight:700; margin:0 0 4px; font-size:1.45rem; text-transform:uppercase;
  letter-spacing:.3px;
}
.aphome-explore .aphome-explore-sub{
  color:var(--aphome-muted); font-size:.95rem; margin:0 0 16px;
}
.aphome-explore-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:12px;
}
@media (min-width:576px){
  .aphome-explore-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}
.aphome-explore-tile{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:9px; padding:18px 10px 15px;
  background:#fff; border:1px solid var(--aphome-line);
  border-radius:12px; box-shadow:var(--aphome-card-shadow);
  text-decoration:none; color:var(--aphome-ink);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.aphome-explore-tile:hover, .aphome-explore-tile:focus{
  text-decoration:none; color:var(--aphome-navy);
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(15,23,42,.10);
  border-color:#cdd9e8;
}
.aphome-explore-ico{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#eaf2fb 0%,#f7fafc 100%);
  color:var(--aphome-navy); font-size:1.35rem;
  transition:background .15s ease, color .15s ease;
}
.aphome-explore-tile:hover .aphome-explore-ico,
.aphome-explore-tile:focus .aphome-explore-ico{
  background:var(--aphome-navy); color:#fff;
}
.aphome-explore-label{
  font-family:'Oswald',sans-serif; font-weight:600;
  font-size:.95rem; line-height:1.15;
}
.aphome-explore-desc{
  font-size:.72rem; color:var(--aphome-muted); line-height:1.2;
}

/* ---------------------------------- Below-the-fold monetization blocks -- */
/* Shared eyebrow header for the sponsor + partner strips */
.aphome-sponsors,
.aphome-partners{ margin:0 0 18px; }
.aphome-sponsors-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 10px;
}
.aphome-sponsors-head span{
  font-family:'Oswald',sans-serif; color:var(--aphome-navy);
  font-weight:700; font-size:1.15rem; text-transform:uppercase; letter-spacing:.4px;
}
.aphome-sponsors-head small{
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:#8a97a6; border:1px solid #dbe2ea; border-radius:999px; padding:2px 8px;
  white-space:nowrap;
}

/* Sponsored text-link ads ("Local Sponsors") — responsive grid, ~3-4 per row */
.aphome-sponsor-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
.aphome-sponsor-list li{ margin:0; }
.aphome-sponsor-list a{
  display:flex; flex-direction:column; gap:5px; height:100%;
  padding:12px 14px; border:1px solid var(--aphome-line); border-radius:10px;
  background:#fff; box-shadow:var(--aphome-card-shadow);
  text-decoration:none; color:var(--aphome-ink);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.aphome-sponsor-list a:hover,
.aphome-sponsor-list a:focus{
  text-decoration:none; border-color:#cdd9e8; transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(15,23,42,.08);
}
.aphome-sponsor-headline{
  font-family:'Oswald',sans-serif; font-weight:600;
  color:var(--aphome-navy); font-size:1.18rem; line-height:1.2;
}
.aphome-sponsor-body{ color:var(--aphome-muted); font-size:1rem; line-height:1.4; }
.aphome-sponsor-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto; padding-top:5px;
}
.aphome-sponsor-by{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.4px;
  color:#8a97a6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.aphome-sponsor-foot .fa-arrow-right{ color:var(--aphome-green); font-size:.82rem; flex:0 0 auto; }

/* Sponsored / affiliate content cards ("From Our Partners") */
.aphome-partner-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
}
.aphome-partner-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--aphome-line);
  border-radius:12px; box-shadow:var(--aphome-card-shadow); overflow:hidden;
  text-decoration:none; color:var(--aphome-ink);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.aphome-partner-card:hover,
.aphome-partner-card:focus{
  text-decoration:none; color:var(--aphome-ink);
  transform:translateY(-3px); box-shadow:0 8px 20px rgba(15,23,42,.10);
  border-color:#cdd9e8;
}
.aphome-partner-img{
  display:block; width:100%; aspect-ratio:16/9;
  background-size:cover; background-position:center; background-color:#eef3f9;
}
@supports not (aspect-ratio:1/1){ .aphome-partner-img{ height:120px; } }
.aphome-partner-img--ph{
  display:flex; align-items:center; justify-content:center;
  color:#b7c3d1; font-size:1.7rem;
}
.aphome-partner-body{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; }
.aphome-partner-tag{
  align-self:flex-start;
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:#8a5a00; background:#fff3cd; border-radius:4px; padding:2px 7px;
}
.aphome-partner-tag.is-aff{ color:#0b5a4a; background:#d5f3ea; }
.aphome-partner-title{
  font-family:'Oswald',sans-serif; font-weight:600;
  color:var(--aphome-navy); font-size:1rem; line-height:1.2;
}
.aphome-partner-by{ font-size:.75rem; color:var(--aphome-muted); }

/* House "advertise" fallback strip (shown only when nothing is booked) */
.aphome-advertise-strip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 18px; padding:13px 18px; border-radius:10px;
  background:linear-gradient(135deg,#eaf2fb 0%,#f7fafc 100%);
  border:1px dashed #b9cbe2; color:var(--aphome-navy);
  text-decoration:none; font-size:.95rem;
  transition:border-color .15s ease, background .15s ease;
}
.aphome-advertise-strip:hover,
.aphome-advertise-strip:focus{
  text-decoration:none; color:var(--aphome-navy);
  border-color:var(--aphome-navy); background:#e4eefb;
}
.aphome-advertise-strip i.fa-arrow-right{ color:var(--aphome-green); }