/* ============================================================================ despre.css · §Despre companie DSP-3 SCARA-STRICTA Cele doua carduri pe un rand se fac prin `.cd-row`, clasa temei — exact cum le pune Raportari (`analiza-raportari.php:1186`). Pe DESKTOP `.cd-row` e deja ce trebuie (`mds-design.css:794-797`). Pe MOBIL devine pista de swipe, cu carduri patrate. ⚠⚠ DOUA BUG-URI REPARATE AICI, amandoua din declaratii LIPSA. O regula scrisa nu e o regula aplicata (R3); niciuna nu s-ar fi vazut citind ce am scris, doar rezolvand cascada. 1 · `flex-direction: row` `.mdsx .cd-row` are `flex-direction:column` (design:794, 0,2,0). DSP-1 seta `display:flex` dar nu si directia, deci `column` ramanea in picioare: cardurile stateau unul sub altul si `overflow-x:auto` n-avea ce derula. Valorile fusesera copiate de la `.cd-track`, care nu mosteneste `column` de nicaieri. 2 · `align-items: flex-start` Implicitul unui container de flex e `stretch`. Cardul se intindea la inaltimea fratelui mai inalt, ceea ce ANULEAZA `aspect-ratio:1`. DSP-2 punea `aspect-ratio` si nu se aplica niciodata. ⚠ `.cd-track` nu se putea folosi direct: pe desktop tema o face `repeat(4,...)` (design:978), scrisa pentru „Cele patru unghiuri". ⚠ `.pc` nu se putea folosi: pe mobil arata O SINGURA coloana o data, prin comutator (design:455-456). SPECIFICITATE. `.mdsx .cd-row.dsp__2col` = 0,3,0 bate `.mdsx .cd-row` = 0,2,0. Fisierul primeste `mds-design` ca dependenta si se tipareste dupa el (ARH-SEC-3, `inc/sections/01-ordine-css.php`). ============================================================================ */ /* ── PISTA DE SWIPE, pe mobil ────────────────────────────────────────────── ⚠ `scroll-padding-inline` NU e optional: `scroll-snap-align:start` aliniaza la marginea SCROLLPORTULUI, care ignora `padding-left`. Fara el, dupa primul swipe fiecare card se opreste lipit de marginea ecranului (explicatia, in tema, la design:958). Aceeasi valoare cu padding-ul. */ .mdsx .cd-row.dsp__2col{ display: flex; flex-direction: row; /* ⚠ REPARATIE 1 — bate design:794 */ align-items: flex-start; /* ⚠ REPARATIE 2 — `stretch` anula patratul */ overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 12px; /* --s-3, 00-scala.css:100 */ margin: 0 -20px; /* design:963 */ padding: 0 20px 2px; /* design:963 */ scroll-padding-inline: 20px; /* design:963 */ scrollbar-width: none; -ms-overflow-style: none; } .mdsx .cd-row.dsp__2col::-webkit-scrollbar{ display: none; } /* 76% lasa o felie buna din al doilea card: fara ea nimic nu spune ca se poate trage. `.mdsx .cd` are `margin-top:22px` la orice latime (design:726), care pe un rand de flex ar fi decalat cardurile pe verticala. */ .mdsx .cd-row.dsp__2col > .cd{ flex: 0 0 76%; scroll-snap-align: start; min-width: 0; margin-top: 0; } /* ── TEXTUL PLIAT ────────────────────────────────────────────────────────── `.lede` are `margin:20px 0 0` (design:441); primul paragraf din card nu-l vrea, are deja `padding-top` de la `.cd__body` (design:731). */ .mdsx .dsp__txt > .lede:first-child{ margin-top: 0; } /* ⚠ DERULAREA NU SARE LA INCHIDERE. Tiparul temei, raportari.css:571-582. Cand textul pliat dispare, butonul de sub el urca si pagina ramane unde era: sub card, in sectiunea urmatoare. `overflow-anchor:none` pe blocul care se schimba ii spune browserului sa nu se agate de el, deci ancora ramane butonul — care are deja `overflow-anchor:auto` din `raportari.css:582`, fiindca refolosim `.rp__x`. ⚠ NU l-am pus in DSP-3. Regula temei tinteste `.rp__more`, iar textul meu e in `.dsp__txt`, deci n-o prindea. Butonul o prindea, textul nu. ⚠ Chrome, Edge si Firefox il respecta. SAFARI IL IGNORA — asa scrie si comentariul temei de la raportari.css:575. Pentru iOS e nevoie de `assets/js/mds-despre.js`, care face aceeasi treaba prin scroll. */ .mdsx .dsp__txt{ overflow-anchor: none; } /* Estompare la taietura, ca sa se vada ca textul continua. Fara ea, randul de jos pare o propozitie terminata si butonul pare fara rost. */ .mdsx .rp__x-t:not(:checked) ~ .dsp__txt{ overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); } /* ── MOBIL · cardul e PATRAT ─────────────────────────────────────────────── Inaltimea textului NU se calculeaza din capul meu: cardul e patrat prin `aspect-ratio`, iar textul primeste ce ramane, prin flex. Zero valori magice de inaltime — deci nu se strica daca titlul creste cu un rand sau daca fontul e altul. ⚠ `min-height:0` pe fiecare treapta: un item de flex nu coboara sub inaltimea continutului lui fara asta, deci `overflow:hidden` n-ar taia nimic si patratul ar creste. ⚠ `:has()` e folosit deja in tema (design:955), deci nu introduce o cerinta noua de browser. Deschis, cardul iese din patrat si creste cat ii trebuie. */ @container mdsx (max-width:899px){ .mdsx .cd-row.dsp__2col > .cd{ aspect-ratio: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .mdsx .cd-row.dsp__2col .cd__top{ flex: 0 0 auto; } .mdsx .cd-row.dsp__2col .cd__body{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .mdsx .cd-row.dsp__2col .dsp__txt{ flex: 1 1 auto; min-height: 0; } /* butonul se lipeste de baza patratului, orice inaltime ar avea textul */ .mdsx .cd-row.dsp__2col .rp__x{ flex: 0 0 auto; margin-top: auto; } .mdsx .cd-row.dsp__2col > .cd:has(.rp__x-t:checked){ aspect-ratio: auto; overflow: visible; } } /* ── DESKTOP · se revine exact la `.cd-row` ──────────────────────────────── ⚠ `align-items:start` ca la cele doua carduri din Raportari (raportari.css:591): unul are patru paragrafe, celalalt trei, si arata prost egalizate la aceeasi inaltime. Aici nu exista patrat, deci taietura are nevoie de o inaltime: sapte randuri de `.lede`, adica 7 x 1.6 = 11.2em. In `em`, nu in px, ca sa urmeze fontul. */ @container mdsx (min-width:900px){ .mdsx .cd-row.dsp__2col{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* design:796 */ gap: 22px; /* design:796 */ align-items: start; /* raportari.css:591 */ overflow: visible; margin: 0; padding: 0; } .mdsx .cd-row.dsp__2col > .cd{ margin-top: 22px; } /* design:797 */ .mdsx .rp__x-t:not(:checked) ~ .dsp__txt{ max-height: 11.2em; } }