/* Basilica Cistern — site-specific refinements (dark-luxury, atmospheric) */

:root[data-site="basilica-cistern"] {
  --facts-cols: 4;
  --trust-cols: 4;
  --hero-overlay: radial-gradient(ellipse 80% 60% at 50% 100%, oklch(from var(--color-accent) 60% 0.12 h / 0.18) 0%, transparent 60%),
                  radial-gradient(ellipse 60% 50% at 30% 0%, oklch(from var(--color-secondary) 45% 0.08 h / 0.16) 0%, transparent 65%);
}

/* Hero: cinematic underground mood */
.bc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-tint);
  padding-block: clamp(40px, 5.5vw, 72px);
}
.bc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(70% 55% at 22% 28%, oklch(from var(--color-accent) 68% 0.12 h / 0.28) 0%, transparent 62%),
    radial-gradient(55% 50% at 88% 88%, oklch(from var(--color-secondary) 55% 0.1 h / 0.18) 0%, transparent 65%),
    radial-gradient(100% 100% at 50% 50%, transparent 40%, oklch(from var(--color-bg-deep) 10% 0.01 h / 0.5) 100%);
  pointer-events: none;
  z-index: 0;
}
.bc-hero > * { position: relative; z-index: 1; }

.bc-hero__grid {
  display: grid;
  gap: clamp(20px, 3.4vw, 44px);
  align-items: center;
}
@media (min-width: 960px) { .bc-hero__grid { grid-template-columns: 1.1fr 1fr; } }

.bc-h1 {
  font-family: var(--font-display);
  font-weight: 380;
  letter-spacing: -0.024em;
  font-size: var(--step-5);
  line-height: 1.03;
  color: var(--color-ink);
  text-wrap: balance;
  margin: var(--s-4) 0 var(--s-5);
}
.bc-h1 em {
  font-style: italic;
  color: var(--color-accent-ink);
  font-weight: 380;
}

/* Water-ripple column motif for hero visual */
.bc-hero__visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: 0 30px 80px -30px oklch(from var(--color-bg-deep) 5% 0.01 h / 0.8);
}
.bc-hero__visual img { position: absolute; inset: 0; 
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.88) saturate(0.92);
}
.bc-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, oklch(from var(--color-bg-deep) 10% 0.01 h / 0.55) 100%);
  pointer-events: none;
}

/* Candlelight divider — thin bronze with central dot */
.bc-ornament {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-accent);
  margin-block: var(--s-4);
}
.bc-ornament::before,
.bc-ornament::after {
  content: "";
  height: 1px;
  width: 56px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.6;
}
.bc-ornament__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

/* Atmospheric dark card — used for editorial + trust + confidence sections */
.bc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-4);
  transition: border-color .2s;
}
.bc-card:hover { border-color: oklch(from var(--color-accent) 40% 0.08 h / 0.5); }

/* Column cluster SVG motif */
.bc-columns {
  color: var(--color-accent);
  opacity: 0.65;
}

/* Medusa quote mark */
.bc-quote-mark {
  font-family: var(--font-display);
  font-size: clamp(80px, 10vw, 140px);
  line-height: 0.8;
  color: var(--color-accent);
  opacity: 0.35;
  font-style: italic;
}

/* Subtle bronze glow on primary buttons within this site */
:root[data-site="basilica-cistern"] .btn--primary {
  box-shadow: 0 8px 32px -8px oklch(from var(--color-accent) 50% 0.14 h / 0.5);
}
:root[data-site="basilica-cistern"] .btn--primary:hover {
  box-shadow: 0 12px 40px -8px oklch(from var(--color-accent) 55% 0.16 h / 0.7);
}

/* Reflective water strip — used at section breaks */
.bc-waterline {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, oklch(from var(--color-accent) 60% 0.1 h / 0.4) 50%, transparent 100%);
  margin-block: clamp(28px, 3.6vw, 48px);
}

/* Light section invert — used for readability islands in the mostly-dark layout */
.bc-island {
  background: oklch(from var(--color-ink) 96% 0.006 90);
  color: oklch(20% 0.01 230);
  border-radius: var(--r-5);
  padding: clamp(32px, 5vw, 72px);
}
.bc-island h2, .bc-island h3, .bc-island h4 { color: oklch(15% 0.012 230); }
.bc-island .eyebrow { color: oklch(45% 0.08 50); }
.bc-island p { color: oklch(30% 0.01 230); }

/* Fact strip for hero */
.bc-hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 0;
  margin-top: var(--s-7);
  border: 1px solid var(--color-line);
  border-radius: var(--r-3);
  background: oklch(from var(--color-bg-deep) l c h / 0.5);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.bc-hero__fact {
  padding: var(--s-4) var(--s-5);
  border-right: 1px solid var(--color-line-soft);
}
.bc-hero__fact:last-child { border-right: 0; }
.bc-hero__fact-val {
  font-family: var(--font-display);
  font-size: var(--step-md);
  color: var(--color-accent-ink);
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bc-hero__fact-lbl {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 4px;
}

/* ---------------------------------------------------------------
   BREADCRUMB UI (basilica)
--------------------------------------------------------------- */
.bc-breadcrumb {
  padding: 14px 0 4px;
  font-family: var(--font-mono);
  font-size: var(--step-fine);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  border-bottom: 1px solid oklch(from var(--color-line) l c h / 0.4);
}
.bc-breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.bc-breadcrumb__sep {
  color: var(--color-line);
  user-select: none;
}
.bc-breadcrumb a {
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}
.bc-breadcrumb a:hover {
  color: var(--color-accent-ink);
}
.bc-breadcrumb [aria-current="page"] {
  color: var(--color-ink);
  font-weight: 500;
}

/* ---------------------------------------------------------------
   PRINT STYLESHEET (basilica)
--------------------------------------------------------------- */
@media print {
  /* Force white background + dark text for ink savings */
  :root[data-site="basilica-cistern"],
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  *, *::before, *::after {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: economy;
    print-color-adjust: economy;
  }
  /* Hide UI chrome — header, footer nav, sticky CTA, mobile menu */
  .site-header, .site-footer, .sticky-cta,
  [data-mobile-nav], [data-sticky-cta],
  .nav-toggle, .lang-switch,
  .skip-link {
    display: none !important;
  }
  /* Reveal full URL after links */
  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #444 !important;
    word-break: break-all;
  }
  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }
  /* No widows/orphans */
  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
  }
  p, li, blockquote {
    orphans: 3;
    widows: 3;
  }
  /* Avoid breaking inside cards */
  .bc-pkg, .bc-faq-item, .bc-highlight, .v-clause, .a-clause, .w-highlight,
  .review-card, .f-item, .sm-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Remove italic <em> color tinting (use plain underline accent) */
  em {
    font-style: italic !important;
    color: inherit !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  /* Image sizing */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Tables — keep readable */
  table {
    border-collapse: collapse !important;
  }
  table th, table td {
    border: 1px solid #999 !important;
    padding: 6px 10px !important;
  }
  /* Page margins */
  @page {
    margin: 18mm 16mm;
    size: A4;
  }
}

/* ---------------------------------------------------------------
   TOUCH TARGET ENHANCEMENT (mobile, basilica)
   WCAG 2.2 AA requires 24×24 minimum target size.
   Inline links in paragraphs are exempt; standalone link lists
   need padding to meet the bar.
--------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .site-footer__col li a,
  .footer-col li a,
  .bc-footer__col li a {
    display: inline-block;
    padding-block: 6px;
    min-height: 24px;
  }
  .bc-breadcrumb a {
    padding: 6px 4px;
    min-height: 24px;
    display: inline-block;
  }
  .primary-nav a {
    padding: 10px 0;
    min-height: 28px;
  }
}

/* ---------------------------------------------------------------
   MOBILE HEADER + HERO FIXES (basilica)
   - Hide brand meta below header on mobile (free horizontal space)
   - Reorder hero so image is FIRST on mobile (no full-text first view)
--------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Tighten brand on mobile — hide subtitle */
  :root[data-site="basilica-cistern"] .brand__meta {
    display: none;
  }
  /* Mobile hero: image first, then text */
  :root[data-site="basilica-cistern"] .bc-hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
  }
  :root[data-site="basilica-cistern"] .bc-hero__visual { position: relative; 
    order: -1;
    aspect-ratio: 16/10;
    margin-inline: calc(-1 * var(--page-gutter));
    border-radius: 0;
  }
  /* Reduce hero padding on mobile so image is visible immediately */
  :root[data-site="basilica-cistern"] .bc-hero {
    padding-block: clamp(20px, 4vw, 40px) clamp(24px, 3.8vw, 40px);
  }
  /* Better h1 spacing under image */
  :root[data-site="basilica-cistern"] .bc-h1 {
    margin-top: var(--s-3);
  }
}