/* ============================================================================
   where-we-deliver/deliveries.css — the /where-we-deliver/ page
   ----------------------------------------------------------------------------
   Hand-kept. Loaded after tokens.css + template.css, so it uses the site's
   own palette, type and spacing tokens and the header, menu, footer and FAQ
   rows are styled by template.css exactly as on the homepage. The markup is
   written by scripts/build-deliveries.mjs.

   Remember: 1rem = 10px on this site (html is 62.5%).
   Breakpoints follow tokens.css: phone <= 667, tablet 668–979, desktop.
   ========================================================================== */

.wwd {
  --wwd-side: var(--grid-col);
  --wwd-line: rgb(53 161 205 / 0.22);
  --wwd-card: linear-gradient(165deg, rgb(53 161 205 / 0.10), rgb(13 28 38 / 0.55) 55%, rgb(0 0 0 / 0.6));
  --wwd-glow: 0 28px 60px -34px rgb(53 161 205 / 0.45);
}
@media (min-width: 668px) and (max-width: 979px) { .wwd { --wwd-side: calc(var(--grid-col) * 0.5); } }
@media (max-width: 667px) { .wwd { --wwd-side: var(--sp-2); } }

.wwd .section { padding: var(--sp-4) var(--wwd-side) 0; }
.wwd .body-text { color: rgb(255 255 255 / 0.86); }
.wwd a:not([class]) { color: var(--c-accent); text-decoration: underline; text-underline-offset: 0.2em; }

.wwd-kicker { margin-bottom: var(--sp-2); letter-spacing: 0.14em; }
.wwd-head { max-width: 62rem; margin-bottom: var(--sp-3); }
.wwd-head .title-lines { margin-bottom: var(--sp-2); }

/* ------------------------------------------------------------------ hero */
.wwd-hero.section {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--sp-3);
  min-height: min(92svh, 96rem);
  padding-top: calc(var(--header-full, 13rem) + var(--sp-2));
  padding-bottom: var(--sp-2);
}
.wwd-hero::before {   /* a soft brand-blue haze behind the sketch */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 78% 55%, rgb(2 81 134 / 0.42), transparent 70%),
    radial-gradient(40% 40% at 10% 0%, rgb(53 161 205 / 0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.wwd-hero__text { min-width: 0; }
.wwd-hero__h1 .title-lines { margin-bottom: var(--sp-2); }
.wwd-hero__sub { max-width: 40ch; font-size: max(var(--fs-body), 1.8rem); line-height: 1.5; }
.wwd-hero__jump { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: var(--sp-3); }
.wwd-hero__art { min-width: 0; display: flex; justify-content: center; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: var(--sp-3);
  color: var(--c-white-56);
  letter-spacing: 0.12em;
}
.crumbs a { color: var(--c-white); display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { color: var(--c-accent); }
.crumbs [aria-current] { color: var(--c-accent); }

.wwd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 2.2rem;
  border: 1px solid var(--c-accent);
  background: var(--c-accent);
  color: #000;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
  transition: background-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.wwd-btn--ghost { background: transparent; color: var(--c-accent); }
.has-hover .wwd-btn:hover { background: var(--c-accent-light); border-color: var(--c-accent-light); color: #000; }
.wwd-btn:focus-visible { outline: 1px solid var(--c-white); outline-offset: 3px; }

/* The route sketch: Banga, and a line out to each delivery region. */
.routes { display: block; width: 100%; max-width: 52rem; height: auto; max-height: 64rem; overflow: visible; }
/* route-sketch:start — build-deliveries.mjs copies everything between these
   two markers into assets/media/delivery-routes.svg (the homepage map), so
   both pages draw the map from these same rules. */
/* the faint coastline under the lines: present, never louder than the routes */
.routes__land {
  fill: rgb(53 161 205 / 0.06);
  stroke: rgb(111 195 228 / 0.32);
  stroke-width: 0.8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.route__base {
  fill: none;
  stroke: rgb(53 161 205 / 0.28);
  stroke-width: 1;
  stroke-dasharray: 100;
  animation: route-draw 1.8s var(--e-out) both;
  animation-delay: calc(0.4s + var(--i) * 0.18s);
}
.route__flow {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 0.5 3.5;
  animation: route-flow 18s linear infinite, route-fade 1.2s ease-out both;
  animation-delay: calc(var(--i) * -2.2s), calc(1.2s + var(--i) * 0.18s);
}
.route__dot { fill: var(--c-accent); }
.route__ring,
.route__home-ring {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: route-ping 3.6s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.7s);
}
.route__home { fill: var(--c-white); }
.route__home-ring { stroke: var(--c-white); }
.route__label {
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: rgb(255 255 255 / 0.72);
}
.route__label--home { fill: var(--c-white); font-weight: 500; }

/* plane (Visayas) and truck (Caraga) travelling along their routes */
.route__vehicle { fill: var(--c-white); filter: drop-shadow(0 0 3px rgb(53 161 205 / 0.95)); }
.route__vehicle--truck circle { fill: var(--c-accent); }
.route__vehicle--still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .route__vehicle--moving { display: none; }
  .route__vehicle--still { display: inline; }
}

@keyframes route-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes route-flow { to { stroke-dashoffset: -100; } }
@keyframes route-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes route-ping {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
/* route-sketch:end */

/* ----------------------------------------------------------------- areas */
.areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.area {
  position: relative;
  padding: 2.8rem 2.6rem 2.6rem;
  background: var(--wwd-card);
  border: 1px solid var(--wwd-line);
  box-shadow: var(--wwd-glow);
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
}
.has-hover .area:hover { border-color: var(--c-accent-60); transform: translateY(-2px); }
.area__head { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 2rem; }
.area__pin {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-accent-40);
  background: rgb(53 161 205 / 0.12);
  color: var(--c-accent);
}
.area__pin svg { width: 22px; height: 22px; }
.area__group { color: var(--c-white-56); letter-spacing: 0.14em; margin: 0 0 0.4rem; }
.area__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 3.8rem;
  line-height: 1;
  letter-spacing: var(--ls);
  color: var(--c-white);
}
.area__places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.place {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 3.6rem;
  padding: 0.5rem 1.2rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.86);
}
/* a place with a delivery in the log: links to its card */
.place--delivered {
  min-height: 44px;
  border-color: var(--c-accent);
  color: var(--c-white);
  background: rgb(53 161 205 / 0.16);
}
.has-hover .place--delivered:hover { background: var(--c-accent); color: #000; }
.place__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 0 var(--c-accent-60);
  animation: place-pulse 2.4s ease-out infinite;
}
.has-hover .place--delivered:hover .place__dot { background: #000; }
@keyframes place-pulse { 70%, 100% { box-shadow: 0 0 0 7px rgb(53 161 205 / 0); } }

.wwd-pickup {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  max-width: 78rem;
  margin: var(--sp-3) 0 0;
  padding: 2rem 2.4rem;
  border-left: 2px solid var(--c-accent);
  background: rgb(53 161 205 / 0.07);
}
.wwd-pickup__pin { flex: 0 0 auto; color: var(--c-accent); }
.wwd-pickup__pin svg { display: block; width: 22px; height: 22px; margin-top: 0.1rem; }
.wwd .wwd-nearby { margin-top: var(--sp-2); max-width: 78rem; color: var(--c-white-56); }

/* ------------------------------------------------------ latest deliveries */
.drops { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.drop { scroll-margin-top: 12rem; }
.drop__card {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  background: var(--wwd-card);
  border: 1px solid var(--wwd-line);
  box-shadow: var(--wwd-glow);
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.drop:target .drop__card {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent), 0 30px 80px -30px rgb(53 161 205 / 0.6);
}
.drop__media { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #000; }
.drop__media--one { grid-template-columns: 1fr; }
.drop__photo { position: relative; display: block; overflow: hidden; background: var(--c-ink); }
.drop__photo picture, .drop__photo img { display: block; width: 100%; height: auto; }
.drop__photo img { aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--e-out); }
.has-hover .drop__photo:hover img { transform: scale(1.04); }
.drop__photo:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
/* Desktop: the text column can be taller than the photos; let the photos
   fill the card's height (cropped from the centre) instead of leaving a gap. */
@media (min-width: 980px) {
  .drop__photo picture, .drop__photo img { height: 100%; }
  .drop__photo img { aspect-ratio: auto; min-height: 100%; }
}

/* the white "Delivered to" label, as on our posts */
.drop__label {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem 0.7rem 0.9rem;
  background: var(--c-white);
  color: var(--c-accent-deep);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.35);
}
.drop__label svg { width: 15px; height: 15px; }
.drop__zoom {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  padding: 0.5rem 0.9rem;
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--c-white);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
}

.drop__body { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-3) var(--sp-3); min-width: 0; }
.drop__kicker { color: var(--c-accent); letter-spacing: 0.16em; margin: 0 0 1.2rem; }
.drop__place {
  margin: 0 0 1.6rem;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 5.6rem;
  line-height: 0.98;
  letter-spacing: var(--ls);
  color: var(--c-white);
}
.drop__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin: 0 0 2rem;
  color: var(--c-white-56);
  letter-spacing: 0.1em;
}
.drop__meta time { color: var(--c-accent); }
.drop__text { margin: 0; max-width: 44ch; }
.drop__note { margin: -1rem 0 1.6rem; color: var(--c-white-56); letter-spacing: 0.1em; }
/* one photo: a narrower photo column, so a single 4:5 photo is not blown up
   to the full two-photo width */
.drop__card--one { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
@media (max-width: 979px) { .drop__card--one { grid-template-columns: 1fr; } }
/* a delivery with no photo: one column, the text alone */
.drop__card--text { grid-template-columns: 1fr; }
.drop__card--text .drop__body { padding: var(--sp-3); }

/* ------------------------------------------------------------------- FAQ
   Rows are the homepage's .faq__item (template.css). Only the margins
   change, to sit on this page's side margin. */
.wwd .wwd-faq.section { padding: var(--sp-4) var(--wwd-side) 0; }
.wwd-faq .faq__head,
.wwd-faq .faq__groups { margin-left: 0; margin-right: 0; }
.wwd-faq .faq__groups { margin-top: 0; }
.wwd-faq .faq__a { color: rgb(255 255 255 / 0.72); }

/* --------------------------------------------------------- call to action */
.wwd-cta.section { padding-bottom: var(--sp-4); }
.wwd-cta__box {
  position: relative;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--wwd-line);
  background:
    radial-gradient(90% 120% at 0% 0%, rgb(53 161 205 / 0.26), transparent 60%),
    radial-gradient(70% 90% at 100% 100%, rgb(2 81 134 / 0.45), transparent 70%),
    #03090d;
  box-shadow: var(--wwd-glow);
  overflow: hidden;
}
.wwd-cta__h .title-lines { margin-bottom: var(--sp-2); }
.wwd-cta__box .body-text { max-width: 44ch; }
.wwd-cta__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: var(--sp-3); }
.wwd-cta__actions .act { min-height: 56px; padding: 0 2.4rem; font-size: 1.4rem; }
.wwd-cta__actions .act svg { width: 18px; height: 18px; }
.wwd-cta__actions .act__num { font-size: 1.6rem; }

/* -------------------------------------------------------------- the zoom */
.zoom {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(92vw, 57.6rem);
  max-height: 92svh;
  overflow: visible;
}
.zoom::backdrop { background: rgb(0 0 0 / 0.86); backdrop-filter: blur(4px); }
.zoom img { display: block; width: 100%; height: auto; max-height: 88svh; object-fit: contain; }
.zoom__close {
  position: absolute;
  top: -5.2rem;
  right: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-white-20);
  background: #000;
  color: var(--c-white);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1199px) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drop__place { font-size: 4.6rem; }
}

@media (max-width: 979px) {
  .wwd-hero.section { grid-template-columns: 1fr; min-height: 0; gap: var(--sp-2); }
  .wwd-hero__art .routes { max-width: 44rem; }
  .drop__card { grid-template-columns: 1fr; }
}

@media (max-width: 667px) {
  .wwd .section { padding-top: var(--sp-4); }
  .wwd-hero.section { padding-top: calc(var(--header-full, 11rem) + var(--sp-1)); }
  .crumbs { margin-bottom: var(--sp-1); }
  /* the phone display size (72px) leaves "Where we" half the width: a
     quarter larger still fits at 375 with room to spare */
  .wwd-hero__h1 .title-lines { font-size: calc(var(--fs-d2) * 1.25); }
  .wwd-hero__sub { font-size: 1.7rem; }
  .wwd-hero__jump { flex-direction: column; gap: 1rem; }
  .wwd-hero__jump .wwd-btn { width: 100%; }
  .wwd-hero__art .routes { max-width: 28rem; }
  .route__label { font-size: 15px; }

  .areas { grid-template-columns: 1fr; gap: 1.4rem; }
  .area { padding: 2.2rem 2rem; }
  .area__name { font-size: 3.4rem; }
  .area__places { gap: 0.6rem; }
  .place { min-height: 3.2rem; padding: 0.4rem 0.9rem; font-size: 1.2rem; letter-spacing: 0.04em; }
  .place--delivered { min-height: 44px; }
  .wwd-pickup { padding: 1.6rem 1.6rem; gap: 1.2rem; }

  /* photos: a swipe strip, the next photo peeking in */
  .drop__media {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: transparent;
    padding: 0.8rem 0.8rem 0;
  }
  .drop__media::-webkit-scrollbar { display: none; }
  .drop__photo { flex: 0 0 86%; scroll-snap-align: start; }
  .drop__media--one .drop__photo { flex-basis: 100%; }
  .drop__body { padding: 2.4rem 2rem 2.8rem; }
  .drop__place { font-size: 4rem; }

  .wwd-cta__box { padding: var(--sp-3) 2rem; }
  .wwd-cta__actions { flex-direction: column; }
  .wwd-cta__actions .act { width: 100%; }
}