/* RNS tile photos + homepage flow (2026-10-27)
   Loaded after styles.min.css from includes/header.php.
   Images live in assets/img/tiles/ (800x500, object-fit: cover). */

/* Smooth anchored flow, with room for the sticky header */
html { scroll-behavior: smooth; }
section[id], aside[id] { scroll-margin-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Photo at the top of a card/tile */
.tile-photo {
  display: block;
  width: calc(100% + 2.5rem);
  max-width: none;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  margin: -1.25rem -1.25rem 1rem;
  border-radius: 8px 8px 0 0;
  background: #0f172a;
}
.cards article:has(.tile-photo) { overflow: hidden; padding-top: 1.25rem; }
.cards article:has(.tile-photo) > .tile-photo:first-child { margin-top: -1.25rem; }

/* Full-bleed visual band between flow sections (Raven-style wanderlust band) */
.photo-band {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  background: #0b1220 center / cover no-repeat;
}
.photo-band .container { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; }
.photo-band::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,18,32,.94), rgba(11,18,32,.62), rgba(11,18,32,.88));
}
.photo-band h2 { max-width: 640px; }

/* "What's included" checklist tiles in #how-it-works */
.includes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}
.includes-grid article {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
}
.includes-grid h3 { margin-bottom: .5rem; }
.includes-grid p { color: var(--muted); margin: 0; }
@media (max-width: 980px) { .includes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .includes-grid { grid-template-columns: 1fr; } .tile-photo { border-radius: 8px 8px 0 0; } }

/* Booking / triage closing section */
.booking-band { text-align: center; }
.booking-band .hero-actions { justify-content: center; }
.booking-band p { max-width: 720px; margin-inline: auto; }
.booking-phone { display: inline-block; margin-top: 1rem; color: #7dd3fc; font-weight: 800; text-decoration: none; font-size: 1.15rem; }

/* ===== Round 2 (2026-10-27): same tile system on every page =====
   Feng Shui: ONE spacing scale everywhere — 1rem grid gap, 1.25rem card
   padding, 8px radius, images 800x500 (aspect 8/5) so grids never shift.
   Grid items stretch, so every row is equal height on every page. */
.service-grid article:has(.tile-photo),
.story-card:has(.tile-photo),
.case-link-card:has(.tile-photo) { overflow: hidden; }
.cards article, .service-grid article, .story-card, .case-link-card { height: 100%; }

/* Blog post header photo */
.article-hero-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 8 / 5;
  object-fit: cover; border-radius: 8px; margin: 0 0 1.5rem; background: #0f172a;
}

/* ===== Left-scrolling tile strip (calm marquee) =====
   Pure CSS, linear 38s loop, duplicated group = seamless.
   Pause on hover/focus ONLY on true hover devices (@media hover:hover +
   pointer:fine) — touch devices can never pause-stick it via sticky :hover.
   Reduced-motion = swipeable row, no animation (respected, never overridden). */
.tile-strip-band { padding: 2.75rem 0; overflow: hidden; }
.tile-strip-band .section-head { margin-bottom: 0; }
.tile-strip {
  overflow: hidden; margin-top: 1.4rem;
}
.tile-strip-track { display: flex; width: max-content; }
.tile-strip-group { display: flex; flex-shrink: 0; gap: 1rem; padding-right: 1rem; }
.tile-strip-card {
  flex: 0 0 280px; display: block; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  color: var(--text); text-decoration: none;
}
.tile-strip-card img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; background: #0f172a; }
.tile-strip-card span { display: block; padding: .85rem 1rem; font-weight: 700; }
@media (max-width: 760px) { .tile-strip-card { flex-basis: 260px; } }
@media (prefers-reduced-motion: reduce) {
  .tile-strip { overflow-x: auto; }
}

/* ===== Shorter menu (2026-10-27): fewer rows, same font/tap targets ===== */
.nav-submenu-toggle { display: none; }
@media (min-width: 901px) and (max-width: 1180px) {
  .site-nav a, .nav-parent { padding-left: .5rem; padding-right: .5rem; }
}
@media (max-width: 900px) {
  .site-nav { max-height: calc(100dvh - 84px); overflow-y: auto; }
  .nav-group { grid-template-columns: 1fr auto; align-items: stretch; }
  .nav-submenu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; margin-left: .25rem;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--panel); color: var(--text); font: inherit; font-weight: 800;
  }
  .nav-submenu-toggle .chev { transition: transform .2s ease; }
  .nav-group.expanded .nav-submenu-toggle .chev { transform: rotate(180deg); }
  /* Collapsed by default on mobile. The base stylesheet's .nav-group:hover /
     :focus-within rules (specificity 0-3-0) would otherwise force submenus
     open on tap/focus and defeat the accordion — override them here with
     higher-specificity selectors so ONLY .expanded opens a submenu. */
  .site-nav .nav-group:hover .nav-submenu,
  .site-nav .nav-group:focus-within .nav-submenu,
  .site-nav .nav-submenu { display: none; grid-column: 1 / -1; }
  .site-nav .nav-group.expanded .nav-submenu { display: grid; }
}