/* ══ CARDURILE DIN LISTĂRI: ACELAȘI CARD, MICȘORAT — 3 PE RÂND PE PC, 1 PE TELEFON ══ Legată din includes/specialist-banner.php, deci pe toate cele 8 pagini de listare: psihologi, psihiatri, neurologi, medici, nutritionisti, dezvoltare-personala, videoclipuri-alimentatie. 24 sept 2026, cerere a utilizatorului: cardul „doar scalat și poziționat așa cum era"; întâi 4 pe rând pe PC și 3 pe telefon, apoi „să mărim cardurile": 3 pe rând pe PC, 2 pe tabletă, unul pe rând pe telefon; apoi „cardurile de pe telefon identice cu cele de pe PC". Deci cardul își păstrează desenul (poza în stânga, specializările în dreapta, subsolul cu nume, preț și buton), la lățimea lui de referință (--card-baza, 500px) și e micșorat proporțional cu `zoom`, ca să intre exact în coloană: textul, poza și butonul scad toate în aceeași proporție. Pe telefon e tot desenul de PC, micșorat (~0,72 la 390px); desenul e blocat mai jos, ca foile paginilor să nu-l schimbe. Factorul --k (lățimea coloanei / lățimea de referință) îl calculează assets/js/carduri-listare.js. Valorile de aici sunt doar o aproximare, până rulează scriptul. (Nu se poate calcula din CSS: ar însemna o lungime împărțită la o lungime.) */ section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) { --card-baza: 500px; --k: 0.8; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; max-width: none !important; margin: 0 !important; padding: 0 !important;} /* mesajele „se încarcă" / „niciun rezultat" ocupă tot rândul */ section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) > :not(a) { grid-column: 1 / -1;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) > :is(.psy-card, .coach-card, .nut-card) { width: var(--card-baza) !important; max-width: none !important; zoom: var(--k);} @media (max-width: 900px) { section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) { --k: 0.72; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important;} } /* Telefon: un card pe rând, ACELAȘI desen ca pe PC, micșorat să intre în lățime (cererea utilizatorului: „cardurile de pe telefon identice cu cele de pe PC") */ @media (max-width: 600px) { section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) { --k: 0.716; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important;} } /* Căutarea ascunde cardurile cu [hidden]; trebuie să bată `display: flex !important` de mai jos */ section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) > :is(.psy-card, .coach-card, .nut-card)[hidden] { display: none !important;} /* ══ DESENUL DE PC, BLOCAT LA ORICE LĂȚIME ════════════════════════════════ Foile paginilor (psihologi.css, listare-specialisti.css, nutritionisti.css, dezvoltare-personala.css, videoclipuri-alimentatie.css) și phone-perfect.css schimbau cardul pe ecranele înguste: poza sus, subsolul pe două rânduri, `display: block`... Aici sunt valorile de pe PC (aceleași în toate cele cinci foi), cu specificitate de id și !important, ca media query-urile lor să nu le mai atingă. Cardul arată la fel peste tot; mărimea o dă doar `zoom`. */ section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card, .coach-card, .nut-card) { display: flex !important; flex-direction: column !important; border-radius: 22px !important; overflow: hidden !important; min-height: 260px !important; height: auto !important; padding: 0 !important; margin: 0 !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-main, .coach-card-main, .nut-card-main) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-end !important; gap: 24px !important; padding: 22px 24px 0 !important; flex: 1 1 auto !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-photo-wrap, .coach-card-photo-wrap, .nut-card-photo-wrap) { position: relative !important; flex: 0 0 auto !important; width: 180px !important; height: 220px !important; max-width: none !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-photo-frame, .coach-card-photo-frame, .nut-card-photo-frame) { width: 100% !important; height: 100% !important; border-radius: 16px 16px 0 0 !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-photo, .coach-card-photo, .nut-card-photo) { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.coach-card-vcount, .nut-card-vcount) { display: block !important; position: absolute !important; bottom: 10px !important; left: 50% !important; transform: translateX(-50%) !important; padding: 4px 14px !important; border-radius: 8px !important; font-size: 0.75rem !important; white-space: nowrap !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-specs, .coach-card-specs, .nut-card-specs) { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 0 !important; align-self: flex-start !important; padding: 4px 0 14px !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-specs-title, .coach-card-specs-title, .nut-card-specs-title) { display: block !important; font-size: 1.35rem !important; font-weight: 800 !important; margin: 0 0 16px !important; text-align: left !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-spec-list, .coach-card-spec-list, .nut-card-spec-list) { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 10px !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-spec-item, .coach-card-spec-item, .nut-card-spec-item) { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 16px !important; border-radius: 14px !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-spec-dot, .coach-card-spec-dot, .nut-card-spec-dot) { display: block !important; width: 10px !important; height: 10px !important; flex: 0 0 10px !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-spec-text, .coach-card-spec-item > span:last-child, .nut-card-spec-item > span:last-child) { flex: 1 1 auto !important; min-width: 0 !important; font-size: 0.95rem !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-footer, .coach-card-footer, .nut-card-footer) { position: relative !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; padding: 14px 24px !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-name, .coach-card-name, .nut-card-name) { order: 0 !important; flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; font-size: 1.1rem !important; font-weight: 800 !important; text-align: left !important; margin: 0 !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) .psy-card-price { order: 0 !important; margin: 0 0 0 auto !important; font-size: 1.15rem !important; font-weight: 800 !important; white-space: nowrap !important; text-align: left !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-book, .coach-card-book, .nut-card-book) { order: 0 !important; flex: 0 0 auto !important; width: auto !important; padding: 10px 24px !important; border-radius: 14px !important; font-size: 0.9rem !important; font-weight: 700 !important; text-align: center !important;} /* fără preț (paginile cu videoclipuri) butonul stă în dreapta, ca pe PC */ section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.coach-card-book, .nut-card-book) { margin: 0 0 0 auto !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) .psy-card-book { margin: 0 !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-cert, .coach-card-cert, .nut-card-cert) { position: absolute !important; top: 14px !important; right: 14px !important; z-index: 6 !important; display: flex !important; align-items: center !important; gap: 5px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; font-size: 0.75rem !important; font-weight: 700 !important;} section.glass :is(#psychologistsGrid, #nutGrid, #coachesGrid) :is(.psy-card-cert-check, .coach-card-cert-check, .nut-card-cert-check) { width: 20px !important; height: 20px !important; font-size: 0.65rem !important;} /* ══ CARDURILE CU VIDEOCLIPURI: PANOUL „SERIE VIDEO" ══════════════════════ 28 sept 2026, cererea utilizatorului: pe „Dezvoltare personală" și „Alimentație sănătoasă" au dispărut specializările și insigna „N video"; în locul lor, coperta celui mai nou videoclip (fără titlu — tot la cererea utilizatorului), cu butonul-piatră de redare, ca să fie limpede că de aici se ajunge la videoclipuri. Când sunt mai multe, două cadre discrete în spatele copertei sugerează seria (fără număr). Totul static, fără efecte. Datele: `ultimul` din api/videos_hub_list.php și din videoclipuri-alimentatie.php. */ /* fără titlu, panoul e mai scurt decât poza: îl centrăm pe înălțimea ei */ section.glass :is(#nutGrid, #coachesGrid) .vc-panou { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 0 !important; align-self: center !important; padding: 0 0 22px !important;} section.glass :is(#nutGrid, #coachesGrid) .vc-eticheta { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 20px !important; font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #0a3aa5 !important;} section.glass :is(#nutGrid, #coachesGrid) .vc-eticheta-ico { display: inline-block !important; width: 0 !important; height: 0 !important; border-style: solid !important; border-width: 5px 0 5px 8px !important; border-color: transparent transparent transparent #0a3aa5 !important;} /* teancul: coperta + (dacă sunt mai multe) două cadre în spate, ușor mai sus */ section.glass :is(#nutGrid, #coachesGrid) .vc-stiva { position: relative !important; isolation: isolate !important;} section.glass :is(#nutGrid, #coachesGrid) .vc-stiva.vc-mai-multe::before, section.glass :is(#nutGrid, #coachesGrid) .vc-stiva.vc-mai-multe::after { content: '' !important; position: absolute !important; z-index: -1 !important; left: 7% !important; right: 7% !important; top: -8px !important; bottom: 8px !important; border-radius: 12px !important; background: #c6d8f1 !important; border: 1px solid rgba(10, 58, 165, 0.14) !important;} section.glass :is(#nutGrid, #coachesGrid) .vc-stiva.vc-mai-multe::after { left: 14% !important; right: 14% !important; top: -15px !important; bottom: 15px !important; background: #d3e2f5 !important; z-index: -2 !important;} section.glass :is(#nutGrid, #coachesGrid) .vc-ecran { position: relative !important; overflow: hidden !important; aspect-ratio: 16 / 9 !important; width: 100% !important; border-radius: 12px !important; background: #0f2a52 !important; border: 1px solid rgba(10, 58, 165, 0.2) !important; box-shadow: 0 8px 18px rgba(10, 58, 165, 0.16) !important;} section.glass :is(#nutGrid, #coachesGrid) .vc-ecran img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; display: block !important;} /* coperta întreagă în cadru (ca pe profil), aceeași poză estompată pe goluri */ section.glass :is(#nutGrid, #coachesGrid) .vc-fond { object-fit: cover !important; filter: blur(12px) saturate(1.1) !important; transform: scale(1.2) !important; opacity: 0.9 !important;} section.glass :is(#nutGrid, #coachesGrid) .vc-coperta { object-fit: contain !important;} /* voal fin, ca butonul să se vadă pe orice copertă */ section.glass :is(#nutGrid, #coachesGrid) .vc-ecran::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(8, 23, 49, 0) 45%, rgba(8, 23, 49, 0.45) 100%) !important;} /* butonul-piatră de redare, ca în Mativera+ */ section.glass :is(#nutGrid, #coachesGrid) .vc-play { position: absolute !important; z-index: 2 !important; left: 50% !important; top: 50% !important; width: 46px !important; height: 46px !important; margin: -23px 0 0 -23px !important; border-radius: 50% !important; background: radial-gradient(130% 150% at 100% 0%, #6ec1ff 0%, #2a6fd0 38%, #0a3aa5 72%, #072a7a 100%) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 8px 20px rgba(7, 42, 122, 0.45) !important;} section.glass :is(#nutGrid, #coachesGrid) .vc-play::before { content: '' !important; position: absolute !important; left: 50% !important; top: 50% !important; margin: -8px 0 0 -5px !important; border-style: solid !important; border-width: 8px 0 8px 13px !important; border-color: transparent transparent transparent #ffffff !important;} section.glass :is(#nutGrid, #coachesGrid) .vc-durata { position: absolute !important; z-index: 2 !important; right: 8px !important; bottom: 8px !important; padding: 2px 7px !important; border-radius: 6px !important; background: rgba(8, 23, 49, 0.82) !important; color: #ffffff !important; font-size: 0.72rem !important; font-weight: 700 !important; line-height: 1.4 !important;} /* butonul din subsol: cu semnul de redare în față */ section.glass :is(#nutGrid, #coachesGrid) :is(.coach-card-book, .nut-card-book) { display: inline-flex !important; align-items: center !important; gap: 8px !important;} /* ::before era „unda" animată la hover din foile paginilor (absolut, rotund, centrat): o înlocuim cu triunghiul de redare, static */ section.glass :is(#nutGrid, #coachesGrid) :is(.coach-card-book, .nut-card-book)::before, section.glass :is(#nutGrid, #coachesGrid) :is(.coach-card-book, .nut-card-book):hover::before { content: '' !important; display: inline-block !important; position: static !important; width: 0 !important; height: 0 !important; transform: none !important; background: none !important; border-radius: 0 !important; transition: none !important; border-style: solid !important; border-width: 5px 0 5px 8px !important; border-color: transparent transparent transparent currentColor !important;} /* ══ SPECIALIZĂRILE PE CARDURILE DE SPECIALIȘTI (includes/specialist-card.php) ══ 28 sept 2026, cererea utilizatorului: fără casete albastre și fără buline — text simplu. Toate specializările, în coloane de câte 4; între coloane, o bară verticală (a 5-a specializare începe coloana a doua ș.a.m.d.). Cu mai puțin de 4, lista stă centrată pe înălțimea panoului. Cu mai multe coloane, textul se micșorează, iar ce nu încape se termină cu „…" (numele întreg apare la trecerea cu mouse-ul). */ section.glass :is(#psychologistsGrid, #nutGrid) .psy-card .psy-card-specs { align-self: stretch !important; padding: 4px 0 18px !important;} /* stretch: coloanele au înălțimea celei mai lungi, deci bara merge pe toată lista */ section.glass :is(#psychologistsGrid, #nutGrid) .psy-spec-grila { display: flex !important; flex-direction: row !important; flex: 1 1 auto !important; min-width: 0 !important; align-items: stretch !important;} section.glass :is(#psychologistsGrid, #nutGrid) .psy-spec-grila.psy-spec-putine { align-items: center !important;} /* lățimea după conținut (numele lungi iau mai mult loc); se strâng doar dacă nu încap */ section.glass :is(#psychologistsGrid, #nutGrid) .psy-spec-col { display: flex !important; flex-direction: column !important; gap: 14px !important; flex: 0 1 auto !important; min-width: 0 !important; list-style: none !important; margin: 0 !important; padding: 0 !important;} /* bara dintre coloane */ section.glass :is(#psychologistsGrid, #nutGrid) .psy-spec-col + .psy-spec-col { margin-left: 14px !important; padding-left: 14px !important; border-left: 2px solid rgba(10, 58, 165, 0.22) !important;} section.glass :is(#psychologistsGrid, #nutGrid) .psy-spec { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.3 !important; color: #0b1623 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;} section.glass :is(#psychologistsGrid, #nutGrid) .psy-spec-coloane-2 .psy-spec { font-size: 0.86rem !important;} section.glass :is(#psychologistsGrid, #nutGrid) .psy-spec-coloane-3 .psy-spec { font-size: 0.76rem !important;} /* 3 coloane: spațiu mai mic lângă bare și o lățime minimă pe coloană, ca o coloană cu nume scurte („Cuplu") să nu se strângă la „Cu…" din cauza unei coloane lungi */ section.glass :is(#psychologistsGrid, #nutGrid) .psy-spec-coloane-3 .psy-spec-col { min-width: 4.2em !important;} section.glass :is(#psychologistsGrid, #nutGrid) .psy-spec-coloane-3 .psy-spec-col + .psy-spec-col { margin-left: 8px !important; padding-left: 8px !important;}