/* ===========================================================================
   Listarea de zi din toate-tipurile.php — cardurile în stilul allevents.in.
   ---------------------------------------------------------------------------
   Se încarcă DOAR pe acest șablon (vezi is_page_template() în functions.php),
   la prioritate 102, deci după eventon.css și onevent.css. Restul listărilor
   (tip-eveniment.php, home, orașe) rămân pe grila din listari.css — de aceea
   câteva reguli seamănă cu cele de acolo fără să fie aceleași: acolo cardurile
   sunt copii direcți ai `.col-inner`, aici stau într-un `.on-feed` al nostru.

   CE SCHIMBĂM, ȘI DIN CE
   Markup-ul e al EventON și nu-l putem atinge (vine din imaginea Docker), deci
   totul e restilizare. Cardul lui arată așa, înăuntrul lui `a.evcal_list_a`:

     .evoet_c1 > .ev_ftImg          poza, ca background-image
     .evoet_c2 > .evcal_cblock      blocul de dată: .evo_start (zi/dată/lună/oră)
                                    și .evo_end (data de sfârșit)
     .evoet_c3
        .evoet_title               titlul
        .evoet_location            📍 + numele locului
        .evoet_time_expand         🕐 + intervalul orar
        .evcal_event_types.ett1    orașul
        .evcal_event_types.ett3    categoriile

   AllEvents pune, sub poză: un rând gri „Sun, 06 Sep • 11:00 AM", titlul bold
   pe două rânduri, locul cu gri, și încă un rând gri („102+ Interested").
   Noi n-avem numărul de interesați în cardul de listă — îl are doar pagina
   evenimentului — așa că pe rândul de jos rămân categoriile, cu aceeași
   greutate vizuală.

   Blocul roșu de dată dispare ca bloc, dar textul lui e singura sursă pentru
   zi/dată/lună/oră, deci nu se ascunde: se aplatizează într-un rând.
   ======================================================================== */

/* --- Capul secțiunii: titlu la stânga, taburile de zile la dreapta ------- */

.on-cap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto 18px;
  text-align: left;
}

/* Titlul: la stânga și fără majuscule, ca la ei. Clasa e dublată în
   listari.css (`.on-titlu-caps.on-titlu-caps`, 0,2,0) ca să bată `style=""`-ul
   de altădată, deci selectorul de aici trebuie să treacă de 0,2,0.
   `flex: 0 1 auto` ca titlul să nu ia tot rândul și să împingă taburile dedesubt. */
.on-cap .on-titlu-caps.on-titlu-caps,
.on-cap .on-titlu.on-titlu {
  flex: 0 1 auto;
  margin: 0;
  text-align: left;
  text-transform: none;
}

/* Taburile. Pe ecran îngust se rotesc pe orizontală în loc să se rupă pe două
   rânduri — scrollbar-ul e ascuns, ca la ei. */
.on-taburi {
  display: flex;
  align-items: center;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}

.on-taburi::-webkit-scrollbar {
  display: none;
}

.on-taburi .on-tab {
  flex: 0 0 auto;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}

.on-taburi .on-tab:hover {
  color: #111827;
}

.on-taburi .on-tab.is-activ {
  color: #111827;
  font-weight: 700;
  border-bottom-color: #111827;
}

/* --- Grila -------------------------------------------------------------- */

/* auto-fill + minmax, cu plafon: 4 pe rând pe ecran lat, fără breakpoint-uri
   scrise de mână. 4x240 + 3x20 = 1020 <= 1240 da; 5x240 + 4x20 = 1280 nu. */
.on-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px 20px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}

/* Butonul. Ascuns implicit — îl arată doar regula din media query de mai jos,
   pentru cazurile în care chiar are ce desfășura. ORDINEA CONTEAZĂ: dacă
   `display:block` ar sta după media query-uri, la specificitate egală ar
   câștiga el și butonul ar apărea și pe telefon, și pe listele scurte. */
.on-vezi-tot {
  display: none;
  margin: 28px auto 0;
  padding: 10px 28px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}

.on-vezi-tot:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

/* Două rânduri, apoi butonul. Numărăm copiii direct: în `.on-feed` intră
   NUMAI carduri și carduri de reclamă, capul și butonul stau în afară, deci
   nth-child nu se poate rupe dacă cineva adaugă un titlu în șablon.

   Doar de la 850px în sus, unde grila are mai multe coloane. Pe telefon o
   coloană înseamnă că „două rânduri" ar fi două evenimente — prea puțin ca să
   merite un buton, deci acolo se afișează tot.

   Butonul apare doar când există a noua celulă. `:has` pe părinte, nu `+` pe
   fratele următor: adiacența ar depinde de ce mai lasă wpautop între cele două
   elemente, iar aici n-avem cum verifica local. */
@media (min-width: 850px) {

  .on-feed:not(.on-feed--tot) > *:nth-child(n+9) {
    display: none;
  }

  .col-inner:has(.on-feed > *:nth-child(9)) .on-vezi-tot {
    display: block;
  }
}

.on-feed > .ajde_evcal_calendar {
  min-width: 0;
  width: 100%;
  margin: 0 !important;
}
/* --- Cardul de reclamă din feed ----------------------------------------- */

/* Aceleași două reguli ca în listari.css, din același motiv: reclama e o
   celulă ca oricare alta, dar își alege singură înălțimea, iar cu stretch
   rămânea o cutie cu chenar și alb dedesubt. */
.on-feed > .onevent-ad-card {
  margin: 0 !important;
  align-self: start;
}

/* --- Secțiunile pe categorie de sub listare ------------------------------
   Caruselul e cel din onevent.css, același cu „Evenimente similare" de pe
   pagina de eveniment. Aici doar strângem spațiile, fiindcă stau trei una sub
   alta, și adăugăm legătura către pagina perechii — plăcile pe care le-au
   înlocuit erau singura cale spre /orase/{oras}/{pereche}/.
   Clasa e dublată ca să treacă de `.on-car-sectiune{padding:40px 0}`, fără
   !important. */

.on-car-sectiune.on-car-sectiune--categorie {
  padding: 26px 0;
}

.on-car-sectiune--categorie + .on-car-sectiune--categorie {
  border-top: 1px solid #eceff1;
}

.on-car-tot {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 10px 28px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.on-car-tot:hover {
  border-color: #9ca3af;
  background: #f9fafb;
  color: #111827;
}

/* Patru carduri pe rând în secțiunile pe categorie, nu trei.
   Caruselul de pe pagina de eveniment rămâne la trei — de aceea regula e
   ancorată în `.on-car-sectiune--categorie`, nu pusă pe `.on-car__card`.
   Aritmetica e cea din onevent.css, cu același `gap:3.35%`:
     4 carduri + 3 spații = 4w + 3 × 3,35 = 100  =>  w = 22,49%
   Doar de la 986px în sus, unde caruselul are oricum săgeți; sub atât rămâne
   cardul lat, tras cu degetul. */
@media (min-width: 986px) {

  .on-car-sectiune--categorie .on-car__card {
    flex: 0 0 22.49%;
  }
}