/* =====================================================================
   VESPERS — Teachings (library) page
   Inherits tokens from main.css (:root). Mobile-first.
   ===================================================================== */

/* ---------- Library hero ---------- */
.tch-hero{position:relative; overflow:hidden; background:var(--ink-900); color:var(--on-dark-1);
  padding-top:clamp(104px,15vw,150px); padding-bottom:clamp(40px,6vw,76px);}
.tch-hero-bg{position:absolute; inset:0; z-index:0;}
.tch-hero-bg img{width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04);
  transition:opacity 1.1s var(--ease-veil), transform 12s var(--ease-veil);}
.js .tch-hero-bg img.lit{opacity:.42; transform:scale(1);}
.tch-hero-scrim{position:absolute; inset:0; z-index:1; background:
  linear-gradient(100deg, rgba(20,22,46,.94) 0%, rgba(20,22,46,.8) 46%, rgba(20,22,46,.6) 100%),
  radial-gradient(64% 60% at 18% 30%, rgba(226,203,148,.18), transparent 62%);}
.tch-hero .hero-arch{bottom:-26%;}
.tch-hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,52px); align-items:center;}
.tch-hero-copy{max-width:60ch;}
.tch-hero h1{color:var(--on-dark-1); font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.02; margin:12px 0 0; text-shadow:0 2px 40px rgba(20,22,46,.5);}
.tch-hero .eyebrow{margin-top:14px;}
.tch-hero .lead{color:var(--on-dark-2); margin-top:16px; max-width:50ch;}
.tch-hero-stats{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; font:500 .9rem/1 var(--font-body); color:var(--on-dark-2);}
.tch-hero-stats b{font:600 1.05rem/1 var(--font-display); color:var(--gilt-300);}
.tch-hero-stats .dot{width:4px; height:4px; border-radius:50%; background:var(--border-on-dark);}
@media (min-width:940px){ .tch-hero-inner{grid-template-columns:1.05fr .95fr;} }

/* spotlight card (latest) */
.tch-spot{display:block; background:rgba(251,248,240,.05); border:1px solid var(--border-on-dark); border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-lg); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.tch-spot-ph{display:block; width:100%; padding:0; border:0; aspect-ratio:16/10; cursor:pointer;}
.tch-spot-ph::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 52%, rgba(20,22,46,.5));}
.tch-spot-play{position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%;
  background:rgba(251,248,240,.95); color:var(--ink-900); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); transition:transform .4s var(--ease);}
.tch-spot-flag{position:absolute; z-index:3; top:14px; left:14px; font:700 .62rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-900); background:var(--gilt-500); padding:7px 12px; border-radius:999px; box-shadow:var(--glow-gold);}
.tch-spot-body{display:flex; flex-direction:column; padding:clamp(20px,2.4vw,28px);}
.tch-spot-body .tag{font:700 .66rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gilt-300);}
.tch-spot-title{font:600 clamp(1.55rem,2.4vw,2.05rem)/1.1 var(--font-display); color:var(--on-dark-1); margin:9px 0 0; letter-spacing:-.01em;}
.tch-spot-verse{font:italic 500 1.02rem/1.5 var(--font-display); color:var(--gilt-100); margin-top:12px; padding-left:14px; border-left:2px solid var(--hairline-gold);}
.tch-spot-verse em{display:inline-block; font-style:normal; font-family:var(--font-body); font-weight:700; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3); margin-left:4px;}
.tch-spot-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font:500 .82rem/1.4 var(--font-body); color:var(--on-dark-2); margin-top:14px;}
.tch-spot-meta vm-icon{color:var(--gilt-300);}
.tch-spot-meta .dot{width:4px; height:4px; border-radius:50%; background:var(--border-on-dark); flex:0 0 auto;}
.tch-spot .qlink{margin-top:16px;}
@media (hover:hover){ .tch-spot:hover{transform:translateY(-5px); box-shadow:var(--shadow-xl); border-color:var(--hairline-gold);}
  .tch-spot:hover .tch-spot-play{transform:translate(-50%,-50%) scale(1.07);} }

/* ---------- The library ---------- */
.tch-lib{background:var(--parchment-50);}
.tch-lib-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.tch-lib-head .kicker{margin-top:10px;}
.tch-sub{font:400 .98rem/1.6 var(--font-body); color:var(--fg2); margin-top:10px; max-width:54ch;}

/* filter chips (base styles live in main.css) */
.tch-filter{margin-top:clamp(22px,3vw,30px);}

/* toolbar: theme filter + text search on one row */
.tch-toolbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:clamp(22px,3vw,30px);}
.tch-toolbar .tch-filter{margin-top:0; flex:1 1 auto;}
.tch-search{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; min-width:200px; max-width:280px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:999px; padding:9px 16px; transition:border-color .25s, box-shadow .25s;}
.tch-search vm-icon{color:var(--fg3); flex:0 0 auto;}
.tch-search input{border:0; background:none; width:100%; font:500 .92rem/1.2 var(--font-body); color:var(--fg1); -webkit-appearance:none; appearance:none;}
.tch-search input:focus{outline:none;}
.tch-search input::placeholder{color:var(--fg3);}
.tch-search:focus-within{border-color:var(--gilt-500); box-shadow:0 0 0 3px rgba(198,164,92,.16);}
@media (max-width:560px){ .tch-search{width:100%; max-width:none;} }

/* card grid */
.tch-grid{display:grid; grid-template-columns:1fr; gap:clamp(18px,2.2vw,26px); margin-top:clamp(24px,3vw,34px);}
.tch-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.tch-card.is-hidden{display:none;}
.tch-card-ph{display:block; width:100%; padding:0; aspect-ratio:16/10; cursor:pointer;}
.tch-card-ph::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 58%, rgba(20,22,46,.34)); transition:background .4s var(--ease);}
.tch-card-play{position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%) scale(.85); opacity:0; width:50px; height:50px; border-radius:50%;
  background:rgba(251,248,240,.95); color:var(--ink-900); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); transition:opacity .35s var(--ease), transform .35s var(--ease);}
.tch-card-dur{position:absolute; z-index:3; right:11px; bottom:11px; display:inline-flex; align-items:center; gap:4px; font:700 .66rem/1 var(--font-body); color:#fff; background:rgba(20,22,46,.66); padding:6px 9px; border-radius:999px;}
.tch-card-kind{position:absolute; z-index:3; left:11px; top:11px; display:inline-flex; align-items:center; gap:6px; font:700 .6rem/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-dark-1); background:rgba(20,22,46,.6); padding:6px 10px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
.tch-card-kind vm-icon{color:var(--gilt-300);}
.tch-card-body{display:flex; flex-direction:column; padding:18px 20px 22px; flex:1;}
.tch-card-body .tag{font:700 .64rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--eyebrow-ink);}
.tch-card-title{font:600 1.3rem/1.14 var(--font-display); color:var(--fg1); margin:8px 0 0; letter-spacing:-.01em;}
.tch-card-ex{font:400 .9rem/1.6 var(--font-body); color:var(--fg2); margin-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.tch-card-meta{display:flex; align-items:center; gap:7px; font:500 .78rem/1.3 var(--font-body); color:var(--fg3); margin-top:auto; padding-top:14px;}
.tch-card-meta vm-icon{color:var(--fg3);}
@media (hover:hover){ .tch-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
  .tch-card:hover .tch-card-play, .tch-card-ph:focus-visible .tch-card-play{opacity:1; transform:translate(-50%,-50%) scale(1);}
  .tch-card:hover .tch-card-ph::after{background:linear-gradient(transparent 42%, rgba(20,22,46,.5));}
  .tch-card:hover .tch-card-title{color:var(--accent-strong);} }
/* touch devices: the play affordance is the primary action, so keep it visible */
@media (hover:none){ .tch-card-play{opacity:1; transform:translate(-50%,-50%) scale(1);} }
@media (min-width:620px){ .tch-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .tch-grid{grid-template-columns:repeat(3,1fr);} }

/* ---------- Listen (audio devotionals) ---------- */
.tch-listen{background:var(--surface-warm); border-top:1px solid var(--border-soft);}
.tch-listen-head{max-width:60ch;}
.tch-listen-head .lead{margin-top:12px; max-width:54ch;}
.tch-listen-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:clamp(24px,3vw,34px);}
.tch-listen-card{display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--border-soft); border-radius:16px;
  padding:14px 18px 14px 14px; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.tch-listen-art{flex:0 0 84px; width:84px; height:84px; border-radius:14px;}
.tch-listen-art::after{content:""; position:absolute; inset:0; background:linear-gradient(150deg, rgba(20,22,46,.1), rgba(20,22,46,.5));}
.tch-listen-icon{position:absolute; z-index:3; inset:0; display:flex; align-items:center; justify-content:center; color:var(--gilt-100);}
.tch-listen-body{flex:1; min-width:0; display:flex; flex-direction:column;}
.tch-listen-body .tag{font:700 .62rem/1.3 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--eyebrow-ink);}
.tch-listen-title{font:600 1.18rem/1.15 var(--font-display); color:var(--fg1); margin:5px 0 0;}
.tch-listen-meta{display:flex; align-items:center; gap:7px; font:500 .78rem/1.3 var(--font-body); color:var(--fg2); margin-top:6px;}
.tch-listen-meta vm-icon{color:var(--gilt-700);}
@media (hover:hover){ .tch-listen-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
  .tch-listen-card:hover .tch-listen-title{color:var(--accent-strong);} }
@media (min-width:760px){ .tch-listen-grid{grid-template-columns:repeat(3,1fr);} .tch-listen-card{flex-direction:column; align-items:flex-start; text-align:left;}
  .tch-listen-art{width:100%; height:148px; flex:0 0 auto;} }