/* ==========================================================================
   event-detail-mobile.css — Responsive layout & styling for ghidBR.ro details.
   Compatible with single semantic DOM tree and action buttons relocation.
   ========================================================================== */

/* --- Safe Area / Mobile Baseline Styles --- */
/* --- Safe Area / Mobile Baseline Styles --- */
@media (max-width: 991.98px) {
  body.event-page .past-event-banner { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
  /* Același link discret ca în hero desktop, cu țintă tactilă de 44px. */
  body.event-page .event-mobile-website-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    min-height: 44px;
    padding: 0 10px 0 0;
    border: 0;
    border-radius: 0;
    color: #625873;
    background: transparent;
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
  }
  body.event-page .event-mobile-website-cta > svg:first-child {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #f0edf5;
  }
  body.event-page .event-mobile-website-cta > svg:last-child {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  body.event-page .event-mobile-website-cta:hover { color: #6d28d9; text-decoration: underline; }
  body.event-page .event-mobile-website-cta:focus-visible { outline: 2px solid #a78bfa; outline-offset: 4px; }
  /* Aliniere perfectă între antetul transparent și containerul posterului mobil */
  .navbar-glass .container,
  body.event-page main.container {
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (forced-colors: active) {
  body.event-page .mobile-glance-action,
  body.event-page .home-feed-actions .home-feed-action,
  body.event-page .mobile-cta-participate {
    border-color: ButtonText !important;
    background: Canvas !important;
    color: ButtonText !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-glass .container,
  body.event-page main.container {
    max-width: 640px !important;
  }
}

/* Toate regulile de mai jos, până la extensiile responsive punctuale, descriu
   exclusiv experiența mobilă. Păstrarea lor în acest scope împiedică reseturile
   cu !important (inclusiv ascunderea acțiunilor relocate) să ajungă pe desktop. */
@media (max-width: 991.98px) {
  /* Antet mobil pe pagina de eveniment — întotdeauna 100% transparent, NICIODATĂ bară albă lată la scroll */
  body.event-page .navbar-glass,
  body.event-page .navbar-glass.scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* --- Stare UNSCROLLED (peste hero poster) --- */
  body.event-page .navbar-glass:not(.scrolled) .header-mobile-back-btn {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
  }
  body.event-page .navbar-glass:not(.scrolled) .header-mobile-back-btn .lucide,
  body.event-page .navbar-glass:not(.scrolled) .header-mobile-back-btn svg {
    width: 20px !important;
    height: 20px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* --- Stare SCROLLED (peste conținut alb — fără bară lată) --- */
  body.event-page .navbar-glass.scrolled .header-mobile-back-btn {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
  }
  body.event-page .navbar-glass.scrolled .header-mobile-back-btn .lucide,
  body.event-page .navbar-glass.scrolled .header-mobile-back-btn svg {
    width: 20px !important;
    height: 20px !important;
    color: #0f172a !important;
    stroke: #0f172a !important;
  }
  .header-mobile-back-btn:active {
    transform: scale(0.95) !important;
  }
  .navbar-glass.scrolled .header-mobile-back-btn {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  }
  .navbar-glass.scrolled .header-mobile-back-btn .lucide {
    color: #0f172a !important;
    stroke: #0f172a !important;
  }

  #btn-global-search {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  #btn-global-search span {
    display: none !important;
  }

  .header-account-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  /* Butonul de cont peste hero: aceeași tratare „glass" ca butonul „←"
     (S1-07B), ca să nu rămână un cerc alb izolat lângă celelalte controale
     (discrepanță de fundal). Scoped sub 992px ca să NU atingem butonul cu
     text „Conectare"/username de pe desktop. */
  @media (max-width: 991.98px) {
    body.event-page .navbar-glass:not(.scrolled) .header-account-btn {
      background: rgba(15, 23, 42, 0.65) !important;
      backdrop-filter: blur(16px) saturate(160%) !important;
      -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    }
    /* Glifa de cont e neutră (starea o dă avatarul cu inițială, nu culoarea):
       peste glass închis devine albă, ca restul controalelor de pe hero. */
    body.event-page .navbar-glass:not(.scrolled) .header-account-btn--out .lucide {
      color: #ffffff !important;
      stroke: #ffffff !important;
    }
    /* Avatarul își păstrează cercul de brand, dar primește un inel subțire ca
       să nu se lipească de fundalul închis. */
    body.event-page .navbar-glass:not(.scrolled) .header-account-avatar {
      box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
    }
    /* La scroll (peste conținut alb) devine alb, identic cu pastila/butonul „←". */
    body.event-page .navbar-glass.scrolled .header-account-btn {
      background: #ffffff !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
      border: 1px solid #cbd5e1 !important;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    }
  }

  /* Inspiră-mă: aceeași regulă neconditionată de "#btn-dice-randomizer" din
     homepage.css (alb, text/icon negru, umbră fină) — copiată aici pentru că
     această pagină nu încarcă homepage.css, deci fără ea butonul cădea pe
     varianta veche alb/mov din style.css. */
  #btn-dice-randomizer {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-radius: 999px !important;
  }
  #btn-dice-randomizer:hover,
  #btn-dice-randomizer:focus,
  #btn-dice-randomizer:active {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    color: #000000 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35) !important;
    outline: none !important;
  }
  #btn-dice-randomizer span,
  #btn-dice-randomizer:hover span,
  #btn-dice-randomizer:focus span,
  #btn-dice-randomizer:active span {
    color: #000000 !important;
  }
  #btn-dice-randomizer .lucide,
  #btn-dice-randomizer:hover .lucide,
  #btn-dice-randomizer:focus .lucide,
  #btn-dice-randomizer:active .lucide {
    color: #000000 !important;
    stroke: #000000 !important;
  }

  /* Reset corp pagină mobil - padding lateral 0, marginile sunt gestionate de carduri */
  main.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important; /* S1-07B: hero-ul imersiv umple sub antetul transparent, ca pe desktop */
    padding-bottom: 16px !important; /* spațiu intern; clearance-ul barei CTA e pe body (mai jos) */
  }

  /* Păstrează geometria pastilei din hero, dar lasă fundalul categoriei să
     vină din paleta comună `getCategoryBadgeClass()`, la fel ca în feed. */
  .mobile-event-category-pillar {
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
    height: 26px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
  }

  body {
    background-color: #f8fafc !important;
  }

  /* --- Bară CTA sticky (S1-07C) --- */
  /* Înălțimea barei ca variabilă locală; aplicată consecvent la padding-bottom-ul
     corpului și la poziția toasturilor. safe-area se citește O SINGURĂ DATĂ, în
     mobile-navigation.css (:root --mobile-safe-bottom = env(safe-area-inset-bottom));
     aici doar o reutilizăm, fără a apela env() din nou. */
  body.event-page {
    --event-cta-bar-height: 64px;
    padding-bottom: 0;
  }

  body.event-page .home-footer {
    padding-bottom: calc(16px + var(--event-cta-bar-height) + var(--mobile-safe-bottom, 0px));
  }

  /* Grupul de acțiuni din railul desktop (Save/Calendar/Share/Particip/Bilete)
     nu se mai afișează pe mobil: Save/Share/Particip/Bilete sunt în bara CTA de
     mai jos, iar „+ Calendar" revine în panoul „dintr-o privire" (S1-07D). */
  #event-actions-wrapper {
    display: none !important;
  }

  .mobile-event-hero-zoom-hint {
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    box-sizing: border-box;
    color: #ffffff;
    background: rgba(20, 20, 20, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    align-self: flex-end;
    cursor: zoom-in;
    flex: 0 0 auto;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background 0.15s ease;
  }

  body {
    background-color: #f8fafc !important;
  }

  /* --- Bară CTA sticky (S1-07C) --- */
  /* Înălțimea barei ca variabilă locală; aplicată consecvent la padding-bottom-ul
     corpului și la poziția toasturilor. safe-area se citește O SINGURĂ DATĂ, în
     mobile-navigation.css (:root --mobile-safe-bottom = env(safe-area-inset-bottom));
     aici doar o reutilizăm, fără a apela env() din nou. */
  body.event-page {
    --event-cta-bar-height: 64px;
    padding-bottom: 0;
  }

  /* Grupul de acțiuni din railul desktop (Save/Calendar/Share/Particip/Bilete)
     nu se mai afișează pe mobil: Save/Share/Particip/Bilete sunt în bara CTA de
     mai jos, iar „+ Calendar" revine în panoul „dintr-o privire" (S1-07D). */
  #event-actions-wrapper {
    display: none !important;
  }

  .mobile-cta-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--mobile-detail-floating-pill-bottom);
    width: calc(100% - 24px);
    max-width: 540px;
    z-index: 1040; /* sub navbar (1050) și sub modale Bootstrap (1055+) */
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 8px 12px;
    background: var(--mobile-floating-pill-background);
    backdrop-filter: var(--mobile-floating-pill-filter);
    -webkit-backdrop-filter: var(--mobile-floating-pill-filter);
    border: var(--mobile-floating-pill-border);
    border-radius: 999px;
    box-shadow: var(--mobile-floating-pill-shadow);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-cta-bar { background: var(--mobile-floating-pill-fallback); }
  }

  .mobile-cta-participate {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border-radius: 999px;
    font-weight: 750;
    font-size: 0.78rem;
    letter-spacing: -0.015em;
    cursor: pointer;
    white-space: nowrap;
  }
  .mobile-cta-participate .lucide,
  .mobile-cta-participate svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  .mobile-cta-tickets {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #ffffff !important;
    font-weight: 750;
    font-size: 0.78rem;
    letter-spacing: -0.015em;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
    white-space: nowrap;
  }
  .mobile-cta-tickets .lucide,
  .mobile-cta-tickets svg { width: 16px; height: 16px; flex: 0 0 auto; }
  @media (max-width: 479.98px) {
    .mobile-cta-bar:has(.mobile-cta-tickets--soldout),
    .mobile-cta-bar:has(.mobile-cta-tickets--agency) {
      gap: 8px;
      padding-inline: 9px;
    }
    .mobile-cta-bar:has(.mobile-cta-tickets--soldout) .mobile-cta-participate,
    .mobile-cta-bar:has(.mobile-cta-tickets--agency) .mobile-cta-participate {
      flex: 0 0 44px;
      width: 44px;
      padding-inline: 0;
    }
    .mobile-cta-bar:has(.mobile-cta-tickets--soldout) .mobile-cta-participate-label,
    .mobile-cta-bar:has(.mobile-cta-tickets--agency) .mobile-cta-participate-label {
      display: none;
    }
    .mobile-cta-tickets--agency {
      padding-inline: 8px;
      gap: 5px;
    }
  }
  .mobile-cta-tickets--soldout {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569 !important;
    box-shadow: none;
    cursor: default;
    gap: 5px;
    padding-inline: 8px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .mobile-cta-tickets--soldout > span {
    min-width: 0;
  }

  .mobile-cta-save,
  .mobile-cta-share {
    flex: 0 0 48px;
    width: 48px;
    min-height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-cta-save .lucide,
  .mobile-cta-share .lucide {
    width: 19px;
    height: 19px;
  }
  .mobile-cta-save.is-saved,
  .home-save-btn.is-saved {
    border-color: rgba(239, 68, 68, 0.45) !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.18) !important;
  }
  .mobile-cta-save.is-saved .lucide,
  .mobile-cta-save.is-saved svg,
  .home-save-btn.is-saved .lucide,
  .home-save-btn.is-saved svg {
    fill: #ef4444 !important;
    color: #ef4444 !important;
  }

  /* Hero participate badge */
  .hero-btn-participate {
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .hero-btn-participate:hover {
    background: rgba(255, 255, 255, 0.32) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
  }
  .hero-btn-participate.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4) !important;
  }

  /* Fără ticket_url: Interesat pe toată lățimea */
  .mobile-cta-bar-single .mobile-cta-participate {
    flex: 1 1 auto;
  }

  /* Stare „Eveniment încheiat": păstrează Share în dreapta. */
  .mobile-cta-bar-ended {
    justify-content: space-between;
  }
  .mobile-cta-ended-text {
    flex: 1 1 auto;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    font-weight: 700;
    color: #64748b;
  }
  .mobile-cta-ended-text .lucide { width: 18px; height: 18px; }

  .mobile-cta-participate:focus-visible,
  .mobile-cta-tickets:focus-visible,
  .mobile-cta-save:focus-visible,
  .mobile-cta-share:focus-visible {
    outline: 2px solid var(--primary-color, #6366f1);
    outline-offset: 2px;
  }

  @media (max-width: 379.98px) {
    .mobile-cta-bar {
      gap: 8px;
      padding-inline: 9px;
    }
    .mobile-cta-participate {
      padding-inline: 12px;
      font-size: 0.84rem;
    }
    .mobile-cta-bar:not(.mobile-cta-bar-single) .mobile-cta-participate {
      flex: 0 0 44px;
      width: 44px;
      padding-inline: 0;
    }
    .mobile-cta-bar:not(.mobile-cta-bar-single) .mobile-cta-participate-label {
      display: none;
    }
    .mobile-cta-save,
    .mobile-cta-share {
      flex-basis: 44px;
      width: 44px;
    }
    .mobile-cta-tickets {
      padding-inline: 9px;
      font-size: 0.84rem;
      gap: 5px;
    }
    .mobile-cta-tickets--soldout {
      font-size: 0.75rem;
    }
    .mobile-cta-tickets--soldout .lucide {
      display: none;
    }
  }

  /* Toasturile stau deasupra barei CTA (aceeași variabilă de înălțime). */
  body.event-page .toast-container {
    bottom: calc(var(--event-cta-bar-height) + var(--mobile-safe-bottom, 0px) + var(--mobile-browser-toolbar-offset, 0px) + 8px) !important;
  }

  /* --- 1. Hero imersiv mobil (S1-07B) --- */
  .mobile-event-hero {
    position: relative;
    width: auto;
    margin-left: -12px !important;
    margin-right: -12px !important;
    margin-top: -1.5rem !important;
    height: clamp(380px, 105vw, 480px);
    overflow: hidden;
    margin-bottom: 0;
    border-radius: 0 !important;
  }
  .mobile-event-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    cursor: zoom-in;
  }
  .mobile-event-hero .event-poster-soldout {
    /* Hero-ul începe sub antet; păstrăm marcajul sub zona butonului Închide. */
    top: calc(96px + env(safe-area-inset-top, 0px));
  }
  /* Scrim: întunecă SUS pentru lizibilitatea controalelor din antetul
     transparent și JOS
     (tranziție fluidă/fade către fundalul paginii #f8fafc). */
  .mobile-event-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.75) 0%,
        rgba(15, 23, 42, 0.2) 18%,
        rgba(15, 23, 42, 0) 50%,
        rgba(15, 23, 42, 0) 75%,
        rgba(248, 250, 252, 0.5) 88%,
        rgba(248, 250, 252, 0.95) 96%,
        rgba(248, 250, 252, 1) 100%);
    pointer-events: none;
  }
  /* top: 72px (nu 12px) — antetul e fix și transparent peste hero (S1-07A/B);
     valoarea lasă badge-ul/hint-ul liber sub controalele antetului, indiferent
     de lățimea ecranului (antetul are cca. 56-70px înălțime pe mobil). */
  .mobile-event-hero-zoom-hint {
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(20, 20, 20, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 5px 10px;
    border-radius: 999px;
    align-self: flex-end;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .mobile-event-hero-zoom-hint:active {
    transform: scale(0.96);
  }
  .mobile-event-hero-zoom-hint:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }
  .mobile-event-hero-zoom-hint .lucide {
    width: 13px;
    height: 13px;
  }
  .mobile-event-hero-overlay-bottom {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 74px;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
  }
  /* Overlay-ul e doar un container de poziționare, dar ocupă o bandă de ~86px
     pe toată lățimea hero-ului: fiind peste fotografie (z-index: 5), înghițea
     tap-ul acolo unde nu era nicio pastilă, iar galeria se deschidea doar din
     fâșia îngustă rămasă liberă (de aici „trebuie să dau clic de mai multe
     ori"). Containerele devin transparente la pointer; doar recuzita
     interactivă îl primește înapoi. */
  .mobile-event-hero-overlay-bottom,
  .mobile-event-hero-overlay-bottom > div,
  .mobile-event-hero-overlay-bottom > div > div {
    pointer-events: none;
  }
  .mobile-event-hero-overlay-bottom .mobile-event-hero-zoom-hint,
  .mobile-event-hero-overlay-bottom .mobile-event-hero-glass-btn,
  .mobile-event-hero-overlay-bottom .home-feed-pillar,
  .mobile-event-hero-overlay-bottom .mobile-place-types-disclosure {
    pointer-events: auto;
  }
  .mobile-event-hero-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }
  /* Stil partajat pentru butoanele Save/Share păstrate peste hero-ul locației;
     detaliul evenimentului le mută în bara CTA. */
  .mobile-event-hero-glass-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.52) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.32) !important;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .mobile-event-hero-glass-btn .lucide,
  .mobile-event-hero-glass-btn svg {
    width: 20px;
    height: 20px;
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
  .mobile-event-hero-glass-btn:active {
    transform: scale(0.96);
  }
  .mobile-event-hero-glass-btn.home-save-btn.is-saved {
    background: rgba(79, 70, 229, 0.68) !important;
    border-color: rgba(199, 210, 254, 0.7) !important;
    color: #ffffff !important;
  }
  .mobile-event-hero-glass-btn.home-save-btn.is-saved .lucide,
  .mobile-event-hero-glass-btn.home-save-btn.is-saved svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
  }
  .mobile-event-hero-glass-btn:focus-visible {
    outline: 2px solid var(--primary-color, #6366f1);
    outline-offset: 2px;
  }

  /* ==========================================================================
     Sistem Unitar de Ierarhie Tipografică pe Mobil (/eveniment/...)
     Clase de importanță: Nivel 1 -> Nivel 6 + Acțiuni
     ========================================================================== */

  /* Nivel 1: Titlu Principal Eveniment */
  .evt-typo-h1,
  .mobile-event-title {
    font-size: clamp(1.25rem, 5.5vw, 1.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
  }

  /* Nivel 2: Titluri de Secțiune (Despre, Info practic, Locație, Organizator, Pe rețele, Rails) */
  .evt-typo-h2,
  .mobile-section-title,
  #similar-events .mobile-similar-header,
  #organizer-events h2 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
    margin-bottom: 0.75rem !important;
    text-transform: none !important; /* Uniformizare: Title / Sentence case */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mobile-section-title .lucide,
  .mobile-section-title svg,
  #similar-events .mobile-similar-header .lucide,
  #organizer-events h2 .lucide {
    width: 18px !important;
    height: 18px !important;
    color: var(--primary-color, #6366f1) !important;
    stroke: var(--primary-color, #6366f1) !important;
    flex-shrink: 0 !important;
  }

  /* Nivel 3: Sub-titluri & Titluri de Card */
  .evt-typo-h3,
  .mobile-organizer-name {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #1e293b !important;
  }

  /* Nivel 4: Corp de Text Principal & Valori Panou */
  .evt-typo-body,
  .event-description,
  .mobile-practical-info-text {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    color: #334155 !important;
  }

  .mobile-glance-value {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
  }

  /* Nivel 5: Text Secundar / Metadata / Detalii */
  .evt-typo-caption,
  .mobile-glance-price-details {
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    color: #64748b !important;
    font-weight: 500 !important;
  }

  /* Metadate dovadă socială & numărătoare inversă sub titlu */
  .mobile-social-proof-text {
    line-height: 1.4 !important;
  }
  .mobile-social-proof {
    margin-top: 2px;
  }

  /* Nivel 6: Etichete Kicker / Câmpuri (UPPERCASE) */
  .evt-typo-eyebrow,
  .mobile-glance-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
  }

  /* Clase pentru Butoane & Acțiuni */
  .mobile-cta-tickets {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }

  .mobile-cta-participate,
  .nav-btn {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
  }

  .evt-typo-btn-sm,
  .mobile-glance-action,
  .mobile-description-toggle,
  .mobile-organizer-contact-btn {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
  }

  /* --- 1b. Titlu + dovadă socială într-un singur card unitar Frosted Glass (S1-07B) --- */
  .mobile-event-title-block {
    margin-top: -68px;
    position: relative;
    z-index: 5;
  }
  /* Aceeași identitate sticky ca pe paginile locațiilor. Cardul rămâne sub
     stratul controlului X din antet și nu scoate conținutul din flux. */
  body.event-page .mobile-event-identity-block {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 1025;
    isolation: isolate;
  }
  body.event-page .mobile-event-identity-block .mobile-event-hero-card {
    /* X-ul fix ocupă 44px + gutterul din dreapta; textul nu intră sub el. */
    padding-right: 64px !important;
  }
  .mobile-event-hero-card {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    width: 100% !important;
    margin-bottom: 12px;
  }
  .mobile-event-hero-title {
    overflow-wrap: anywhere;
    margin: 0 0 4px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
  }
  /* --- 1c. Panou "dintr-o privire" (S1-07D) --- */
  .mobile-glance-card {
    background: #ffffff;
    border: 1px solid var(--color-border, rgba(226, 232, 240, 0.8));
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(20, 16, 40, 0.04);
    margin: 0 0 12px !important;
    padding: 2px 12px;
  }
  .mobile-glance-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border, rgba(226, 232, 240, 0.7));
  }
  .mobile-glance-row:last-of-type {
    border-bottom: none;
  }
  .mobile-glance-row.is-clickable {
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.18s ease;
  }
  .mobile-glance-row.is-clickable:active {
    background: rgba(99, 102, 241, 0.06);
  }
  .mobile-glance-row.is-clickable:focus-visible {
    outline: 2px solid var(--primary-color, #6366f1);
    outline-offset: 2px;
  }
  .mobile-glance-row.is-clickable .event-linked-place {
    position: relative;
    z-index: 1;
  }
  .mobile-glance-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary-color, #6366f1);
  }
  .mobile-glance-icon .lucide {
    width: 16px;
    height: 16px;
  }
  .mobile-glance-body {
    flex: 1 1 auto;
    min-width: 0;
  }
  .mobile-glance-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary, #64748b);
  }
  .mobile-glance-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .mobile-glance-action {
    flex: 0 0 auto;
    height: var(--touch-target-min, 44px);
    min-height: var(--touch-target-min, 44px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      var(--gradient-brand-border, linear-gradient(115deg, rgba(79, 70, 229, 0.48), rgba(236, 72, 153, 0.48))) border-box;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
    transition: all 0.2s ease;
  }
  .mobile-glance-action:hover,
  .mobile-glance-action:active {
    background:
      linear-gradient(#fbf7fb, #fbf7fb) padding-box,
      var(--gradient-brand-border-strong, linear-gradient(115deg, rgba(79, 70, 229, 0.82), rgba(236, 72, 153, 0.82))) border-box;
    color: var(--color-brand-identity, #a21caf);
  }
  .mobile-glance-action:focus-visible {
    outline: 2px solid var(--color-brand-identity, #a21caf);
    outline-offset: 2px;
  }

  /* Panou Dropdown Expansibil Hartă Mobil (Option A) */
  .mobile-event-map-dropdown {
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--color-border, rgba(226, 232, 240, 0.7));
    margin-bottom: 4px;
    animation: fadeInMapDropdown 0.25s ease-out;
  }

  @keyframes fadeInMapDropdown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .mobile-glance-price-details {
    padding: 0 0 10px 44px;
    margin-top: -6px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #475569);
  }
  .mobile-glance-price-details:has(+ .mobile-glance-row--practical) {
    border-bottom: 1px solid var(--color-border, rgba(226, 232, 240, 0.7));
    margin-bottom: 0;
  }
  .mobile-glance-row--practical {
    align-items: flex-start;
  }
  .mobile-glance-row--practical .mobile-glance-icon {
    margin-top: 2px;
  }
  .mobile-glance-row--practical .mobile-practical-info-text {
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    color: #475569 !important;
  }

  /* --- 2. Despre Eveniment (Expandable) --- */
  .about-box.event-card-box {
    padding: 12px !important;
  }
  .about-box .mobile-section-title {
    margin-bottom: 10px !important;
  }
  .mobile-vibe-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  .mobile-vibe-tag-badge .lucide,
  .mobile-vibe-tag-badge svg {
    width: 14px;
    height: 14px;
    color: var(--primary-color, #6366f1);
  }
  .mobile-vibe-tag-badge:hover,
  .mobile-vibe-tag-badge:active {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
    color: #4f46e5;
    text-decoration: none;
  }
  .mobile-vibe-tag-badge.is-static,
  .mobile-vibe-tag-badge.is-static:hover,
  .mobile-vibe-tag-badge.is-static:active {
    cursor: default;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #334155;
    transform: none;
  }
  .event-description > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .event-description p {
    margin-bottom: 0.55rem !important;
  }
  .event-description p:last-child {
    margin-bottom: 0 !important;
  }
  .about-box .text-center.mt-3 {
    margin-top: 6px !important;
  }
  .mobile-description-wrapper.collapsed {
    max-height: var(--mobile-description-collapsed-height, 3.2em);
    overflow: hidden;
  }
  .about-box .mobile-description-wrapper.collapsed::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 34px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 88%);
    content: "";
    pointer-events: none;
  }
  .mobile-description-toggle {
    border: none;
    background: transparent;
    color: var(--primary-color) !important;
    font-size: 0.84rem;
    font-weight: 700;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  .mobile-description-toggle:focus-visible {
    outline: 2px solid var(--primary-color, #6366f1);
    outline-offset: 2px;
    border-radius: 8px;
  }

  /* --- 3. Locație Mobil --- */
  .location-box.event-card-box p.text-muted {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .location-box.event-card-box p.text-muted .lucide {
    color: var(--primary-color, #6366f1) !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
  }
  .nav-btn-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }
  .nav-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    transform: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  }
  .nav-btn img {
    margin-bottom: 0 !important;
    width: 18px !important;
    height: 18px !important;
  }
  .nav-btn:hover, .nav-btn:active {
    transform: none !important;
  }

  /* Locație: scoatem chenarul de card ca harta să fie pe toată lățimea.
     Titlul/adresa/butoanele stau direct pe
     pagină, reducând aspectul de „card". Harta își păstrează chenarul propriu. */
  .location-box.event-card-box {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* „Ești proprietarul…" — fără fundal de card, doar textul + butonul pe pagină. */
  .suggest-edit-box.event-card-box {
    padding: 8px 0 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Butonul „Hartă" din bara de sinteză sare la ancora #mobile-location-box.
     Header-ul e fix (~82px), așa că lăsăm spațiu deasupra cardului la salt, ca
     să nu ajungă sub meniul de sus. */
  #mobile-location-box {
    scroll-margin-top: 100px;
  }
  /* --- 5. Evenimente Similare Rail Orizontal (Reutilizat din homepage.css) --- */
  .home-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    padding: 2px 16px 8px;
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .home-rail::-webkit-scrollbar {
    display: none;
  }
  .home-rail > * {
    flex-shrink: 0;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
  }
  .home-rail-card-link {
    display: block;
  }
  .home-rail-card {
    position: relative;
    width: 158px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(20, 16, 40, 0.04);
  }
  .home-rail-card-media {
    position: relative;
    width: 158px;
    height: 210px;
    overflow: hidden;
  }
  @media (max-width: 767.98px) {
    .home-rail {
      gap: 8px !important;
    }
    .home-rail-card,
    .home-rail-card-media {
      width: 144px !important;
    }
    .home-rail-card-media {
      height: 192px !important;
    }
  }
  .home-rail-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .home-rail-chip {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    font-size: 0.58rem !important;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 7px !important;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .home-rail-card-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .home-rail-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1e293b;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.15rem !important;
    max-height: 2.15rem !important;
  }
  .home-rail-card-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #64748b;
  }
  .home-rail-card-meta-icon {
    width: 12px;
    height: 12px;
    color: #64748b;
  }

  /* --- 6. Stacking elemente pe ecrane sub 992px --- */
  .event-card-box {
    border: 1px solid var(--color-border, rgba(226, 232, 240, 0.8)) !important;
    box-shadow: 0 8px 24px rgba(20, 16, 40, 0.04) !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .actions-box {
    display: none !important; /* Ascundem box-ul gol de pe mobil (sunt mutate butoanele sus) */
  }

  .mobile-btn-suggest-edit {
    color: #64748b !important;
    border-color: #cbd5e1 !important;
  }
}

@media (max-width: 991.98px) {
  /* Titluri de secțiune (Despre / Locație / S-ar putea să-ți placă) — același
     font „eyebrow" ca etichetele Când/Unde/Preț și ca Organizat de / Pe rețele,
     pentru un singur limbaj tipografic pe mobil. Iconul rămâne, redus la scară. */
  .mobile-section-title,
  #similar-events .mobile-similar-header {
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
  }
  .mobile-section-title .lucide,
  .mobile-section-title svg,
  #similar-events .mobile-similar-header .lucide {
    width: 14px !important;
    height: 14px !important;
  }

  /* Detalii preț: rândul PREȚ e urmat de blocul de detalii, deci nu mai e
     „:last-of-type" și își păstra border-bottom-ul — o dungă care tăia textul.
     Îl eliminăm când rândul e imediat urmat de detalii. */
  .mobile-glance-row:has(+ .mobile-glance-price-details) {
    border-bottom: none !important;
  }

  /* Spacing mai strâns înainte de „S-ar putea să-ți placă și..." pe mobil
     (utilitarele mt-5/pt-4 = ~4.5rem lăsau un gol prea mare). Desktopul
     păstrează utilitarele Bootstrap. */
  #similar-events {
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
  }
  #similar-events > .d-flex.align-items-center {
    margin-bottom: 0.75rem !important;
  }
  #organizer-events {
    margin-top: 1.5rem !important;
  }
}

/* S1-08: antetul de detaliu folosește EXACT același gutter de 8px ca antetul
   paginilor principale (mobile-navigation.css la ≤767.98px), ca butonul „←"
   și acțiunile din dreapta să ajungă în aceleași poziții ca pe liste/homepage.
   (Pe paginile principale antetul e oricum la 8px, iar conținutul la 12px — deci
   antetul stă 4px în afara conținutului; replicăm identic aici.) */
@media (max-width: 767.98px) {
  .navbar-glass .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .header-actions {
    gap: 6px !important;
  }
  body.event-page .header-edit-btn {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-detail-floating-pill-bottom) + var(--event-cta-bar-height) + 12px);
    z-index: 1041;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center;
    gap: 0 !important;
  }
  body.event-page .header-edit-btn .header-edit-label {
    display: none !important;
  }
  body.event-page .header-edit-btn .header-edit-icon {
    font-size: 1.15rem;
    line-height: 1;
  }
}

/* Info practic (S1-07F, doar mobil) — card e d-lg-none, deci regula poate
   sta oriunde în fișier; grupată aici lângă alte etichete de secțiune. */
.mobile-practical-info-text {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Organizator (doar mobil) — logo + nume linkat + iconițe de contact directe. */
.mobile-organizer-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary-color, #6366f1);
}
.mobile-organizer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0;
  background: #fff;
  box-sizing: border-box;
  display: block;
}
.mobile-organizer-logo .lucide {
  width: 22px;
  height: 22px;
}
.mobile-organizer-name {
  font-size: 0.95rem;
}
.organizer-box-mobile .min-w-0 {
  min-width: 0 !important;
  max-width: 100%;
  overflow: hidden;
}
.organizer-box-mobile .mobile-organizer-name,
.organizer-box-mobile .mobile-organizer-name > a,
.organizer-box-mobile .mobile-organizer-name > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Butoane de contact cu etichetă (Email / WhatsApp / Apel) centrate pe un singur rând. */
.mobile-organizer-contact-btns {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}
.mobile-organizer-contact-btn {
  min-height: 44px;
  height: 44px;
  flex: 1 1 auto;
  max-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border, rgba(226, 232, 240, 0.8));
  background: #ffffff;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}
.mobile-organizer-contact-btn .lucide,
.mobile-organizer-contact-btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.mobile-organizer-contact-btn:focus-visible {
  outline: 2px solid var(--primary-color, #6366f1);
  outline-offset: 2px;
}
@media (max-width: 374.98px) {
  .mobile-organizer-contact-label {
    display: none !important;
  }
  .mobile-organizer-contact-btn {
    width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
}

/* --- 7. Desktop Responsive Grid (width >= 992px) --- */
@media (min-width: 992px) {
  .event-split-grid {
    display: grid;
    grid-template-columns: 7fr 3fr;
    grid-gap: 24px;
    align-items: start;
    margin-top: 16px;
  }

  .about-box {
    grid-column: 1;
    grid-row: 1;
  }

  .event-gallery-card {
    grid-column: 1;
    grid-row: 2;
  }

  .actions-box {
    grid-column: 2;
    grid-row: 1;
  }

  .organizer-box {
    grid-column: 2;
    grid-row: 2;
  }

  .location-box {
    grid-column: 2;
    grid-row: 3;
  }

  .suggest-edit-box {
    grid-column: 2;
    grid-row: 4;
  }

  /* Desktop action buttons inside sidebar actions-box */
  .home-feed-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .home-feed-actions .home-feed-actions-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 8px;
    margin-top: 8px;
    width: 100%;
  }

  /* Secondary buttons use compact square tiles on desktop. */
  .home-feed-actions .home-feed-actions-group .home-feed-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px !important;
    background:
      linear-gradient(#f8fafc, #f8fafc) padding-box,
      var(--gradient-brand-border, linear-gradient(115deg, rgba(79, 70, 229, 0.48), rgba(236, 72, 153, 0.48))) border-box !important;
    border: 1px solid transparent !important;
    color: #475569 !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    height: 70px !important;
    width: 100% !important;
    min-height: unset !important;
    box-shadow: none !important;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .home-feed-actions .home-feed-actions-group .home-feed-action:hover {
    background:
      linear-gradient(#f8f5fb, #f8f5fb) padding-box,
      var(--gradient-brand-border-strong, linear-gradient(115deg, rgba(79, 70, 229, 0.82), rgba(236, 72, 153, 0.82))) border-box !important;
    color: var(--color-brand-identity, #a21caf) !important;
  }

  .home-feed-actions .home-feed-actions-group .home-feed-action i,
  .home-feed-actions .home-feed-actions-group .home-feed-action svg {
    margin-bottom: 6px;
    width: 20px !important;
    height: 20px !important;
    color: #475569;
  }

  .home-feed-actions .home-feed-actions-group .home-feed-action span {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
  }
  
  .home-feed-actions .home-feed-actions-group .home-feed-action.home-save-btn.active,
  .home-feed-actions .home-feed-actions-group .home-feed-action.home-save-btn.is-saved {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
    color: var(--primary-color, #6366f1) !important;
  }

  .home-feed-actions .home-feed-actions-group .home-feed-action.home-save-btn.active i,
  .home-feed-actions .home-feed-actions-group .home-feed-action.home-save-btn.is-saved i {
    fill: var(--primary-color, #6366f1);
    color: var(--primary-color, #6366f1);
  }

  /* Primary buttons on desktop (Participate, Tickets) */
  .home-feed-actions .home-participate-btn,
  .home-feed-actions .btn-buy-tickets {
    width: 100% !important;
    min-height: 48px;
    height: 48px;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
  }

  /* Tickets Button styling */
  .home-feed-actions .btn-buy-tickets {
    background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25) !important;
  }
  .home-feed-actions .btn-buy-tickets i {
    width: 18px;
    height: 18px;
    color: #ffffff;
  }
  .home-feed-actions .btn-buy-tickets:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35) !important;
  }

  .home-feed-actions .home-feed-action:focus-visible {
    outline: 2px solid var(--color-brand-identity, #a21caf);
    outline-offset: 2px;
  }
}

/* --- Zoom Modal Close Button (Desktop & Mobile) --- */
.zoom-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10002;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.zoom-modal-close svg,
.zoom-modal-close .lucide {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  color: #ffffff;
  display: block;
}
.zoom-modal-close:hover,
.zoom-modal-close:focus-visible {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(255, 255, 255, 0.5);
  outline: none;
  transform: scale(1.05);
}
.zoom-modal-close:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-color, #6366f1);
}

@media (max-width: 339.98px) {
  /* Hero-ul (S1-07B) e full-width la orice lățime; pe ecrane ultra-înguste doar
     titlul se micșorează puțin, ca să nu forțeze prea multe rânduri. */
  .mobile-event-title {
    font-size: 1.2rem;
  }
}

.event-gallery-card {
  overflow: hidden;
}

.event-gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-gallery-single-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  background: #f8fafc;
}

#globalZoomModal .event-image-status {
  position: absolute;
  z-index: 2;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border: 1px solid #536077;
  border-radius: 18px;
  background: #202b3e;
  color: #eef0f8;
  text-align: center;
}
#globalZoomModal .event-image-status[hidden] { display: none; }

.event-gallery-single-frame img {
  position: static;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
}

.event-gallery-more-label {
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 500;
}

@media (max-width: 767.98px) {
  .event-gallery-grid > .event-gallery-item--wide-mobile {
    width: 100%;
  }

  .event-gallery-grid > .event-gallery-item--wide-mobile > .ratio {
    --bs-aspect-ratio: 50%;
  }
}

@media (max-width: 991.98px) {
  body.event-page #globalZoomModal.zoom-modal {
    padding-inline: 0;
  }

  body.event-page #globalZoomModal .zoom-modal-content {
    width: 100vw;
    max-width: none;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 991.98px) {
  /* Reducere spațiu excesiv între secțiuni */
  #organizer-events {
    margin-top: 1.25rem !important;
  }
  #similar-events {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
  }
  #similar-events .mobile-similar-header,
  #organizer-events h2 {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
    /* Fără margin-bottom aici: în rândul-antet (icon + titlu, align-items:center)
       marginea cutiei împingea textul în sus și dezalinia stelucele. Spațiul
       până la carduri e dat de wrapperul .d-flex (mb redus mai sus). */
    margin-bottom: 0 !important;
  }
}
/* Interacțiunea de hover rămâne în CSS, compatibilă cu CSP fără handler-e inline. */
.event-hero-hover-link:hover,
.event-hero-hover-link:focus-visible {
  opacity: 0.75;
}
@media (max-width: 991.98px) {
  .mobile-map-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-map-toggle-icon .public-inline-icon {
    width: 14px;
    height: 14px;
  }

  .mobile-map-toggle-icon--close {
    display: none;
  }

  [aria-expanded="true"] .mobile-map-toggle-icon--pin {
    display: none;
  }

  [aria-expanded="true"] .mobile-map-toggle-icon--close {
    display: block;
  }
}