/* Listing detail page styles (.lp-*).
   These rules render the dynamic /listing/ detail page (new listings that
   aren't pre-baked as static HTML). Previously they existed ONLY inline in
   the static /directory/{slug}/ pages, so dynamically-rendered listings came
   out completely unstyled. Loaded by base.njk alongside components.css and
   pages.css, which hold the rest of the .lp-* rules. */

  /* ───────── LISTING DETAIL — Option 3 identity ───────── */
  .lp { background: var(--color-bg); }

  /* Hero row */
  .lp-hero {
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }
  .lp-hero__container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2rem);
  }
  .lp-crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 1.75rem;
  }
  .lp-crumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .lp-crumbs a:hover { color: var(--color-accent); }
  .lp-crumbs span.sep { color: var(--color-text-dim); }

  .lp-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 360px);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  @media (max-width: 880px) {
    .lp-hero__row { grid-template-columns: 1fr; gap: 2rem; }
  }

  .lp-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 1.25rem;
  }
  .lp-hero__kicker::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--color-accent);
  }

  .lp-hero__name {
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--color-heading);
    margin: 0 0 1.25rem;
    text-wrap: balance;
  }

  .lp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.4rem;
    font-size: 0.92rem;
    color: var(--color-text-muted);
  }
  .lp-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }
  .lp-hero__meta-item svg { color: var(--color-accent); flex-shrink: 0; }
  .lp-hero__meta-sep {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-text-dim);
  }

  /* Hero photo (right side)
     Bulletproof for any aspect ratio: square logos, tall portraits, wide
     banners — all fit in full with no cropping. Two-layer system:
       1. Outer frame: soft tonal backdrop, padded, fixed aspect ratio.
       2. Inner stage: flex-centered, contains an <img> sized 100×100% with
          object-fit: contain so the image stretches to fit the stage
          dimensions then preserves its aspect via object-fit, letterboxing
          gracefully when source aspect differs from the frame aspect.
     The two-layer split prevents the global `img` rule in global.css from
     interfering with the inner sizing. */
  .lp-hero__photo-frame {
    aspect-ratio: 4 / 3;
    background:
      radial-gradient(ellipse at top left, #ffffff 0%, transparent 60%),
      linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(28, 26, 23, 0.06);
    padding: clamp(1.25rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
  }
  /* Hairline inner ring — separates the photo backdrop from the photo itself */
  .lp-hero__photo-frame::after {
    content: '';
    position: absolute;
    inset: clamp(0.7rem, 1.5vw, 1rem);
    border: 1px solid rgba(10, 10, 10, 0.05);
    border-radius: 8px;
    pointer-events: none;
  }
  /* The image — !important to defeat global img { height: auto } rule that
     would otherwise interact with object-fit and ruin contain behavior. */
  .lp-hero__photo {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 0 !important;
    /* Drop shadow follows the actual image silhouette so it looks right
       whether the photo is square, wide, or tall. */
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.10));
  }

  /* Action bar — sticky/clean, no glass disco */
  .lp-actions {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
  }
  .lp-actions__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
  }
  .lp-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
    line-height: 1;
  }
  .lp-action--primary {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
  }
  .lp-action--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    transform: translateY(-1px);
  }
  .lp-action--ghost {
    background: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border-light);
  }
  .lp-action--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  .lp-action svg { color: currentColor; flex-shrink: 0; }
  .lp-action--ghost svg { color: var(--color-accent); }
  .lp-action__socials {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
  }
  .lp-action__social {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-bg-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
  }
  .lp-action__social:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
  }
  @media (max-width: 720px) {
    .lp-action__socials { margin-left: 0; width: 100%; padding-top: 0.5rem; border-top: 1px solid var(--color-border); justify-content: flex-end; }
  }

  /* Body — two-column with sticky sidebar */
  .lp-body {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
    background: var(--color-bg);
  }
  .lp-body__container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 360px);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: stretch;
  }
  @media (max-width: 880px) {
    .lp-body__container { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  }
  /* Main column — flex column so map can fill the gap to the sidebar bottom */
  .lp-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
  }
  .lp-main .lp-prose { flex: 0 0 auto; }
  .lp-main .lp-map   { flex: 1 1 auto; min-height: 280px; }
  @media (max-width: 880px) {
    .lp-main .lp-map { flex: 0 0 auto; height: 320px; }
  }

  /* Map block — embedded Google Maps in an editorial frame */
  .lp-map {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
  }
  .lp-map__head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: #fafafa;
    flex-wrap: wrap;
  }
  .lp-map__label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 800;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }
  .lp-map__addr {
    font-size: 0.82rem;
    color: var(--color-text);
    line-height: 1.35;
    flex: 1;
    min-width: 0;
  }
  .lp-map__open {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
  }
  .lp-map__open:hover {
    background: #0a0a0a;
    color: #ffffff;
    border-color: #0a0a0a;
  }
  .lp-map__frame {
    flex: 1 1 auto;
    position: relative;
    background: #f4f4f5;
    min-height: 0;
  }
  .lp-map__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Subtle desaturation so the map sits in the editorial register
       without screaming over the rest of the page. Removes on hover for
       full clarity when the user actually engages with it. */
    filter: grayscale(0.45) contrast(1.02);
    transition: filter 0.4s ease;
  }
  .lp-map:hover .lp-map__frame iframe { filter: grayscale(0) contrast(1); }

  .lp-prose__label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 1rem;
  }
  .lp-prose__label::before {
    content: '';
    width: 20px; height: 1px;
    background: var(--color-text-muted);
  }
  .lp-prose__title {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    color: var(--color-heading);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1.5rem;
  }
  .lp-prose__body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text);
  }
  .lp-prose__body p { margin: 0 0 1.25rem; }

  /* Side cards */
  .lp-side {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 1.5rem;
  }
  @media (max-width: 880px) {
    .lp-side { position: static; }
  }
  .lp-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
    transition: border-color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lp-card:hover {
    border-color: var(--color-border-light);
    transform: translateY(-2px);
  }
  .lp-card__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--color-border);
  }
  .lp-card__icon {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--color-accent-light);
    color: var(--color-accent);
    flex-shrink: 0;
  }
  .lp-card__title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    font-weight: 700;
  }
  .lp-card__row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.45rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
  }
  .lp-card__row + .lp-card__row {
    border-top: 1px dashed var(--color-border);
  }
  .lp-card__row svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-top: 3px;
  }
  .lp-card__row a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    word-break: break-word;
  }
  .lp-card__row a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
  .lp-card__rowlabel {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-dim);
    font-weight: 600;
    margin-bottom: 2px;
  }
  .lp-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: #ffffff;
    color: #0a0a0a;
    border: 1px solid #0a0a0a;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .lp-card__pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
  }
  .lp-card__socials {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .lp-card__socials a {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--color-bg-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
  }
  .lp-card__socials a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
  }

  /* CTA card — highlighted */
  .lp-cta {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
  }
  .lp-cta .lp-card__title { color: var(--color-text-dim); }
  .lp-cta__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .lp-cta__icon {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: rgba(184, 66, 30, 0.18);
    color: var(--color-accent);
  }
  .lp-cta__title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
  }
  .lp-cta__heading {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--color-white);
    margin: 0 0 0.5rem;
  }
  .lp-cta__sub {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.25rem;
  }
  .lp-cta__btn {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--color-accent);
    color: var(--color-white);
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .lp-cta__btn:hover { background: var(--color-accent-hover); color: var(--color-white); }
  .lp-cta__report {
    display: block;
    text-align: center;
    margin-top: 0.85rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
  }
  .lp-cta__report:hover { color: var(--color-accent); }

  /* Back-to-directory bar */
  /* ── Share buttons (FB + X + Copy) ── */
  .lp-share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 2rem 0 1.6rem;
    margin-top: 2.5rem;
    border-top: 1px solid var(--color-border);
  }
  .lp-share__label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-muted);
  }
  .lp-share__buttons {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .lp-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .lp-share__btn:hover {
    border-color: #0a0a0a;
    background: #0a0a0a;
    color: #fff;
  }
  .lp-share__btn--fb:hover { background: #1877f2; border-color: #1877f2; }
  .lp-share__btn--x:hover { background: #000; border-color: #000; }
  .lp-share__btn.is-copied {
    background: #166534;
    border-color: #166534;
    color: #fff;
  }

  .lp-back {
    text-align: center;
    margin-top: 0.4rem;
    padding-top: 0;
  }
  .lp-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border-light);
    color: var(--color-text);
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  .lp-back a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  /* ============================================================
     MOBILE OPTIMIZATIONS
     - Touch targets bumped to ≥44px on every tappable element
     - Hero photo flatter aspect to save vertical space
     - Custom tap highlight matches editorial register
     - Long URLs forced to wrap so they never break layout
     ============================================================ */
  .lp a, .lp button {
    -webkit-tap-highlight-color: rgba(10, 10, 10, 0.06);
  }
  .lp-card__row a { overflow-wrap: anywhere; word-break: break-word; }

  @media (max-width: 720px) {
    /* Trim hero so the photo doesn't dominate the fold */
    .lp-hero { padding: 1.5rem 0 1rem; }
    .lp-hero__row { gap: 1.5rem; }
    .lp-hero__name { margin-bottom: 1rem; }
    .lp-hero__photo-frame { aspect-ratio: 16 / 10; max-height: 320px; }
    .lp-crumbs { margin-bottom: 1rem; font-size: 0.7rem; }

    /* Action buttons — bigger touch targets */
    .lp-actions { padding: 0.85rem 0; }
    .lp-actions__inner { gap: 0.6rem; }
    .lp-action {
      padding: 0.85rem 1.1rem;
      min-height: 44px;
      font-size: 0.92rem;
    }

    /* Body padding */
    .lp-body { padding: 2rem 0 2.5rem; }
    .lp-body__container { gap: 1.5rem; }

    /* Side cards — tighter on phones */
    .lp-card { padding: 1.1rem 1.2rem; border-radius: 10px; }
    .lp-card__head { padding-bottom: 0.7rem; margin-bottom: 0.7rem; }
    .lp-card__row { padding: 0.55rem 0; font-size: 0.92rem; }
    .lp-card__socials a { width: 44px; height: 44px; }

    /* CTA card */
    .lp-cta__btn { padding: 1rem; min-height: 48px; font-size: 0.95rem; }
    .lp-cta__report { padding: 0.5rem 0; min-height: 36px; }

    /* Back-to-directory tap target */
    .lp-back a { padding: 0.95rem 1.5rem; min-height: 44px; font-size: 0.95rem; }

    /* Map — shorter on phones */
    .lp-main .lp-map { height: 260px; }
    .lp-map__head {
      padding: 0.6rem 0.8rem;
      gap: 0.5rem 0.6rem;
    }
    .lp-map__addr { font-size: 0.78rem; flex-basis: 100%; order: 3; }
    .lp-map__open {
      padding: 0.55rem 0.8rem;
      min-height: 40px;
      font-size: 0.7rem;
    }

    /* Posted-by pill — bigger touch target */
    .lp-poster { padding: 0.6rem 1rem 0.6rem 0.55rem; min-height: 44px; }
    .lp-poster__av { width: 32px; height: 32px; }
    .lp-poster__name { font-size: 0.9rem; }
  }

  @media (max-width: 480px) {
    /* Stack action buttons full-width on the narrowest phones */
    .lp-actions__inner { flex-direction: column; align-items: stretch; }
    .lp-action { width: 100%; justify-content: center; }

    /* Hero name nudges down a touch on very narrow viewports */
    .lp-hero__name { font-size: 1.85rem; }

    /* Hero photo cap — keep it from dominating */
    .lp-hero__photo-frame { aspect-ratio: 16 / 10; max-height: 240px; }

    /* Tighter container padding */
    .lp-hero__container,
    .lp-actions__inner,
    .lp-body__container { padding-left: 1rem; padding-right: 1rem; }
  }