/* Biblical Vault homepage shelf redesign — load after style.css */
/* Stable controls and looping behaviour are provided by the small inline script.
   Container queries, scroll timelines, scroll-state queries and modern select styling enhance supported browsers. */

.home-masthead {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: clamp(390px, 43vw, 590px);
  padding: clamp(38px, 6vw, 82px) clamp(20px, 5vw, 76px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.home-masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 47%, color-mix(in srgb, var(--bg) 90%, transparent) 68%, var(--bg) 100%);
}

.home-masthead__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  align-items: center;
  max-width: 1288px;
  min-height: clamp(314px, 33vw, 452px);
  margin: 0 auto;
}

.home-masthead__inner > :first-child { position: relative; z-index: 2; }

.home-masthead__brand {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
}

.home-masthead__crest {
  display: block;
  flex: 0 0 auto;
  width: clamp(68px, 9vw, 118px);
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .28));
}

.home-masthead__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--gold-bright);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.home-masthead h1 {
  margin: 0;
  color: #fffdf8;
  font: 400 clamp(38px, 4.5vw, 64px)/1.02 'Libre Baskerville', Georgia, serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.home-masthead__intro {
  max-width: 590px;
  margin: clamp(21px, 3vw, 31px) 0 0;
  color: #d7dae0;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.62;
}

.home-masthead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.home-masthead__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(29px, 4vw, 49px);
  border-top: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
}

.home-masthead__stats span {
  padding: 14px 18px 0 0;
  color: #bec4cd;
  font-size: 11px;
}

.home-masthead__stats span + span {
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
}

.home-masthead__stats b {
  display: block;
  margin-bottom: 4px;
  color: #ffe0a0;
  font: 400 20px/1.1 'Libre Baskerville', Georgia, serif;
}

/* The existing Revelation artwork is an atmospheric layer, not a framed card. */
.home-masthead__art {
  position: absolute;
  z-index: 0;
  inset: -9% -8% -9% 40%;
  margin: 0;
  pointer-events: none;
}

.home-masthead__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 30%, transparent 57%, color-mix(in srgb, var(--bg) 32%, transparent) 76%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 79%, var(--bg) 100%);
}

.home-masthead__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  opacity: .79;
  filter: saturate(.74) contrast(1.08) brightness(.83);
}

/* Shelf / carousel */
.home-shelf {
  --shelf-gap: 16px;
  --shelf-card: 160px;
  container-type: inline-size;
  padding: 0 0 clamp(34px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.home-shelf__head,
.home-shelf__hint,
.home-library-discovery {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 76px);
}

.home-shelf__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

.home-shelf__head h2,
.home-shelf__head p { margin: 0; }

.home-shelf__head h2 {
  color: #fbf8f1;
  font: 400 clamp(20px, 2.2vw, 29px)/1.2 'Libre Baskerville', Georgia, serif;
}

.home-shelf__head p {
  margin-top: 4px;
  color: #b6bdc7;
  font-size: 12px;
  line-height: 1.4;
}

.home-shelf__actions,
.home-shelf__controls {
  display: flex;
  align-items: center;
}

.home-shelf__actions { gap: 11px; }
.home-shelf__controls { gap: 5px; }

.home-shelf__control {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line));
  border-radius: 50%;
  color: #ffdc97;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  font: 400 18px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, scale .2s ease;
}

.home-shelf__control:hover,
.home-shelf__control:focus-visible {
  border-color: var(--gold-bright);
  color: #fff8e8;
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  scale: 1.06;
}

.home-shelf__control:focus-visible,
.home-shelf__shuffle:focus-visible {
  outline: 2px solid #ffe0a0;
  outline-offset: 3px;
}

.home-shelf__shuffle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line));
  color: #ffdc97;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.home-shelf__shuffle:hover {
  border-color: var(--gold-bright);
  color: #fff8e8;
  background: color-mix(in srgb, var(--gold) 20%, transparent);
}

.home-shelf__viewport {
  position: relative;
  container-type: inline-size;
  --shelf-gap: clamp(12px, 1.5cqi, 22px);
  --shelf-card: clamp(132px, 13.8cqi, 178px);
  --shelf-edge: max(20px, calc((100cqi - 1288px) / 2));
  width: 100%;
  overflow: clip;
}

/* One real list only. The script moves fully off-screen cards to the opposite end,
   which preserves the visual position while keeping every visible book interactive. */
.home-shelf__scroll {
  display: flex;
  gap: var(--shelf-gap);
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  overscroll-behavior-block: none;
  padding: 10px var(--shelf-edge) 19px;
  scroll-snap-type: inline proximity;
  scroll-padding-inline: var(--shelf-edge);
  scroll-behavior: smooth;
  scroll-timeline-name: --library-shelf-scroll;
  scroll-timeline-axis: inline;
  touch-action: pan-x pinch-zoom;
  cursor: grab;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%);
}

.home-shelf__scroll:active { cursor: grabbing; }
.home-shelf__scroll::-webkit-scrollbar { display: none; }

.home-shelf__book {
  display: grid;
  flex: 0 0 var(--shelf-card);
  grid-template-rows: auto minmax(2.8em, auto);
  gap: 10px;
  min-width: 0;
  color: inherit;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  text-decoration: none;
  translate: 0 0;
  transition: translate .32s cubic-bezier(.2, .8, .2, 1), filter .25s ease;
}

.home-shelf__cover {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: clip;
  border: 1px solid rgba(238, 227, 199, .18);
  background: var(--panel-2) var(--cover) center / cover no-repeat;
  box-shadow: 0 14px 29px rgba(0, 0, 0, .25);
  transition: border-color .25s ease, box-shadow .32s ease, scale .32s ease;
}

.home-shelf__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .04);
  pointer-events: none;
}

.home-shelf__title {
  display: -webkit-box;
  overflow: hidden;
  color: #ece9e1;
  font: 600 12px/1.32 'DM Sans', Arial, sans-serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-shelf__book:hover,
.home-shelf__book:focus-visible { translate: 0 -7px; }

.home-shelf__book:hover .home-shelf__cover,
.home-shelf__book:focus-visible .home-shelf__cover {
  border-color: #f0c66c;
  box-shadow: 0 23px 42px rgba(0, 0, 0, .4);
  scale: 1.018;
}

.home-shelf__book:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 5px; }

.home-shelf__hint {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 4px;
  color: #aeb5bf;
  font-size: 11px;
  line-height: 1.45;
}

.home-shelf__hint b { color: #ffdc97; font-weight: 700; }

/* A scroll-linked reveal is purely decorative; unsupported browsers still get the full carousel. */
@supports (animation-timeline: view(inline)) {
  .home-shelf__book {
    animation-name: shelf-card-enter;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view(inline);
    animation-range: entry 0% cover 34%;
  }

  @keyframes shelf-card-enter {
    from { opacity: .45; scale: .94; }
    to { opacity: 1; scale: 1; }
  }
}

/* Scroll-state queries are progressive styling for a snapped item, not functional dependency. */
@supports (container-type: scroll-state) {
  .home-shelf__book { container-type: scroll-state; }

  @container scroll-state(snapped: inline) {
    .home-shelf__cover {
      border-color: color-mix(in srgb, var(--gold-bright) 80%, #fff);
      box-shadow: 0 20px 40px rgba(0, 0, 0, .42);
    }
  }
}

@supports selector(.home-shelf:has(.home-shelf__book:focus-visible)) {
  .home-shelf:has(.home-shelf__book:focus-visible) .home-shelf__book:not(:focus-visible) { opacity: .63; }
}

/* Experimental CSS Carousel controls supplement, never replace, the stable buttons above. */
@supports selector(.home-shelf__scroll::scroll-button(inline-start)) {
  .home-shelf__scroll::scroll-button(inline-start),
  .home-shelf__scroll::scroll-button(inline-end) {
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line));
    border-radius: 50%;
    color: #ffdc97;
    background: var(--bg-soft);
  }
}

/* Search and video discovery */
.home-library-discovery {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(30px, 4vw, 60px);
  padding-top: clamp(38px, 5vw, 64px);
  padding-bottom: clamp(38px, 5vw, 64px);
}

.home-quick-search h2,
.home-video-readings h2 {
  margin: 0;
  color: #fbf8f1;
  font: 400 clamp(23px, 2.5vw, 33px)/1.2 'Libre Baskerville', Georgia, serif;
}

.home-quick-search__description {
  max-width: 610px;
  margin: 9px 0 0;
  color: #c1c7d0;
  font-size: 13px;
  line-height: 1.55;
}

.home-quick-search__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px auto;
  gap: 9px;
  margin-top: 18px;
}

.home-quick-search__field,
.home-quick-search__form select {
  min-width: 0;
  min-height: 50px;
  border: 1px solid rgba(235, 224, 196, .3);
  border-radius: 0;
  color: #fffdf8;
  background: #0a1019;
  font: 13px 'DM Sans', Arial, sans-serif;
}

.home-quick-search__field { padding: 0 14px; }
.home-quick-search__field::placeholder { color: #9ba4b0; }
.home-quick-search__form select { padding: 0 10px; }
.home-quick-search__form .btn { min-height: 50px; white-space: nowrap; }
.home-quick-search__field:focus-visible,
.home-quick-search__form select:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 2px; }

/* Enhances the native filter on browsers that ship customizable selects; others retain the regular accessible select. */
@supports (appearance: base-select) {
  .home-quick-search__form select,
  .home-quick-search__form select::picker(select) { appearance: base-select; }

  .home-quick-search__form select::picker(select) {
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
    color: #fffdf8;
    background: #101823;
  }
}

.home-quick-search__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.home-quick-search__links a {
  padding: 7px 9px;
  border: 1px solid var(--line);
  color: #d0d5dc;
  font-size: 11px;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.home-quick-search__links a:hover,
.home-quick-search__links a:focus-visible {
  border-color: #e3ba65;
  color: #fff7e2;
  background: color-mix(in srgb, var(--gold) 13%, transparent);
}

.home-video-readings {
  padding-left: clamp(0px, 4vw, 54px);
  border-left: 1px solid var(--line);
}

.home-video-readings__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.home-video-readings__head .text-link { font-size: 11px; white-space: nowrap; }

.home-video-readings__list {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.home-video-reading {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 18px;
  gap: 13px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background .2s ease;
}

.home-video-reading:hover h3,
.home-video-reading:focus-visible h3 { color: #ffdc97; }
.home-video-reading:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 3px; }

.home-video-reading__thumb {
  position: relative;
  height: 62px;
  overflow: hidden;
  background: var(--panel-2);
}

.home-video-reading__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.2) brightness(.89);
}

.home-video-reading__duration {
  position: absolute;
  bottom: 5px;
  left: 5px;
  padding: 3px 5px;
  color: #fffdf8;
  background: rgba(4, 8, 14, .9);
  font-size: 9px;
}

.home-video-reading h3 {
  margin: 0;
  color: #f4f1e9;
  font: 400 15px/1.25 'Libre Baskerville', Georgia, serif;
  transition: color .2s ease;
}

.home-video-reading p {
  margin: 4px 0 0;
  color: #b9c0ca;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-video-reading__arrow { color: #ffdc97; font-size: 17px; }

.home-video-readings__note {
  margin: 12px 0 0;
  color: #bec5ce;
  font-size: 11px;
  line-height: 1.5;
}

@container (inline-size < 780px) {
  .home-shelf__viewport {
    --shelf-card: clamp(116px, 25cqi, 160px);
    --shelf-gap: 13px;
    --shelf-edge: 20px;
  }

  .home-shelf__scroll {
    scroll-padding-inline: var(--shelf-edge);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  }

  .home-shelf__head { align-items: flex-start; padding-top: 17px; padding-bottom: 14px; }
  .home-shelf__head p { display: none; }
}

@media (max-width: 860px) {
  .home-masthead { min-height: auto; }
  .home-masthead__inner,
  .home-library-discovery { grid-template-columns: 1fr; }
  .home-masthead__inner { min-height: 420px; }
  .home-masthead__art { inset: 0 -38% 0 28%; opacity: .64; }
  .home-video-readings { padding-left: 0; border-left: 0; }
}

@media (max-width: 620px) {
  .home-masthead { padding-inline: 18px; }
  .home-masthead__inner { min-height: 450px; align-items: start; padding-top: 18px; }
  .home-masthead__brand { align-items: flex-start; }
  .home-masthead__crest { width: 62px; }
  .home-masthead__art { inset: 8% -58% 0 16%; opacity: .48; }
  .home-masthead__intro { max-width: 88%; }
  .home-masthead__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .home-masthead__stats span,
  .home-masthead__stats span + span { margin-left: 0; padding-right: 10px; padding-left: 10px; }
  .home-masthead__stats span:first-child { padding-left: 0; }
  .home-shelf__actions { gap: 8px; }
  .home-shelf__shuffle { min-height: 36px; padding-inline: 9px; font-size: 10px; }
  .home-shelf__hint { display: block; }
  .home-shelf__hint span:last-child { display: block; margin-top: 5px; }
  .home-library-discovery { padding-inline: 18px; }
  .home-quick-search__form { grid-template-columns: 1fr auto; }
  .home-quick-search__form select { grid-column: 1 / -1; }
  .home-video-reading { grid-template-columns: 92px minmax(0, 1fr) 14px; gap: 10px; }
  .home-video-reading__thumb { height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-shelf__scroll { scroll-behavior: auto; }
  .home-shelf__book,
  .home-shelf__cover,
  .home-shelf__control,
  .home-shelf__shuffle,
  .home-video-reading h3 { animation: none !important; transition: none; }
}