/* Prima pagina epitotal.ro, compactata pe telefon (Marius 23.10.2026: «reducem prima pagina la maxim 10 scroll-uri»,
   fara sa scoatem continut). Tot textul ramane in pagina; pe ecrane mici cardurile se aseaza pe un rand care
   se deruleaza stanga-dreapta. Pe calculator (>= 768px) nu se schimba nimic. Se incarca doar din index.php. */
@media (max-width: 767px) {
  .ah-comp, .ah-comp-int > section { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .ah-comp .mb-16, .ah-comp .mb-12, .ah-comp-int .mb-16, .ah-comp-int .mb-12 { margin-bottom: 1.25rem !important; }
  .ah-comp h2, .ah-comp-int h2 { font-size: 1.6rem !important; line-height: 1.2 !important; margin-bottom: .6rem !important; }
  .ah-comp p.text-xl, .ah-comp-int p.text-xl { font-size: 1.05rem !important; line-height: 1.5 !important; }
  .ah-comp .faq-question { padding: .9rem 1rem !important; }
  .ah-comp .space-y-4 > * + * { margin-top: .6rem !important; }

  /* randuri care se deruleaza orizontal */
  .ah-rand .grid, .ah-blocuri {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 12px !important; padding: 4px 2px 14px; margin-bottom: 0 !important;
  }
  .ah-rand .grid > *, .ah-blocuri > * {
    flex: 0 0 84%; min-width: 0; scroll-snap-align: start; margin: 0 !important;
  }
  .ah-blocuri > .grid { display: contents !important; }
  .ah-rand .grid > table { flex-basis: 88%; }

  /* indiciu: «mai sunt carduri», sub fiecare rand */
  .ah-rand .grid::after, .ah-blocuri::after { content: ""; flex: 0 0 4px; }

  /* cele trei cifre de sub prima imagine, pe un singur rand */
  .ah-trei { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .ah-trei .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .5rem !important; }
  .ah-trei .grid .text-4xl { font-size: 1.75rem !important; }
}

/* a doua trecere (23.10): carduri lungi taiate la inaltime fixa, cu «Citeste tot» (textul ramane in pagina),
   spatii mai mici, subsolul pe doua coloane. Clasa .ah-taie o pune assets/js/acasa-compact.js, doar pe telefon. */
@media (max-width: 767px) {
  .ah-comp, .ah-comp-int > section { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .ah-comp span.uppercase, .ah-comp-int span.uppercase, .ah-comp-int p.uppercase { margin-bottom: .25rem !important; font-size: .7rem !important; }
  .ah-taie { position: relative; max-height: 13.5rem; overflow: hidden; }
  .ah-taie.ah-deschis { max-height: none; }
  .ah-taie:not(.ah-deschis)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5rem; pointer-events: none;
    background: linear-gradient(rgba(255,255,255,0), var(--ah-fundal, #fff));
  }
  .ah-tot { display: inline-block; margin-top: .4rem; font-weight: 700; font-size: .9rem; color: #8E3541; text-decoration: underline; background: none; border: 0; padding: .2rem 0; }
  .ah-comp table td, .ah-comp table th { padding-top: .35rem !important; padding-bottom: .35rem !important; }
  .ah-comp .p-8 { padding: 1.25rem !important; }
  .ah-comp .faq-question { padding: .7rem .9rem !important; font-size: .95rem; }
  .ah-comp .faq-question span { padding-right: .75rem !important; }
  .ah-rand .grid img.h-48, .ah-rand .grid .h-48 { height: 9rem !important; }
  .ah-rand .grid .h-44 { height: 8rem !important; }
  #beforeAfterCarousel img.h-64 { height: 13rem !important; }
  footer.bg-gray-900 { margin-top: 0 !important; }
  footer.bg-gray-900 .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.25rem 1rem !important; }
  footer.bg-gray-900 .grid > div:first-child, footer.bg-gray-900 .grid > div:last-child { grid-column: 1 / -1; }
  footer.bg-gray-900 .space-y-3 > * + * { margin-top: .35rem !important; }
  footer.bg-gray-900 h3 { margin-bottom: .5rem !important; font-size: 1rem !important; }
  footer.bg-gray-900 .grid li, footer.bg-gray-900 .grid a { font-size: .85rem; }
}

/* a treia trecere (23.10): intrebarile frecvente 6 la vedere + «Vezi toate», rezumatul articolelor pe 3 randuri,
   paragrafele lungi de introducere taiate la ~3 randuri cu «Citeste tot». */
@media (max-width: 767px) {
  .ah-comp, .ah-comp-int > section { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  section.relative.text-white.overflow-hidden:first-of-type { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .ah-ascuns { display: none !important; }
  .ah-taie-mic { position: relative; max-height: 4.9rem; overflow: hidden; margin-bottom: 0 !important; }
  .ah-taie-mic.ah-deschis { max-height: none; }
  .ah-taie-mic:not(.ah-deschis)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2rem; pointer-events: none;
    background: linear-gradient(rgba(255,255,255,0), var(--ah-fundal, #fff));
  }
  .ah-rand article p.leading-relaxed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ah-rand article .p-6 { padding: 1rem !important; }
  .ah-rand article h3 { font-size: 1.1rem !important; }
}
@media (max-width: 767px) {
  .ah-taie { max-height: 11.5rem; }
  #inainte-de-prima-sedinta .mt-8 { margin-top: 1rem !important; }
  #inainte-de-prima-sedinta caption { padding-top: .6rem !important; padding-bottom: .3rem !important; }
  #inainte-de-prima-sedinta h3.text-2xl { font-size: 1.3rem !important; }
}
@media (max-width: 767px) {
  .ah-taie { max-height: 8.5rem; }
  .ah-comp h2, .ah-comp-int h2 { font-size: 1.45rem !important; }
  .ah-blocuri h3 { font-size: 1.2rem !important; line-height: 1.25 !important; }
  .ah-blocuri .w-12.h-12, .ah-blocuri .w-10.h-10 { width: 2.25rem !important; height: 2.25rem !important; }
}
@media (max-width: 767px) {
  footer.bg-gray-900 > .container { padding-top: 1.75rem !important; padding-bottom: 1.25rem !important; }
  footer.bg-gray-900 .border-t.mt-12 { margin-top: 1.25rem !important; padding-top: 1rem !important; }
  footer.bg-gray-900 .border-t ul { row-gap: .25rem !important; margin-bottom: .6rem !important; font-size: .8rem !important; }
  footer.bg-gray-900 .grid p { font-size: .9rem; line-height: 1.45; }
  section.relative.text-white.overflow-hidden:first-of-type p.text-lg, section.relative.text-white.overflow-hidden:first-of-type p.text-xl { font-size: 1.02rem !important; line-height: 1.5 !important; margin-bottom: 1.25rem !important; }
}
@media (max-width: 767px) { .ah-blocuri { align-items: flex-start; } }

/* sageti stanga/dreapta sub fiecare rand (Marius 23.10: «in loc de bara de scroll… sageti»); bara de derulare ascunsa */
@media (max-width: 767px) {
  .ah-rand .grid, .ah-blocuri { scrollbar-width: none; }
  .ah-rand .grid::-webkit-scrollbar, .ah-blocuri::-webkit-scrollbar { display: none; }
  .ah-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
  .ah-nav button { width: 40px; height: 40px; border-radius: 9999px; border: 1px solid #E5E7EB; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; color: #111827; }
  .ah-nav button:disabled { opacity: .35; }
  .ah-nav span { font-size: .85rem; color: #6B7280; min-width: 3.2rem; text-align: center; }
}
@media (min-width: 768px) { .ah-nav { display: none; } }
@media (max-width: 767px) {
  .ah-blocuri > .grid > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; margin: 0 !important; }
  .ah-rand .grid, .ah-blocuri { padding-bottom: 4px !important; }
  .ah-nav { margin-top: 4px; gap: 10px; }
  .ah-nav button { width: 34px; height: 34px; }
}