/*
   LISTĂRI
   Clasele comune paginilor de listare — tip de eveniment
   (/orase/{oras}/{tip}/...) și toate categoriile
   (/orase/{oras}/toate-categoriile/...).

   Scoase din atributele style="" din tip-eveniment.php și toate-tipurile.php.
   Cele două șabloane foloseau exact aceleași declarații pentru titluri, etichetă
   și accente, așa că stau într-un singur fișier — altfel s-ar dubla.

   Se încarcă pe wp_head 102, după toate celelalte: un style="" bate orice clasă,
   deci poziția asta ține regulile cât mai aproape de puterea pe care o aveau.
*/

/* ── Titluri de secțiune ───────────────────────────────────────────────────
   Numele clasei e repetat intenționat (`.x.x`). Titlurile apar și în secțiuni
   întunecate, unde tema le face textul alb cu o regulă de forma `.dark h2`
   (specificitate 0,0,1,1). Ca atribut style="" băteau orice; o clasă simplă
   (0,0,1,0) pierde. Repetarea urcă la 0,0,2,0 fără !important și, spre deosebire
   de `h2.on-titlu`, merge pe orice tag — aceleași stiluri sunt folosite și pe h3
   și pe h5.                                                                     */
.on-titlu.on-titlu {
  color: rgb(85, 85, 85);
}
.on-titlu-caps.on-titlu-caps {
  color: rgb(85, 85, 85);
  text-transform: uppercase;
}
.on-titlu-centrat.on-titlu-centrat {
  text-align: center;
  margin-top: 20px;
}
.on-titlu-centrat-larg.on-titlu-centrat-larg {
  text-align: center;
  margin-top: 50px;
}
.on-titlu-mic.on-titlu-mic {
  text-align: center;
  font-size: 19px !important;
  color: #5a5555;
}
.on-titlu-mediu.on-titlu-mediu {
  text-align: center;
  font-size: 20px !important;
  color: #5a5555;
}
.on-titlu-mare.on-titlu-mare {
  text-align: center;
  font-size: 24px !important;
  color: #5a5555;
}

/* ── Eticheta portocalie din titluri ───────────────────────────────────────
   `!important` e păstrat din original — era scris chiar în atribut, unde bătea
   absolut tot. Fără el, culoarea textului e întrecută de regulile de mai sus. */
.on-eticheta {
  color: #fff4f4ed !important;
  background: #f2694f;
  padding: 1px 9px 1px 6px;
  border-radius: 3px;
  line-height: 2;
  font-weight: bold;
}

/* ── Accente ───────────────────────────────────────────────────────────────*/
.on-accent {
  color: #f2694f;
}
.on-accent-caps {
  color: #f2694f;
  text-transform: uppercase;
}

/* ── Iconuri mari de secțiune ──────────────────────────────────────────────*/
.on-icon {
  color: #5a5555;
  font-size: 3em;
}
.on-icon-mare {
  color: #5a5555;
  font-size: 4em;
}

/* ── Grilă de carduri pe ecrane mari ───────────────────────────────────────
   Ramurile care randează lista eveniment cu eveniment (`add_single_eventon`
   într-un foreach) produc câte un widget EventON COMPLET per eveniment — pe o
   pagină de oraș ies zeci de `.ajde_evcal_calendar` frați, fiecare cu un singur
   card înăuntru. Sub un părinte `display:block` se așază unul sub altul.

   Ramurile care folosesc `[add_eventon_el ... tiles="yes"]` arată deja în grilă,
   fiindcă EventON o face intern. NU le putem folosi peste tot: shortcode-ul ăla
   reinteroghează după interval + oraș, deci pe secțiunile „Alte evenimente" și
   „evenimente similare" ar afișa cu totul alte evenimente decât cele cerute.
   Și nu permite intercalarea cardurilor de reclamă.

   Deci grila se face aici, pe părinte. Nimic din ce produce EventON nu se
   schimbă: aceleași carduri, același schema.org, același „arată mai multe",
   doar aranjate pe coloane în loc de rânduri.

   Măsurat pe /orase/brasov/toate-categoriile/astazi/ înainte de commit:
   4 coloane la 1920px, 3 la 929px, 2 pe la 850px; carduri 447-452px înălțime.  */

@media (min-width: 850px) {

  .col-inner:has(> .ajde_evcal_calendar) {
    display: grid;
    /* auto-fill + minmax dă 2 coloane pe la 850px și 4-5 pe ecran lat, fără
       breakpoint-uri scrise de mână */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    align-items: start;
    /* Fără plafon, pe un monitor lat lista se întindea de la un capăt la altul
       și ieșeau 5-6 carduri pe rând. Cu 1240px, auto-fill dă exact 4:
         4x280 + 3x22 = 1186 <= 1240   da
         5x280 + 4x22 = 1488 >  1240   nu
       Numărul de coloane rămâne dedus din lățimea DISPONIBILĂ, nu din a
       ecranului — secțiunile au containere diferite (măsurat: 686 și 914px pe
       aceeași pagină), deci un repeat(4, ...) fix ar fi înghesuit-o pe cea mică. */
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }

  /* EXCEPȚIA: un singur widget în coloană.
     Regula de mai sus presupune că fiecare copil e un card — adevărat pentru
     ramurile cu `add_single_eventon` într-un foreach, care dau N widget-uri
     frați. Ramurile cu `add_eventon_el` dau însă UN widget cu toate
     evenimentele înăuntru, iar grila îl strângea într-o singură celulă de
     ~286px, cu cardurile tăiate. Măsurat pe
     /orase/brasov/toate-categoriile/weekend/: coloană de 1240px, widget de
     286px.

     Acolo nu trebuie altă grilă, ci NICIUNA: `add_eventon_el` cu `tiles`
     își face singur coloanele din `tile_count`, iar cardurile revin la 303px,
     patru pe rând. Plafonul de lățime și centrarea rămân din regula de sus,
     deci lista tot se aliniază cu restul paginii.

     `:not()` ridică specificitatea peste regula de bază, deci câștigă
     indiferent de ordinea din fișier. */
  .col-inner:has(> .ajde_evcal_calendar):not(:has(> .ajde_evcal_calendar ~ .ajde_evcal_calendar)) {
    display: block;
  }

  /* Plasă contra "grid blowout". O adresă lungă poate împinge o coloană peste
     partea ei și rândul iese strâmb — măsurat cu repeat(4, 1fr):
     225 / 405 / 337 / 456px în loc de patru egale. */
  .col-inner:has(> .ajde_evcal_calendar) > .ajde_evcal_calendar { min-width: 0; }
  .col-inner:has(> .ajde_evcal_calendar) .evoet_title,
  .col-inner:has(> .ajde_evcal_calendar) .evoet_location,
  .col-inner:has(> .ajde_evcal_calendar) .event_location_name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Implicit tot ce nu e card ocupă rândul întreg, apoi scoatem excepțiile.
     În ordinea asta, un element nou adăugat în șablon (un titlu, un [gap]) nu
     poate rupe grila — cel mult ocupă un rând. */
  .col-inner:has(> .ajde_evcal_calendar) > * { grid-column: 1 / -1; }
  .col-inner:has(> .ajde_evcal_calendar) > .ajde_evcal_calendar,
  .col-inner:has(> .ajde_evcal_calendar) > .onevent-ad-card { grid-column: auto; }

  .col-inner:has(> .ajde_evcal_calendar) > .ajde_evcal_calendar {
    margin: 0 !important;
    width: 100%;
  }
  .col-inner:has(> .ajde_evcal_calendar) .eventon_events_list,
  .col-inner:has(> .ajde_evcal_calendar) .eventon_list_event { margin: 0 !important; }

  /* Cardul: din trei coloane pe orizontală devine o coloană pe verticală.
     Rama e aceeași cu a cardurilor de reclamă (onevent-adsense-vizibile.php),
     ca reclama intercalată să nu se distingă de un rezultat. */
  .col-inner:has(> .ajde_evcal_calendar) .evcal_list_a {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 0 0 14px !important;
    border: 1.6px solid #dfdfdf;
    border-radius: 5px;
    overflow: hidden;
  }

  /* Imaginea, sus, pe toată lățimea.
     Clasele sunt dublate și cu !important pentru că dimensiunile (200x94) le
     pune JS-ul EventON la runtime, nu o foaie de stil — nicio regulă CSS nu le
     conține, verificat parcurgând document.styleSheets.
     3:2 fiindcă miniaturile EventON sunt scalate la înălțime 400 păstrând
     proporția: 600x400 e exact 3:2, iar 711x400 și 763x400 se taie neglijabil. */
  .col-inner:has(> .ajde_evcal_calendar) .evoet_c1.evoet_c1 {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    order: 1;
  }
  .col-inner:has(> .ajde_evcal_calendar) .evoet_c1.evoet_c1 .ev_ftImg.ev_ftImg {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 2 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Data, sub imagine, pe un singur rând.
     `evo_start` și `evo_end` sunt două coloane paralele, fiecare cu ziua, data
     și luna stivuite — de aici ieșea „Vin Dum / 28 30 / Aug". Le facem inline
     pe toate, ca textul să curgă normal. Orele se ascund: apar oricum mai jos,
     în `evoet_time_expand`. */
  .col-inner:has(> .ajde_evcal_calendar) .evoet_c2.evoet_c2 {
    width: 100% !important;
    padding: 12px 14px 0 !important;
    order: 2;
  }
  .col-inner:has(> .ajde_evcal_calendar) .evoet_c2.evoet_c2 .evcal_cblock,
  .col-inner:has(> .ajde_evcal_calendar) .evoet_c2.evoet_c2 .evcal_cblock * {
    display: inline !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    line-height: 1.3 !important;
  }
  .col-inner:has(> .ajde_evcal_calendar) .evoet_c2.evoet_c2 .evcal_cblock em { margin-right: 4px !important; }
  .col-inner:has(> .ajde_evcal_calendar) .evoet_c2.evoet_c2 .evcal_cblock em.time { display: none !important; }
  .col-inner:has(> .ajde_evcal_calendar) .evoet_c2.evoet_c2 .evo_end::before { content: "– "; opacity: .6; }

  /* Titlul și restul textului. Titlul se taie la două rânduri, ca pe paginile
     care folosesc deja tiles — altfel un titlu lung face cardul mai înalt decât
     vecinii lui și rândul se dezechilibrează. */
  .col-inner:has(> .ajde_evcal_calendar) .evoet_c3 {
    width: 100% !important;
    padding: 6px 14px 0 !important;
    order: 3;
  }
  .col-inner:has(> .ajde_evcal_calendar) .evoet_title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6em;
  }

  /* Reclama din feed e o celulă ca oricare alta, dar NU se întinde pe înălțimea
     rândului. Conținutul ei e mai scurt decât al unui card de eveniment, iar cu
     stretch rămânea o cutie cu chenar și ~75px de alb dedesubt; cu start se
     termină unde se termină conținutul.
     Măsurat pe unitatea „În feed", care limita imaginea la 50% din card
     ("Lățimea trebuie să fie un număr întreg între 20 și 50"). Din 27 aug 2026
     unitatea de desktop e „Grafic" adaptabil — vezi onevent_card_reclama() în
     functions.php — și își alege singură înălțimea, deci regula rămâne
     necesară din același motiv. */
  .col-inner:has(> .ajde_evcal_calendar) > .onevent-ad-card {
    margin: 0 !important;
    align-self: start;
  }
}