/* heritage.css — the AGBU Lebanon history ribbon.
   ------------------------------------------------------------------------------
   The archive came off Tiki-Toki, and this recreates the shape people knew it by:
   a dark, full-bleed band you drag sideways, photographs pinned to a date axis,
   a year ruler underneath, and a minimap to jump decades at a time.

   The stage stays dark in BOTH site themes on purpose — it is a cinema for the
   photographs, not a document. So it hard-codes its own palette instead of using
   the --color-* tokens, which flip with the theme.

   Layout maths lives in history.php, which writes three custom properties:
     --x      per card / tick — its distance from the start of the era, in px at 1x
     --lane   per card — which row it was packed into (0 = nearest the top)
     --ht-lanes, --w  per track — how many rows deep, and how wide at 1x
   Zoom then scales everything by --ht-zoom. Lanes are packed at 1x, the most
   crowded the ribbon ever gets, so zooming in can only ever add space. */

/* The panel is a sibling of the stage, not a child — it has to be, since it is fixed to
   the viewport — so the palette is declared on both. Keep them in one rule: tokens that
   drift apart here are invisible until a colour goes missing on one side only. */
.ht-stage, .ht-panel{
  --ht-zoom: 1;
  --ht-card-w: 172px;
  /* 92 photo + 8 pad + 14 date + 3 gap + 35 (2 title lines) + 10 pad, + 4 so a
     descender on the second line isn't shaved off by .ht-meta's overflow */
  --ht-card-h: 166px;
  --ht-lane-h: 180px;
  --ht-ruler-h: 58px;
  --ht-gold: #c9a14a;
  --ht-ink: #e8edf7;
  --ht-dim: #93a2bd;
  --ht-line: rgba(201,161,74,.55);
  --ht-surface: rgba(255,255,255,.055);
  --ht-border: rgba(255,255,255,.12);
  color: var(--ht-ink);
}

.ht-stage{
  position: relative;
  background:
    radial-gradient(120% 90% at 12% 0%, #1a2b4d 0%, rgba(26,43,77,0) 60%),
    linear-gradient(180deg, #0d1526 0%, #0a1120 55%, #0d1526 100%);
  border-block: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
}

/* ---------- control bar ---------- */
.ht-bar{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px clamp(14px, 4vw, 34px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,14,26,.72);
  backdrop-filter: blur(7px);
}
.ht-eras{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.ht-era{
  display:inline-block; padding:6px 12px; border-radius:999px; text-decoration:none;
  font-size:.82rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  color: var(--ht-dim); border:1px solid transparent; transition: all 160ms ease;
}
.ht-era:hover{color:var(--ht-ink); background:rgba(255,255,255,.07);}
.ht-era.is-active{
  color:#0d1526; background:linear-gradient(180deg,#e0bd6c,#c9a14a);
  border-color:#e0bd6c; box-shadow:0 2px 10px rgba(201,161,74,.32);
}
.ht-tools{display:flex; gap:8px; align-items:center; margin-left:auto;}
.ht-search{display:flex; gap:6px;}
.ht-search input{
  width: clamp(140px, 20vw, 230px); padding:7px 11px; font-size:.86rem;
  color:var(--ht-ink); background:rgba(255,255,255,.07);
  border:1px solid var(--ht-border); border-radius:999px;
}
.ht-search input::placeholder{color:#7d8ba6;}
.ht-search input:focus{outline:2px solid var(--ht-gold); outline-offset:1px; background:rgba(255,255,255,.1);}
.ht-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-width:32px; height:32px; padding:0 10px; font-size:.84rem; font-weight:600;
  color:var(--ht-ink); background:rgba(255,255,255,.07);
  border:1px solid var(--ht-border); border-radius:8px; cursor:pointer;
  text-decoration:none; transition: all 150ms ease;
}
.ht-btn:hover:not(:disabled){background:rgba(255,255,255,.14); border-color:var(--ht-line); color:#fff;}
.ht-btn:disabled{opacity:.35; cursor:default;}
.ht-count{font-size:.8rem; color:var(--ht-dim); white-space:nowrap;}
.ht-count a{color:var(--ht-gold);}

/* ---------- the scrolling viewport ---------- */
.ht-viewport{
  position:relative; overflow-x:auto; overflow-y:hidden;
  scrollbar-color: rgba(201,161,74,.5) transparent; scrollbar-width: thin;
  cursor: grab; overscroll-behavior-x: contain;
}
.ht-viewport.is-dragging{cursor: grabbing; scroll-behavior:auto !important; user-select:none;}
.ht-viewport::-webkit-scrollbar{height:10px;}
.ht-viewport::-webkit-scrollbar-track{background:rgba(255,255,255,.05);}
.ht-viewport::-webkit-scrollbar-thumb{background:rgba(201,161,74,.45); border-radius:99px;}
.ht-viewport::-webkit-scrollbar-thumb:hover{background:rgba(201,161,74,.7);}

.ht-track{
  position:relative;
  width: calc(var(--w) * var(--ht-zoom) * 1px);
  height: calc(var(--ht-lanes) * var(--ht-lane-h) + var(--ht-ruler-h));
  padding-block: 20px 0;
  will-change: width;
}

/* the gold time axis, sitting on top of the ruler */
.ht-axis{
  position:absolute; left:0; right:0; height:2px;
  top: calc(var(--ht-lanes) * var(--ht-lane-h) + 20px);
  background:linear-gradient(90deg, rgba(201,161,74,0), var(--ht-line) 3%, var(--ht-line) 97%, rgba(201,161,74,0));
  pointer-events:none;
}

/* year ticks along the ruler */
.ht-tick{
  position:absolute; left: calc(var(--x) * var(--ht-zoom) * 1px);
  top: calc(var(--ht-lanes) * var(--ht-lane-h) + 20px);
  transform: translateX(-50%); text-align:center; pointer-events:none; user-select:none;
}
.ht-tick::before{content:""; display:block; width:1px; height:9px; margin:0 auto; background:var(--ht-line);}
.ht-tick span{
  display:block; margin-top:5px; font-size:.74rem; font-weight:700;
  letter-spacing:.06em; color:#a9b6cd;
}
.ht-tick.is-decade::before{height:15px; width:2px; background:var(--ht-gold);}
.ht-tick.is-decade span{font-size:.9rem; color:var(--ht-gold);}

/* ---------- a story card ---------- */
.ht-card{
  position:absolute;
  /* --x is the card's CENTRE, i.e. its own date on the ruler. Pulling back half a width
     here rather than in PHP is what keeps a card over its tick at every zoom level: --x
     scales with the zoom, the card's width never does. */
  left: calc(var(--x) * var(--ht-zoom) * 1px);
  transform: translateX(-50%);
  /* Anchored by the BOTTOM, so lane 0 hugs the axis and the stack grows upward from it.
     Anchoring by the top instead would float a quiet stretch of the archive three rows
     up on long stems, and would leave the shorter text-only cards ragged along the
     bottom of each lane instead of squared off against the timeline.
     (--ht-ruler-h - 20px) is where the axis sits; +14px clears it. */
  bottom: calc(var(--ht-ruler-h) - 6px + var(--lane) * var(--ht-lane-h));
  width: var(--ht-card-w);
  /* Fixed, not content-sized: --ht-card-h is what the lane spacing and the stem length
     are both derived from, so a long title must clip rather than push the card taller
     and into the row below. NO overflow:hidden here — it would eat the stem, which
     hangs outside the card. .ht-shot does its own clipping instead. */
  height: var(--ht-card-h);
  display:flex; flex-direction:column;
  background: var(--ht-surface);
  border:1px solid var(--ht-border);
  border-radius:11px; text-decoration:none; color:inherit;
  box-shadow:0 3px 14px rgba(0,0,0,.4);
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
/* the hairline dropping from the card to the axis — what ties a photo to its date */
.ht-card::after{
  content:""; position:absolute; left:50%; top:100%; width:1px;
  height: calc(14px + var(--lane) * var(--ht-lane-h));
  background:linear-gradient(180deg, var(--ht-border), var(--ht-line));
  pointer-events:none;
}
.ht-card:hover, .ht-card:focus-visible{
  transform: translate(-50%, -4px);
  border-color: var(--ht-gold);
  box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(201,161,74,.35);
  z-index:5; outline:none;
}
.ht-card:focus-visible{outline:2px solid var(--ht-gold); outline-offset:2px;}
.ht-card.is-open{border-color:var(--ht-gold); box-shadow:0 0 0 2px var(--ht-gold); z-index:6;}

.ht-shot{
  position:relative; height:92px; background:#16233c; flex:0 0 auto;
  overflow:hidden; border-radius:10px 10px 0 0;
}
.ht-shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 400ms ease;
}
.ht-card:hover .ht-shot img{transform:scale(1.06);}
.ht-shot .ht-more{
  position:absolute; right:5px; bottom:5px; padding:1px 6px; border-radius:999px;
  font-size:.68rem; font-weight:700; color:#fff; background:rgba(8,14,26,.78);
  backdrop-filter:blur(3px);
}
/* entries with no photograph — 652 of them, so this has to look intended */
.ht-shot.is-empty{
  display:flex; align-items:center; justify-content:center; height:56px;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border-bottom:1px solid var(--ht-border);
}
.ht-shot.is-empty::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:var(--cat, var(--ht-gold)); opacity:.75;
}
/* 652 of the 1,593 entries have no photograph, so the text-only card is a design in its
   own right, not a broken one: a shorter head with a rule in its category colour. */
.ht-card:has(.is-empty){--ht-card-h:126px;}

.ht-meta{padding:8px 10px 10px; display:flex; flex-direction:column; gap:3px; min-height:0; overflow:hidden;}
.ht-when{
  font-size:.7rem; line-height:1.25; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--cat, var(--ht-gold)); flex:0 0 auto;
}
.ht-title{
  font-size:.83rem; font-weight:600; line-height:1.3; color:var(--ht-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  line-clamp:2; overflow:hidden;
}

/* category hues — a 2px cap on each card, and the colour of its date line */
.ht-card{border-top:2px solid var(--cat, transparent);}
.ht-c-education   {--cat:#5b9bd5;}
.ht-c-humanitarian{--cat:#e08a63;}
.ht-c-cultural    {--cat:#c9a14a;}
.ht-c-sports      {--cat:#57a773;}
.ht-c-social      {--cat:#b07bc4;}
.ht-c-scouts      {--cat:#4bbfa8;}
.ht-c-governance  {--cat:#8fa2c4;}
.ht-c-milestone   {--cat:#d9525f;}
.ht-c-other       {--cat:#7d8ba6;}

/* ---------- minimap ---------- */
.ht-minimap{
  position:relative; height:42px; margin:0 clamp(14px,4vw,34px) 14px;
  border:1px solid var(--ht-border); border-radius:9px;
  background:rgba(255,255,255,.035); cursor:pointer; overflow:hidden; touch-action:none;
}
.ht-mm-bars{position:absolute; inset:0; display:flex; align-items:flex-end; gap:1px; padding:5px 2px;}
.ht-mm-bars i{flex:1; background:rgba(201,161,74,.42); border-radius:1px 1px 0 0; min-height:2px;}
.ht-mm-win{
  position:absolute; top:0; bottom:0; min-width:14px;
  background:rgba(201,161,74,.2); border:1px solid var(--ht-gold);
  border-radius:5px; pointer-events:none;
}
.ht-mm-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#6f7d97;
  pointer-events:none;
}

/* ---------- the story panel ---------- */
.ht-panel{
  position:fixed; top:0; right:0; bottom:0; width:min(520px, 94vw); z-index:1200;
  background:#0d1526; color:var(--ht-ink);
  border-left:1px solid rgba(201,161,74,.35);
  box-shadow:-18px 0 46px rgba(0,0,0,.55);
  transform:translateX(102%); transition:transform 280ms cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; visibility:hidden;
}
.ht-panel.is-open{transform:none; visibility:visible;}
.ht-scrim{
  position:fixed; inset:0; z-index:1199; background:rgba(6,10,20,.62);
  opacity:0; visibility:hidden; transition:opacity 280ms ease, visibility 280ms;
  backdrop-filter:blur(2px);
}
.ht-scrim.is-open{opacity:1; visibility:visible;}
.ht-panel-head{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
}
.ht-panel-head .ht-count{margin-right:auto;}
.ht-panel-body{padding:16px 18px 30px; overflow-y:auto; flex:1;}
.ht-panel-body h1{font-size:1.3rem; line-height:1.25; margin:.3rem 0 .2rem; color:#fff;}
.ht-panel-body h2{font-size:1rem; font-weight:600; color:var(--ht-dim); margin:0 0 .5rem;}
.ht-panel-body h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ht-gold); margin:20px 0 8px;}
.ht-panel-body p{line-height:1.65; margin:.55rem 0;}
.ht-panel-body a{color:#e0bd6c;}
.ht-panel-body .ht-kicker{font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ht-dim);}
.ht-panel-body .ht-hy{border-top:1px dashed rgba(255,255,255,.16); padding-top:.7rem; margin-top:.7rem;}
.ht-panel-body figcaption{font-size:.78rem; color:var(--ht-dim); margin-top:4px; line-height:1.4;}
.ht-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
/* NOT scoped to the panel: a browser's default figure margin is 1em 40px, which on the
   entry page squeezed every photograph down to a sliver inside its grid cell. */
.ht-gallery figure{margin:0;}
.ht-gallery img{width:100%; height:130px; object-fit:cover; border-radius:8px; background:#16233c; display:block;}
.ht-gallery a:hover img{outline:2px solid var(--ht-gold); outline-offset:1px;}
.ht-doc{display:flex; align-items:center; justify-content:center; height:130px; border-radius:8px;
  background:rgba(255,255,255,.06); font-weight:700; font-size:.85rem;}
.ht-video{position:relative; padding-bottom:56.25%; height:0; margin:8px 0;}
.ht-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:9px;}
.ht-links{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;}
.ht-links a{display:block; padding:8px 11px; border:1px solid var(--ht-border); border-radius:8px;
  font-size:.85rem; text-decoration:none; background:rgba(255,255,255,.04); word-break:break-word;}
.ht-links a:hover{border-color:var(--ht-gold); background:rgba(201,161,74,.1);}
.ht-panel-load{padding:40px; text-align:center; color:var(--ht-dim);}
.ht-panel-body .ht-text{line-height:1.65; margin:.6rem 0;}
.ht-panel-body .ht-prevnext{display:flex; justify-content:space-between; gap:10px; margin-top:26px;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.1);}
.ht-panel-body .ht-prevnext .ht-btn{height:auto; padding:7px 11px; text-align:center; line-height:1.3;}

/* ---------- empty state ---------- */
.ht-empty{padding:70px 20px; text-align:center; color:var(--ht-dim);}
.ht-empty strong{display:block; font-size:1.1rem; color:var(--ht-ink); margin-bottom:6px;}

/* ---------- narrow screens: the ribbon becomes a column ----------
   Dragging a 44,000px track on a phone is miserable, so below 880px the same
   markup reflows into a plain vertical list. No JS branch, no second template. */
@media (max-width: 880px){
  .ht-viewport{overflow-x:hidden; cursor:auto;}
  .ht-track{width:auto !important; height:auto; display:flex; flex-direction:column; gap:10px;
    padding:14px clamp(12px,4vw,20px) 20px;}
  .ht-card{position:static; width:auto; flex-direction:row; align-items:stretch; transform:none;}
  .ht-card::after{display:none;}
  .ht-card:hover, .ht-card:focus-visible{transform:none;}
  .ht-shot{width:112px; height:auto; min-height:84px; flex:0 0 112px;}
  .ht-shot.is-empty{height:auto; min-height:84px; border-bottom:none; border-right:1px solid var(--ht-border);}
  .ht-meta{flex:1;}
  .ht-title{-webkit-line-clamp:2; line-clamp:2;}
  .ht-axis, .ht-tick, .ht-minimap{display:none;}
  .ht-tools{width:100%; margin-left:0;}
  .ht-search{flex:1;}
  .ht-search input{width:100%;}
  .ht-panel{width:100%;}
}

@media (prefers-reduced-motion: reduce){
  .ht-card, .ht-shot img, .ht-panel, .ht-scrim{transition:none !important;}
  .ht-card:hover{transform:none;}
  .ht-card:hover .ht-shot img{transform:none;}
}