/* ==========================================================================
   WhereToBuyFilm — Location Detail  (Direction C · Hybrid)
   wtbf/static/wtbf/location-detail.css

   Load this after bootstrap.css in base.html:
     <link rel="stylesheet" href="{% vstatic 'wtbf/location-detail.css' %}">

   The WTBF design tokens are bundled here so this file is self-contained.
   If you later load a global tokens.css, remove the :root block below.

   Class namespace: ld-*  (no Bootstrap class collisions).
   ========================================================================== */

/* ── DESIGN TOKENS ─────────────────────────────────────────────────── */
:root {
  --ld-bg:             #f4f2ed;
  --ld-fg:             #2d2b28;
  --ld-card:           #f9f8f5;
  --ld-border:         #d9d5cc;
  --ld-muted:          #ebe8e2;
  --ld-muted-fg:       #7a756c;
  --ld-secondary:      #e8e5de;
  --ld-secondary-fg:   #3a3834;
  --ld-primary:        #2d2b28;
  --ld-primary-fg:     #f4f2ed;
  --ld-accent:         #d4a03d;
  --ld-accent-fg:      #2a220a;
  --ld-accent-hover:   #c79433;
  --ld-ink:            #181715;
  --ld-ink-fg:         #f4f2ed;
  --ld-ink-muted:      #b5b0a6;
  --ld-ink-border:     rgba(255,255,255,.12);
  --ld-destructive:    #b3423a;
  --ld-open:           #3f9d63;
  --ld-radius:         .4rem;
  --ld-radius-sm:      .25rem;
  --ld-radius-lg:      .5rem;
  --ld-radius-full:    9999px;
  --ld-sans:           "Inter", system-ui, -apple-system, sans-serif;
  --ld-display:        "Archivo", system-ui, sans-serif;
  --ld-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── UTILITY ────────────────────────────────────────────────────────── */
.ld-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── NOT-FOUND ──────────────────────────────────────────────────────── */
.ld-not-found {
  display: flex; align-items: center; justify-content: center;
  min-height: 40vh; padding: 3rem 1rem;
  background: var(--ld-bg);
}
.ld-not-found__inner { text-align: center; max-width: 32rem; }
.ld-not-found__inner h1 {
  font-family: var(--ld-display); font-size: 2.25rem; font-weight: 900;
  letter-spacing: -0.02em; margin: 0 0 1rem; color: var(--ld-fg);
}
.ld-not-found__inner p {
  color: var(--ld-muted-fg); font-family: var(--ld-sans);
  margin: 0 0 1.5rem;
}

/* ── TITLE BAND ─────────────────────────────────────────────────────── */
.ld-title-band {
  position: relative;
  background: var(--ld-ink);
  color: var(--ld-ink-fg);
  overflow: hidden;
}
.ld-title-band__grain {
  position: absolute; inset: 0;
  opacity: .3; mix-blend-mode: soft-light;
  background-image: var(--ld-grain);
  pointer-events: none;
}
.ld-title-band__glow {
  position: absolute; top: -120px; right: -80px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,61,.2), transparent 68%);
  pointer-events: none;
}
.ld-title-band__inner {
  position: relative;
  max-width: 72rem; margin: 0 auto;
  padding: 2rem 1.5rem 2.5rem;
}

/* breadcrumb */
.ld-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem;
  margin-bottom: 1rem;
  font-family: var(--ld-sans); font-size: .8rem;
}
.ld-breadcrumb__link {
  color: var(--ld-ink-muted); text-decoration: none; font-weight: 500;
  transition: color .15s;
}
.ld-breadcrumb__link:hover { color: var(--ld-ink-fg); }
.ld-breadcrumb__sep  { color: rgba(255,255,255,.2); margin: 0 .15rem; user-select: none; }
.ld-breadcrumb__current { color: var(--ld-ink-fg); font-weight: 600; }

/* name */
.ld-title-band__name {
  margin: 0;
  font-family: var(--ld-display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: var(--ld-ink-fg);
  text-wrap: balance;
}
.ld-title-band__name .ld-badge { vertical-align: middle; margin-left: .4rem; }

/* summary */
.ld-title-band__summary {
  margin: .875rem 0 0; max-width: 42rem;
  font-family: var(--ld-sans); font-size: 1rem; line-height: 1.65;
  color: var(--ld-ink-muted);
}

/* stat chips */
.ld-stat-chips {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.375rem;
}
.ld-stat-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem;
  border-radius: var(--ld-radius-full);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--ld-ink-border);
  color: var(--ld-ink-fg);
  font-family: var(--ld-sans); font-size: .8rem; font-weight: 600;
  white-space: nowrap;
}
.ld-stat-chip .bi { font-size: .875rem; color: var(--ld-accent); }
.ld-stat-chip__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ld-open); flex: none;
}
.ld-stat-chip--open .bi { color: var(--ld-open); }

/* title-band action row */
.ld-actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.5rem; }

/* ── BUTTONS ─────────────────────────────────────────────────────────  */
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 44px; padding: 0 1.125rem;
  border-radius: var(--ld-radius);
  font-family: var(--ld-sans); font-size: .875rem; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .18s, opacity .18s, color .18s, border-color .18s;
  line-height: 1;
}
.ld-btn .bi { font-size: .9375rem; }
.ld-btn--sm   { height: 36px; padding: 0 .875rem; font-size: .8125rem; }
.ld-btn--full { width: 100%; }

.ld-btn--accent  { background: var(--ld-accent);   color: var(--ld-accent-fg); }
.ld-btn--accent:hover { background: var(--ld-accent-hover); }

.ld-btn--primary { background: var(--ld-primary);  color: var(--ld-primary-fg); }
.ld-btn--primary:hover { opacity: .88; }

.ld-btn--secondary {
  background: var(--ld-secondary); color: var(--ld-secondary-fg);
  border-color: var(--ld-border);
}
.ld-btn--secondary:hover { background: var(--ld-muted); }

.ld-btn--ghost-ink {
  background: transparent; color: var(--ld-ink-fg);
  border-color: var(--ld-ink-border);
}
.ld-btn--ghost-ink:hover { background: rgba(255,255,255,.08); }

/* ── BADGES ─────────────────────────────────────────────────────────── */
.ld-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--ld-sans); font-size: .7rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: var(--ld-radius-full);
  white-space: nowrap;
}
.ld-badge--confirmed { background: rgba(63,157,99,.15);  color: var(--ld-open); }
.ld-badge--stale     { background: rgba(179,66,58,.12);  color: var(--ld-destructive); }
.ld-badge--main      { background: var(--ld-accent);     color: var(--ld-accent-fg); }
.ld-badge--type      { background: var(--ld-secondary);  color: var(--ld-secondary-fg); }

/* ── ALERTS ─────────────────────────────────────────────────────────── */
.ld-alert {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .625rem .875rem; border-radius: var(--ld-radius);
  font-family: var(--ld-sans); font-size: .8125rem; line-height: 1.5;
}
.ld-alert--warning {
  background: rgba(179,66,58,.08);
  color: var(--ld-destructive);
  border: 1px solid rgba(179,66,58,.2);
}
.ld-alert .bi { flex: none; margin-top: .125rem; }
.ld-panel-warning {
  padding: .75rem .875rem; border-radius: var(--ld-radius);
  background: var(--ld-muted); color: var(--ld-muted-fg);
  font-family: var(--ld-sans); font-size: .875rem;
  border: 1px solid var(--ld-border);
}

/* ── PAGE BODY ──────────────────────────────────────────────────────── */
.ld-body { background: var(--ld-bg); }

/* Grid: rail is first in DOM (mobile-first).
   On desktop CSS assigns it to the right column. */
.ld-content-wrap {
  max-width: 72rem; margin: 0 auto;
  padding: 2.75rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "rail" "main";
  gap: 2.75rem;
  align-items: start;
}
@media (min-width: 960px) {
  .ld-content-wrap {
    grid-template-columns: minmax(0, 1fr) 332px;
    grid-template-areas: "main rail";
  }
}
.ld-main { grid-area: main; display: flex; flex-direction: column; gap: 2.5rem; }
.ld-rail { grid-area: rail; display: flex; flex-direction: column; gap: 1rem; }

/* ── SECTION HEAD ───────────────────────────────────────────────────── */
.ld-section { display: flex; flex-direction: column; gap: 1rem; }
.ld-section__head {
  display: flex; flex-direction: column; gap: .375rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ld-border);
}
.ld-section__eyebrow {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--ld-sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ld-accent);
}
.ld-section__eyebrow .bi { font-size: .8rem; }
.ld-section__title {
  margin: 0;
  font-family: var(--ld-display); font-size: 1.5rem; font-weight: 900;
  letter-spacing: -0.01em; line-height: 1.1;
  color: var(--ld-fg);
}

/* ── BRANCH TABS ────────────────────────────────────────────────────── */
.ld-branch-tabs {
  display: flex; flex-wrap: wrap; gap: .375rem;
  padding: .5rem;
  background: var(--ld-card);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-lg);
}
.ld-branch-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .875rem;
  border-radius: var(--ld-radius);
  font-family: var(--ld-sans); font-size: .8125rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  border: 1px solid var(--ld-border);
  background: transparent; color: var(--ld-muted-fg);
  transition: background .15s, color .15s, border-color .15s;
}
.ld-branch-tab:hover { background: var(--ld-muted); color: var(--ld-fg); }
.ld-branch-tab[aria-selected="true"] {
  background: var(--ld-ink); color: var(--ld-ink-fg);
  border-color: transparent;
}
.ld-branch-tab__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ld-muted-fg); flex: none;
}
.ld-branch-tab__dot--open { background: var(--ld-open); }

/* ── BRANCH PANEL ───────────────────────────────────────────────────── */
.ld-branch-panel {
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-lg);
  background: var(--ld-card);
  overflow: hidden;
}
.ld-branch-panel__cols {
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .ld-branch-panel__cols { grid-template-columns: minmax(0,1fr) 210px; }
}
.ld-branch-panel__info {
  padding: 1.375rem 1.5rem;
  display: flex; flex-direction: column; gap: .625rem;
  border-right: 1px solid var(--ld-border);
}
.ld-branch-panel__hours {
  padding: 1.375rem 1.25rem;
  background: var(--ld-bg);
}
.ld-branch-panel__name-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
}
.ld-branch-panel__name {
  margin: 0;
  font-family: var(--ld-display); font-size: 1.25rem; font-weight: 800;
  letter-spacing: -0.01em; color: var(--ld-fg);
}
.ld-branch-panel__actions {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .375rem;
}

/* contact rows */
.ld-contact-row {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0;
  font-family: var(--ld-sans); font-size: .875rem; line-height: 1.5;
  color: var(--ld-muted-fg); text-decoration: none;
}
.ld-contact-row .bi { font-size: .9375rem; margin-top: .1rem; flex: none; color: var(--ld-accent); }
.ld-contact-row--link:hover { color: var(--ld-fg); }
.ld-contact-row--venue { color: var(--ld-fg); font-weight: 600; }
.ld-contact-row .ld-ext { font-size: .6875rem; opacity: .45; }

/* ── WORKING HOURS ──────────────────────────────────────────────────── */
.ld-hours__eyebrow {
  display: flex; align-items: center; gap: .4rem; margin: 0 0 .75rem;
  font-family: var(--ld-sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ld-accent);
}
.ld-hours__eyebrow .bi { font-size: .8rem; }
.ld-hours-table { width: 100%; border-collapse: collapse; }
.ld-hours-row td {
  padding: .4375rem 0;
  font-family: var(--ld-sans); font-size: .8125rem;
  border-bottom: 1px solid var(--ld-border);
}
.ld-hours-row:last-child td { border-bottom: none; }
.ld-hours-row__day   { color: var(--ld-muted-fg); width: 40%; }
.ld-hours-row__time  { color: var(--ld-fg); font-weight: 600; text-align: right; }
.ld-hours-row__closed { color: var(--ld-muted-fg); font-weight: 400; }
.ld-hours-row--today .ld-hours-row__day { color: var(--ld-accent); font-weight: 700; }

/* ── CAPABILITIES ───────────────────────────────────────────────────── */
.ld-capabilities__grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 600px) {
  .ld-capabilities__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.ld-cap-section { display: flex; flex-direction: column; gap: 2rem; }
.ld-cap-sub     { display: flex; flex-direction: column; gap: .75rem; }

.ld-offer-list, .ld-dev-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .2rem;
}
.ld-offer-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .625rem; border-radius: var(--ld-radius);
  font-family: var(--ld-sans); font-size: .875rem; color: var(--ld-fg);
  text-decoration: none; font-weight: 500;
  transition: background .15s;
}
.ld-offer-link::before {
  content: ""; display: block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ld-accent); flex: none;
}
.ld-dev-list .ld-offer-link::before { background: var(--ld-open); }
.ld-offer-link:hover { background: var(--ld-muted); }

.ld-film-tags {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .375rem;
}
.ld-film-tag {
  display: inline-flex; align-items: center;
  padding: .3rem .75rem; border-radius: var(--ld-radius-full);
  background: var(--ld-secondary); color: var(--ld-secondary-fg);
  font-family: var(--ld-sans); font-size: .8rem; font-weight: 600;
  text-decoration: none; border: 1px solid var(--ld-border);
  transition: background .15s, border-color .15s;
}
.ld-film-tag:hover { background: var(--ld-muted); border-color: var(--ld-primary); }

/* ── RAIL CARDS ─────────────────────────────────────────────────────── */
.ld-rail-card {
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-lg);
  background: var(--ld-card); overflow: hidden;
}
.ld-rail-card--community { border-style: dashed; background: var(--ld-bg); }
.ld-rail-card__head {
  display: flex; align-items: center; gap: .5rem;
  padding: .8125rem 1.125rem;
  border-bottom: 1px solid var(--ld-border);
  font-family: var(--ld-sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ld-muted-fg);
}
.ld-rail-card__head .bi { font-size: .875rem; color: var(--ld-accent); }
.ld-rail-card__head-link {
  margin-left: auto; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600; color: var(--ld-accent); text-decoration: none;
}
.ld-rail-card__head-link .bi { font-size: .75rem; }
.ld-rail-card__body     { padding: 1.125rem; }
.ld-rail-card__body--np { padding: 0; }
.ld-rail-card__pad      { padding: .875rem 1.125rem; }
.ld-rail-card__actions  { margin-top: .875rem; }

/* map thumbnail placeholder */
.ld-map-thumb {
  height: 140px; background: var(--ld-muted);
  border-bottom: 1px solid var(--ld-border);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .375rem;
}
.ld-map-thumb .bi { font-size: 2rem; color: var(--ld-accent); }
.ld-map-thumb__label {
  font-family: var(--ld-sans); font-size: .8rem; color: var(--ld-muted-fg);
}
/* hide map card on mobile — At a glance already has the CTA */
.ld-rail-card--map { display: none; }
@media (min-width: 960px) { .ld-rail-card--map { display: block; } }

/* ── AT-A-GLANCE ROWS ───────────────────────────────────────────────── */
.ld-glance-row {
  display: flex; align-items: center; gap: .625rem;
  padding: .5625rem 0; border-bottom: 1px solid var(--ld-border);
}
.ld-glance-row:last-of-type { border-bottom: none; }
.ld-glance-row__icon {
  flex: none; width: 1.125rem; font-size: .875rem; color: var(--ld-muted-fg);
  display: flex; align-items: center; justify-content: center;
}
.ld-glance-row__label {
  font-family: var(--ld-sans); font-size: .8rem; color: var(--ld-muted-fg);
  flex: none; width: 4.5rem;
}
.ld-glance-row__value {
  font-family: var(--ld-sans); font-size: .875rem; font-weight: 600;
  color: var(--ld-fg); margin-left: auto; text-align: right;
}
.ld-status {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--ld-sans); font-size: .875rem; font-weight: 700;
}
.ld-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ld-open); flex: none; }
.ld-status--closed { color: var(--ld-muted-fg); font-weight: 400; }

/* ── SOCIAL ─────────────────────────────────────────────────────────── */
.ld-social-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .2rem;
}
.ld-social-link {
  display: flex; align-items: center; gap: .5625rem;
  padding: .4375rem .5rem; border-radius: var(--ld-radius);
  font-family: var(--ld-sans); font-size: .875rem; color: var(--ld-fg);
  text-decoration: none; font-weight: 500;
  transition: background .15s;
}
.ld-social-link .bi { font-size: 1rem; color: var(--ld-accent); }
.ld-social-link__ext { margin-left: auto; font-size: .7rem !important; opacity: .4; }
.ld-social-link:hover { background: var(--ld-muted); }

/* ── COMMUNITY CARD ─────────────────────────────────────────────────── */
.ld-community__eyebrow {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--ld-display); font-weight: 800; font-size: .9375rem;
  color: var(--ld-fg); margin: 0 0 .5rem;
}
.ld-community__eyebrow .bi { color: var(--ld-accent); }
.ld-community__body {
  font-family: var(--ld-sans); font-size: .8125rem; line-height: 1.6;
  color: var(--ld-muted-fg); margin: 0 0 .875rem;
}
.ld-community__meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
}
.ld-community__updated {
  font-family: var(--ld-sans); font-size: .75rem; color: var(--ld-muted-fg);
}

/* ── NEARBY ─────────────────────────────────────────────────────────── */
.ld-nearby {
  background: var(--ld-card);
  border-top: 1px solid var(--ld-border);
}
.ld-nearby__inner {
  max-width: 72rem; margin: 0 auto;
  padding: 3rem 1.5rem 3.5rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.ld-nearby__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .625rem;
}
.ld-place-card {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1rem;
  background: var(--ld-bg); border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-lg); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.ld-place-card:hover {
  border-color: var(--ld-primary);
  box-shadow: 0 2px 8px -4px rgba(24,23,21,.12);
}
.ld-place-card__flag { font-size: 1.375rem; flex: none; }
.ld-place-card__body {
  display: flex; flex-direction: column; gap: .1rem;
  flex: 1; min-width: 0;
}
.ld-place-card__name {
  font-family: var(--ld-sans); font-size: .875rem; font-weight: 600;
  color: var(--ld-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ld-place-card__meta {
  font-family: var(--ld-sans); font-size: .75rem; color: var(--ld-muted-fg);
}
.ld-place-card__arrow { color: var(--ld-muted-fg); font-size: .875rem; flex: none; }

/* ── ADMIN ACTIONS ──────────────────────────────────────────────────── */
.admin-actions {
  max-width: 72rem; margin: 1.5rem auto; padding: 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 959px) {
  .ld-title-band__inner { padding: 1.375rem 1rem 1.75rem; }
  .ld-content-wrap { padding: 1.75rem 1rem 3rem; gap: 2rem; }
}
@media (max-width: 599px) {
  .ld-branch-panel__info  { border-right: none; border-bottom: 1px solid var(--ld-border); }
  .ld-capabilities__grid  { gap: 2rem; }
}