/* ==========================================================================
   Thota Vaikuntam — /public-art/ and /public-art/heritage-walk-amritsar/
   Linked only on those two pages; builds on main.css tokens.
   Sections: 1 public art (light) · 2 heritage walk (dark) · 3 map
   ========================================================================== */

/* ============================================================ 1 public art */
/* intro: text only — no image that would repeat one of the works below (owner, 2026-09-10) */
.pa-intro .lede { max-width: none; margin-bottom: 0; }   /* one line on a desktop screen (owner) */

/* pull quote + parrot */
.pa-quote__container { position: relative; }   /* padding: the standard 60px .section block */
.pa-quote .quote { margin: 0; width: 70%; }
.pa-quote .parrot { top: 50%; right: var(--gutter); transform: translateY(-50%); width: clamp(120px, 10vw, 180px); }
.parrot picture, .parrot img { width: 100%; height: auto; }
@media (max-width: 1024px) { .pa-quote .parrot { display: none; } }

/* city head: the city name centred in the left half, its sentence in the right half, the quote's
   red rule between them at the page centre (owner, 2026-09-10) */
.pa-city + .pa-city { padding-top: 0; }   /* cities 60 apart, not the site's 120: less scrolling (owner 2026-09-22) */
.pa-city__head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px var(--gap-x); align-items: center;
  padding-bottom: 24px; margin-bottom: var(--gap-y); border-bottom: 1px solid var(--hairline);
}
.pa-city__head h2 { margin: 0; text-align: center; }
.pa-city__lede { margin: 0; max-width: 62ch; }
@media (min-width: 1025px) {
  .pa-city__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .pa-city__lede { border-left: 1px solid var(--red); padding: 6px 0 6px 40px; }
}

/* rows: [work | text | work]; a row without a right-hand work lets the text run across the rest.
   Photograph whole in a --row-h box, centred, its location centred beneath; text centred vertically.
   The works align to the row top, so both photo boxes share one baseline when one caption wraps longer.
   (Anchor offsets under the sticky header come from main.css's html scroll-padding-top.) */
.pa-rows { display: grid; gap: 60px 0; }
.pa-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px var(--gap-x); align-items: start; }
.pa-row__text { align-self: center; }
.pa-card .figure__media { position: relative; height: var(--row-h); background: transparent; }
.pa-card .figure__media picture { position: absolute; inset: 0; }
.pa-card .figure__media img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; background: transparent !important; }
.pa-card__body { padding-top: var(--cap-gap); text-align: center; }
.pa-card__body h3 { margin: 0 0 .3em; }   /* = .card__title → meta */
.pa-card__body h3:last-child { margin-bottom: 0; }
.pa-spec { margin: 0; }
.pa-row__text p { margin: 0 auto; max-width: 46ch; }
@media (min-width: 768px) {
  .pa-row--triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pa-row--triple .pa-card:first-child { grid-column: 1; }
  .pa-row--triple .pa-row__text { grid-column: 2; }
  .pa-row--triple .pa-card:last-child { grid-column: 3; }
  /* one work on its own: centred on the page */
  .pa-row--solo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pa-row--solo .pa-card { grid-column: 2; }
  /* one work with its text: the two centred together as a pair, no rule between them */
  .pa-row--pair { grid-template-columns: minmax(0, 320px) minmax(0, 46ch); justify-content: center; column-gap: var(--gap-x); }
  .pa-row--pair .pa-row__text p { margin: 0; }
}
@media (max-width: 460px) { .pa-card .figure__media { height: auto; } .pa-card .figure__media picture { position: static; } }

/* heritage walk closing panel */
.pa-heritage { background: var(--bg-soft); }   /* 60 of white above the band, 60 below it before the footer line */
.pa-heritage__link { display: block; }
.pa-heritage .feature__media .figure__media { background: var(--white); }
.pa-heritage .feature__body h2 { margin-bottom: .6em; }
.pa-heritage .feature__body p { max-width: 62ch; }

/* ============================================================ 2 heritage walk (dark) */
.page-heritage-walk main { background: #0A0A0A; }
.page-heritage-walk .site-footer { margin-top: 0; }
.hw { background: var(--white); color: var(--ink); padding-bottom: 60px; }
.hw a { color: inherit; }
.hw .section-head { border-color: var(--hairline); }
.hw .figure__media { background: var(--bg-soft); }
.hw .btn { border-color: var(--ink-2); color: var(--ink); }
.hw .btn:hover, .hw .btn:focus-visible { background: var(--ink-2); color: var(--white); }
.hw :focus-visible { outline-color: var(--ink); }

/* hero band: text only (owner 2026-09-10) — crumb, then title | intro, then the three stations across */
.hw-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px var(--gap-x); align-items: start; }
.hw-hero__title h1 { margin-bottom: .6em; }   /* heading → its sub-line */
.hw-crumb { font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-2); margin-bottom: 30px; }   /* = .breadcrumb */
.hw-crumb a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }   /* the link reads as a link, not as plain meta text */
.hw-crumb a:hover, .hw-crumb a:focus-visible { color: var(--ink); }
.hw-tagline { font-size: 1.65rem; line-height: 2.4rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--gold-hw); margin: 0; }
.hw-hero__body .lede { max-width: 62ch; }
.hw-hero__body p { max-width: 62ch; }
.hw-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gap-x); margin-top: 50px; border-top: 1px solid var(--hairline); }
.hw-index li { border-bottom: 1px solid var(--hairline); }
.hw-index a { display: flex; align-items: flex-start; gap: 12px; padding: 18px 0; font-size: var(--fs-meta); line-height: 2.1rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); text-decoration: none; }
.hw-index a:hover, .hw-index a:focus-visible { color: var(--ink); }
.hw-index__num { flex: 0 0 36px; color: var(--gold-hw); }
.hw-index__body { flex: 1 1 auto; min-width: 0; }
.hw-index__venue { display: block; color: var(--grey-2); text-transform: none; letter-spacing: 0; font-size: 1.3rem; }
@media (min-width: 1024px) {
  .hw-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hw-hero__body { padding-left: 50px; }
  .hw-index { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--hairline); }
  .hw-index li { border-bottom: 0; }
}

/* stations: alternating sticky splits */
.hw-stations { padding-top: 0; }
.hw-station { padding-top: 60px; border-top: 1px solid var(--hairline); }
.hw-station:first-child { padding-top: 0; border-top: 0; }   /* the station index above ends on its own hairline: 60 from it to the first station */
.hw-station + .hw-station { margin-top: 60px; }
.hw-station__figure .figure__media { background: var(--bg-soft); }
.hw-station__figure picture, .hw-station__figure img { width: 100%; height: auto; }
.hw-station__eyebrow { display: flex; align-items: baseline; gap: 14px; }
.hw-station__numeral { font-size: 2.1rem; line-height: 1; color: var(--gold-hw); letter-spacing: var(--track); }
.hw-station .split__body h2 { margin-bottom: .6em; }
.hw-station__venue { font-size: 1.65rem; line-height: 2.4rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); margin: 0 0 40px; }
.hw-spec { margin: 0 0 40px; border-top: 1px solid var(--hairline); }
.hw-spec__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0 20px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.hw-spec dt { font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); line-height: 2.1rem; padding-top: .35em; }
.hw-spec dd { margin: 0; }
.hw-station .split__body p { max-width: 62ch; }
.hw-pull { width: 100%; margin: 1.6em 0 2em; }
.hw-logo { width: 120px; margin-top: 30px; }
.hw-logo a { display: block; }
.hw-logo picture, .hw-logo img { width: 100%; height: auto; background: transparent !important; }
.hw-logo--invert img { filter: invert(1); }
@media (min-width: 1024px) {
  .hw-station--flip .split__media { order: 2; }
  .hw-station .split__body { padding-right: 40px; }
  .hw-station--flip .split__body { padding-right: 0; padding-left: 40px; }
}
@media (max-width: 460px) { .hw-spec__row { grid-template-columns: 110px minmax(0, 1fr); } }

/* legend under the map */
.hw-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px var(--gap-x); margin-top: 30px; }
.hw-legend__item { display: flex; align-items: flex-start; gap: 14px; }
.hw-legend__marker { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gold-hw); color: var(--gold-hw); font-size: 11px; letter-spacing: 0; line-height: 1; }
.hw-legend__text { font-size: var(--fs-meta); line-height: 2.1rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink); }
.hw-legend__text a { text-decoration: none; }
.hw-legend__venue { display: block; color: var(--grey-2); text-transform: none; letter-spacing: 0; font-size: 1.3rem; }
@media (max-width: 768px) { .hw-legend { grid-template-columns: minmax(0, 1fr); } }

/* partners */
.hw-partners__list { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 60px; }
.hw-partner { flex: 0 0 auto; max-width: 220px; }
.hw-partner__logo { width: 100%; }
.hw-partner__logo img { width: 100%; height: auto; background: transparent !important; }
.hw-partner__name { font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); }
@media (max-width: 768px) { .hw-partner { max-width: 40vw; } }
/* closing strip, as .prevnext: 60 → hairline → 30 → link */
.hw-back { padding-top: 0; }
.hw-back p { margin: 0; padding-top: 30px; border-top: 1px solid var(--hairline); max-width: none; }

/* ============================================================ 3 map (Leaflet, CARTO dark) */
.hw-map { position: relative; height: 500px; width: 100%; background: #0A0A0A; border: 1px solid var(--hairline); z-index: 1; }
.hw-map .leaflet-container { background: #0A0A0A; font-family: var(--ff); }
.hw-map .leaflet-tile-pane { filter: saturate(.8); }
@media (max-width: 768px) { .hw-map { height: 350px; } }

/* numbered markers */
.hw-marker { background: transparent; border: 0; }
.hw-marker__dot {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold-hw); color: #0A0A0A;
  font-family: var(--ff); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0;
  box-shadow: 0 0 0 4px rgba(201, 169, 110, .25);
}

/* popup + controls, restyled for the dark ground */
.hw-map .leaflet-popup-content-wrapper { background: #151515; color: #F5F0E8; border-radius: 0; box-shadow: 0 2px 20px rgba(0, 0, 0, .6); }
.hw-map .leaflet-popup-tip { background: #151515; }
.hw-map .leaflet-popup-content { margin: 16px 18px; font-family: var(--ff); font-weight: 300; font-size: 12px; line-height: 1.6; }
.hw-map .leaflet-popup-content p { margin: 0; }
.hw-popup__num { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hw); margin-bottom: 4px !important; }
.hw-popup__artist { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #F5F0E8; }
.hw-popup__title { color: #B0B0B0; }
.hw-popup__venue { color: #8C8C8C; }
.hw-map .leaflet-container a.leaflet-popup-close-button { color: #8C8C8C; }
.hw-map .leaflet-control-zoom a { background: #151515; color: #F5F0E8; border-color: #262626; }
/* 44px touch targets (Leaflet's .leaflet-touch default is 30px; the map element itself carries .leaflet-touch) */
.hw-map .leaflet-control-zoom a, .hw-map.leaflet-touch .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
.hw-map .leaflet-control-zoom a:hover { background: #262626; }
.hw-map .leaflet-bar { border: 1px solid #262626; box-shadow: none; }
.hw-map .leaflet-control-attribution { background: rgba(10, 10, 10, .8); color: #8C8C8C; font-family: var(--ff); font-size: 10px; }
.hw-map .leaflet-control-attribution a { color: #B0B0B0; text-decoration: underline; }   /* not by colour alone (WCAG 1.4.1) */