/* ===========================================================================
   AdventureNET — stratul de design mobil (mobile-redesign.css)
   ---------------------------------------------------------------------------
   REGULA FIȘIERULUI: absolut tot conținutul stă în interiorul unor media
   queries cu `max-width: 1023px` (sau mai înguste). Fișierul se încarcă
   ULTIMUL pe fiecare pagină, deci:
     - la ≥1024px nu produce niciun efect — desktopul rămâne identic pixel
       cu pixel, prin construcție;
     - la <1024px câștigă orice egalitate de specificitate cu CSS-ul vechi.

   De ce există: stilurile mobile vechi erau împrăștiate în ~120 de fișiere,
   cu breakpoint-uri diferite (768/640/620/600/560/480/460/380), selectori
   care nu mai corespundeau cu HTML-ul (galeria paginii de proprietate),
   texte de 8-10px și ținte de atins de 28px. Acest fișier este stratul
   final, unitar, pentru telefoane și tablete.

   Contract de breakpoint-uri:
     1023px  — tot ce e sub desktop (tabletă + telefon)
     767px   — telefon (portret) + phablet
     479px   — telefoane mici (320-479)
   =========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   0. FUNDAȚIE: tipografie lizibilă, spațiere, siguranță la depășiri
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  :root {
    /* Rampa tipografică mobilă: nimic sub 12px, corpul de text la 16px. */
    --m-text-xs: 0.75rem;    /* 12px — insigne, etichete mici */
    --m-text-sm: 0.875rem;   /* 14px — text secundar */
    --m-text-base: 1rem;     /* 16px — corpul de text */
    --m-text-lg: 1.125rem;   /* 18px */
    --m-touch: 44px;         /* ținta minimă de atins (WCAG 2.5.5) */
    /* Bara de jos măsurată real: 85-87px la 390px (etichete pe un rând),
       ~101px la 320px (etichete pe două rânduri). Un token mai mic decât
       bara reală ascundea ultimii 15-31px ai fiecărei pagini. */
    --m-nav-height: 88px;
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  @media (max-width: 479px) {
    :root { --m-nav-height: 104px; }
  }

  /* Pagina nu are voie să deruleze orizontal. Stratul vechi avea reguli cu
     100vw care forțau scrollbar orizontal; conținutul lat (tabele, cod)
     primește containere derulabile mai jos. */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: var(--m-text-base);
    -webkit-text-size-adjust: 100%;
  }

  /* Imaginile nu depășesc niciodată containerul. */
  img, video, svg, canvas {
    max-width: 100%;
  }

  /* Textele minuscule din stratul vechi (8-11px) urcă la minim lizibil.
     Selectorii vizați sunt cei identificați în audit + sweep-ul de
     breakpoint-uri (amenity-tag, section-badge, etichetele barei de jos). */
  .card-badge,
  .stats-label,
  .card-stat-label,
  .superhost-badge,
  .property-card-location,
  .more-events,
  .amenity-tag,
  .section-badge,
  .mobile-nav-item-public span,
  .nav-item-public span,
  .dest-card-compact .more,
  span.more,
  .response-label,
  .card-category-tag,
  .comment-badge-verified,
  .property-mini-badge,
  .cookie-badge,
  .label-optional,
  .account-type-desc,
  .et,
  .kpi-change,
  .donut-label,
  .mobile-badge,
  .host-stat-label,
  .nav-badge,
  .legend-value,
  .topbar-badge,
  .stats-label {
    font-size: var(--m-text-xs) !important;
    line-height: 1.35 !important;
  }

  /* Poarta academică (login/index.html): etichetele și datele de licență
     coborau la 4,2px prin rampa în cqw; după corecția din carte.css rămân
     la 10,5px — aici urcă la 12px. */
  .continut-pagina .camp > label,
  .continut-pagina .date-rand dt,
  .continut-pagina .date-rand dd,
  .continut-pagina .acces-privat,
  .continut-pagina .subtitlu-academic {
    font-size: var(--m-text-xs) !important;
  }

  /* Contrast: etichetele mute de 10px pe fundal închis erau la 3.97:1. */
  .host-stat-label,
  .kpi-change {
    color: #94a3b8 !important;
  }

  /* Ținte de atins sub 40px găsite de sweep: butonul de favorite de pe
     cardurile homepage (colapsat la 4px lățime), comutatorul de vizualizare
     din căutare, stelele din formularul de recenzie, butoanele de
     „experiențe" din destinații. */
  .btn-favorite,
  .view-wow-btn,
  .star-btn {
    min-width: var(--m-touch) !important;
    min-height: var(--m-touch) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .experience-btn,
  .btn-helpful,
  .property-card-host-btn,
  .property-card-cta,
  .cover-slideshow-nav,
  .share-btn,
  .toggle-password,
  #aratParola,
  #authOchi,
  .tag-modern,
  .toc-link,
  .filter-tab,
  .btn-sm,
  a.card-link,
  .quick-question a,
  .suport-quick a {
    min-height: var(--m-touch);
  }

  .property-card-host-btn,
  .cover-slideshow-nav,
  .share-btn,
  .toggle-password,
  #aratParola,
  #authOchi {
    min-width: var(--m-touch);
  }

  /* Linkuri inline mici („Vezi pe hartă", „2 recenzii", breadcrumb):
     zonă de atins mărită fără a schimba aliniamentul textului. */
  .location-link,
  #reviewCountLink,
  .breadcrumb a,
  .breadcrumbs a {
    display: inline-block;
    padding: 10px 4px;
    margin: -10px 0;
  }

  /* Focus vizibil pe orice element interactiv (accesibilitate). */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--color-focus, #38bdf8);
    outline-offset: 2px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. ANTETUL PUBLIC — compact pe telefon
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  .main-header,
  .main-header-wow {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 60px;
  }

  .main-header .container,
  .main-header-wow .container {
    padding-left: var(--space-4, 1rem);
    padding-right: var(--space-4, 1rem);
    min-height: 60px;
  }

  /* Emblema uriașă din colț devine o siglă de dimensiune normală. */
  .logo-navbar-invelis {
    transform: scale(0.72);
    transform-origin: left center;
  }

  /* Butonul de autentificare din antet rămâne o țintă de 44px. */
  .main-header .btn,
  .main-header-wow .btn {
    min-height: var(--m-touch);
    min-width: var(--m-touch);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. NAVIGAREA MOBILĂ (bara de jos + sertarul) — ambele variante de markup
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Bara de jos: înălțime stabilă + safe-area pentru iPhone. */
  .mobile-nav-public {
    min-height: 70px;
    padding-bottom: calc(8px + var(--m-safe-bottom)) !important;
    /* Sub sertarul „Mai multe" și sub modale: `--z-modal` din tokens.css
       este 500 (nu 1000), deci bara trebuie să stea SUB 500 ca să nu
       acopere partea de jos a sertarului sau a chatului. */
    z-index: 450 !important;
  }

  /* Elementele barei: țintă de 44px și etichetă lizibilă, în ambele
     variante de markup (.mobile-nav-item-public / .nav-item-public). */
  .mobile-nav-item-public,
  .nav-item-public {
    min-height: var(--m-touch);
    min-width: 56px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: var(--m-text-xs) !important;
  }

  /* Corpul paginii lasă loc barei de jos. */
  body {
    padding-bottom: calc(var(--m-nav-height) + var(--m-safe-bottom));
  }

  /* Sertarul "Mai multe": foaie de jos cu safe-area. */
  .mobile-drawer,
  #mobileDrawer {
    padding-bottom: calc(var(--space-4, 1rem) + var(--m-safe-bottom));
    max-height: 82vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-drawer a,
  #mobileDrawer a {
    min-height: var(--m-touch);
    display: flex;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BANNERUL DE COOKIES + POPUP NEWSLETTER — nu mai acoperă navigarea
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Bannerul de cookies stătea la bottom:22px cu z-index 99999 și acoperea
     complet bara de navigare: butonul „Listează-ți Proprietatea" și tot
     restul barei nu primeau niciun click (cauza reală a P9 pe mobil).
     Îl mutăm deasupra barei și îl facem compact. */
  .cc-banner {
    bottom: calc(var(--m-nav-height) + var(--m-safe-bottom) + 26px) !important;
    width: calc(100vw - 20px) !important;
    max-height: 60vh;
    overflow-y: auto;
    padding: 14px 16px 12px !important;
    font-size: 13px !important;
    border-radius: 16px !important;
  }

  .cc-banner .cc-medalion {
    width: 44px !important;
    height: 44px !important;
  }

  .cc-banner .cc-medalion img {
    width: 32px !important;
    height: 32px !important;
  }

  .cc-banner .cc-titlu { font-size: 15px !important; }
  .cc-banner .cc-text p { font-size: 12.5px !important; }

  .cc-banner .cc-btn {
    min-height: var(--m-touch);
    padding: 10px 14px !important;
  }

  /* Linkul „Vezi politica de cookies" din textul bannerului: 128×16 → țintă reală. */
  .cc-banner .cc-text a {
    display: inline-block;
    padding: 10px 2px;
    margin: -10px 0;
  }
}

@media (max-width: 767px) {
  /* Popupul de newsletter devine foaie de jos, nu card plutitor pe mijloc. */
  .np-card, .newsletter-popup-card {
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. FORMULARE — o singură coloană, controale mari, fără zoom pe iOS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 16px pe inputuri previne zoom-ul automat al iOS la focus. */
  input, select, textarea {
    font-size: var(--m-text-base) !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select {
    min-height: 48px;
  }

  button,
  .btn,
  [role="button"] {
    min-height: var(--m-touch);
  }

  /* Grile de formular care rămâneau pe 2 coloane sub 640px. */
  .form-row,
  .form-grid,
  .form-grid-2,
  .form-2col {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. PAGINA PRINCIPALĂ + CĂUTARE — eroul și cardurile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Formularul erou: câmpuri pe o coloană, buton mare de căutare. */
  .hero-search-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
  }

  .hero-search-form .btn,
  .hero-search-form button[type="submit"] {
    width: 100%;
    min-height: 52px;
    font-size: var(--m-text-base);
  }

  /* Cardurile de proprietăți: o singură coloană, imagine lată. */
  .properties-grid-wow,
  .properties-grid,
  .featured-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-5, 1.25rem) !important;
  }

  /* Acțiunile de pe card (favorite / comparare) fuseseră ascunse cu
     display:none pe mobil; le readucem ca ținte de 44px. */
  .properties-grid-wow.view-list .property-card-actions,
  .property-card-actions {
    display: flex !important;
    gap: var(--space-2, 0.5rem);
  }

  .property-card-actions button,
  .location-pin-btn {
    width: var(--m-touch) !important;
    height: var(--m-touch) !important;
  }

  .location-pin-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Prețul și CTA-ul cardului: lizibile. */
  .card-price, .property-card-price {
    font-size: var(--m-text-lg) !important;
  }

  /* Destinațiile „compacte" de pe homepage: câte una pe rând sub 480px. */
  .dest-row-4 {
    gap: var(--space-3, 0.75rem) !important;
  }
}

@media (max-width: 479px) {
  .dest-row-4 {
    grid-template-columns: 1fr !important;
  }

  .dest-card-compact {
    min-height: 140px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. CALENDARE ȘI DATEPICKERE — foaie de jos pe telefon, fără depășiri
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Datepicker-ul din căutare avea min-width:300px care învingea
     width:calc(100% - 2rem) pe ecrane de 320px; plus lipsă max-height. */
  .custom-datepicker {
    min-width: 0 !important;
    max-height: 75vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Zilele calendarului: ținte de atins reale. */
  .custom-datepicker .datepicker-day,
  .custom-datepicker [data-day],
  .availability-calendar .calendar-day {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. PAGINA DE PROPRIETATE — galerie reparată, CTA lipicios, secțiuni aerisite
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* REPARAȚIE: regulile mobile vechi țineau de aliasurile .gallery-grid-wow /
     .gallery-main-large / .gallery-side-grid, dar pagina folosește
     .gallery-grid / .gallery-main / .gallery-side. Pe telefon grila
     desktop (2fr 1fr, 500px) rămânea activă: imagine strivită + fâșie
     îngustă. Aici stilizăm clasele REALE. */
  .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    height: auto !important;
    padding: 0 var(--space-3, 0.75rem) !important;
    gap: var(--space-2, 0.5rem) !important;
  }

  .gallery-main {
    aspect-ratio: 16 / 10;
    height: auto !important;
  }

  /* Imaginile secundare: bandă orizontală derulabilă sub imaginea mare. */
  .gallery-side {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 38%;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--space-2, 0.5rem) !important;
    padding-bottom: var(--space-1, 0.25rem);
  }

  .gallery-side .gallery-item {
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }

  .property-gallery-wow {
    margin-top: 64px !important;
    min-height: 0 !important;
  }

  /* Bara de „highlights" de sub antet: pe telefon randa ~150px de spațiu
     mort cu iconițe fără etichetă. Devine un rând compact de cipuri
     derulabil orizontal, cu etichetele la loc. */
  .property-highlights-bar {
    position: static !important;
  }

  .highlights-bar-container {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2, 0.5rem) !important;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem) !important;
    scrollbar-width: none;
  }

  .highlights-bar-container::-webkit-scrollbar { display: none; }

  .highlights-features {
    flex: 0 0 auto !important;
    order: 0 !important;
    justify-content: flex-start !important;
    gap: var(--space-2, 0.5rem) !important;
  }

  .highlight-feature-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px !important;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
    white-space: nowrap;
  }

  /* Etichetele revin (stratul vechi le ascundea sub 1200px). */
  .highlight-feature-badge .feature-info {
    display: flex !important;
    flex-direction: column;
  }

  .highlight-feature-badge .feature-label {
    font-size: var(--m-text-xs);
    font-weight: 600;
  }

  .highlight-feature-badge .feature-status {
    display: none;
  }

  .highlights-host-link {
    flex: 0 0 auto;
    order: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    white-space: nowrap;
  }

  /* Numele gazdei rămâne vizibil lângă avatar (era ascuns pe îngust —
     rămânea doar un cerc albastru fără nicio explicație). */
  .highlights-host-link .host-link-text {
    display: inline !important;
    font-size: var(--m-text-xs);
  }

  /* Conținutul paginii: o singură coloană. */
  .property-layout {
    grid-template-columns: 1fr !important;
    gap: var(--space-5, 1.25rem) !important;
  }

  /* Statisticile hub-ului comunitar rămâneau pe 4 coloane la 768px. */
  .hub-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Facilitățile: o coloană sub 480px (mai jos), două aici. */
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3, 0.75rem) !important;
  }

  /* ── CTA LIPICIOS DE REZERVARE ──
     Bara mobilă de rezervare există în HTML (#mobileBookingBar) dar stratul
     vechi o omora cu display:none !important „users use sidebar or scroll".
     Pe un telefon asta însemna derulare prin toată pagina ca să găsești
     formularul. O reactivăm, deasupra barei de navigare. */
  .mobile-booking-bar,
  #mobileBookingBar {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-nav-height) + var(--m-safe-bottom));
    z-index: 440;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 0.75rem);
    padding: 10px var(--space-4, 1rem);
    background: var(--color-bg-card, #0f172a);
    border-top: 1px solid var(--color-border, rgba(148, 163, 184, 0.2));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  }

  .mobile-booking-bar .btn,
  #btnMobileReserve {
    min-height: 48px;
    padding: 0 var(--space-6, 1.5rem);
    font-size: var(--m-text-base);
    white-space: nowrap;
  }

  /* Pagina lasă loc și pentru bara de rezervare. */
  body.page-property,
  body[data-page="property"] {
    padding-bottom: calc(var(--m-nav-height) + 72px + var(--m-safe-bottom));
  }

  /* Widgetul de rezervare inline: aerisit, controale mari. */
  .booking-sidebar-wow {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .booking-dates {
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
  }

  .booking-dates .date-separator {
    display: none;
  }

  .booking-dates .date-input-group {
    width: 100%;
  }

  /* Modalele paginii: foi de jos care încap în viewport. */
  .modal-wow,
  .property-modal,
  #bookingModal .modal-content,
  .modal-content {
    max-width: 100vw !important;
    max-height: 88vh !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 479px) {
  .amenities-grid {
    grid-template-columns: 1fr !important;
  }

  .hub-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gallery-side {
    grid-auto-columns: 46%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. PAGINA DE CĂUTARE — vizualizarea listă, filtre, taburi
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Vizualizarea listă avea insigne de 8.8px și prețuri de 10px. */
  .properties-grid-wow.view-list .card-badge {
    font-size: var(--m-text-xs) !important;
  }

  /* Taburile de categorii erau șterse complet pe mobil (display:none);
     devin o bandă orizontală derulabilă — filtrarea rămâne accesibilă. */
  .search-wow-tabs {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    scrollbar-width: none;
  }

  .search-wow-tabs::-webkit-scrollbar { display: none; }

  .search-wow-tabs .wow-tab {
    flex: 0 0 auto;
    min-height: var(--m-touch);
    padding: 0 var(--space-4, 1rem);
    white-space: nowrap;
  }

  /* Foaia de filtre de jos: safe-area + limită de înălțime. */
  .bottom-sheet-wow {
    max-height: 85vh;
    padding-bottom: calc(var(--space-4, 1rem) + var(--m-safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. SUBSOLUL — o coloană, ținte mari
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .main-footer .container > *,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .main-footer a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. PANOURILE (index-user / index-host) — reparațiile critice mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* public-profile.css forța width:100vw !important în 6 locuri → scroll
     orizontal garantat când există bară de derulare verticală. */
  .profile-hero-wrapper,
  .profile-cover-wrap,
  .public-profile-hero,
  [class*="profile-"][style*="100vw"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tabelele din panouri derulează în containerul lor, nu pagina. */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .table-container .table {
    min-width: 640px;
  }
}

@media (max-width: 767px) {

  /* Calendarul gazdei: vizualizarea săptămânală are 8 coloane fără nicio
     regulă mobilă → celule de ~40px ilizibile. Devine derulabilă orizontal
     în interiorul containerului ei. */
  .calendar-week-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: 48px repeat(7, minmax(96px, 1fr)) !important;
  }

  .calendar-sidebar-enhanced {
    width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* Formularele din panoul gazdei rămâneau pe 2 coloane sub 640px. */
  .form-grid-2col,
  .editor-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Etichetele minuscule din calendar. */
  .calendar-week-view .more-events,
  .legend-color + span,
  .kpi-label {
    font-size: var(--m-text-xs) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. TABLETĂ (768-1023) — reglaje fine
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {

  .properties-grid-wow,
  .properties-grid,
  .featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .amenities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gallery-grid {
    grid-template-columns: 1.6fr 1fr !important;
    height: 380px !important;
  }

  .gallery-side {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    overflow: hidden;
  }

  .gallery-side .gallery-item:nth-child(n+3) {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. MIȘCARE REDUSĂ — respectată și în stratul mobil
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}