/* Tema "default" - modul Pagini info/legale (pagina_info.php). */
.pub-info-page-page {
width: 100%;
}
.pub-info-page-updated {
color: var(--pub-text-muted);
font-size: 13px;
margin: -8px 0 16px;
}
/* Inaltime fixa + object-fit:cover - fara asta, la latimea intreaga a containerului (dupa ce am
scos limita de 800px de pe .pub-info-page-page), o poza pe verticala ar deveni uriasa. */
.pub-info-page-image {
border-radius: var(--pub-radius);
overflow: hidden;
margin-bottom: 20px;
height: 420px;
}
.pub-info-page-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 700px) {
.pub-info-page-image {
height: 240px;
}
}
.pub-info-page-intro {
color: var(--pub-text-muted);
font-size: 16px;
margin-bottom: 20px;
}
/* Sectiuni ordonate (info_page_sections) - "text" (TinyMCE) sau "imagine_text" (camp imagine +
camp text, randate cu flexbox propriu - fara niciun tag html scris manual in editor). */
.pub-info-page-sections {
display: flex;
flex-direction: column;
gap: 24px;
}
.pub-content-section-text {
font-size: 15px;
line-height: 1.7;
}
/* max-width:100% (nu width:100% fortat) - respecta dimensiunea aleasa manual in TinyMCE (ex. 2
imagini mici puse una langa alta), dar nu lasa o imagine sa depaseasca latimea containerului pe
ecrane inguste (mobil), indiferent de width/height fix salvat pe ![]()
. Trebuie sa ramana
identica cu regula din blog.css - .pub-content-section-text e randata de aceeasi functie
partajata (render_content_sections()) si pe Blog si pe Pagini info, iar ambele fisiere CSS se
incarca pe orice pagina (vezi theme_module_css_tags() din layout_top.php) - o diferenta intre
ele (mai ales cu !important) ar face ca una sa bata cealalta indiferent de ordinea din . */
.pub-content-section-text img {
max-width: 100%;
height: auto;
border-radius: var(--pub-radius);
}
/* Tabel din continutul editorial (TinyMCE) - pe ecrane inguste, un normal fie sparge
layout-ul paginii, fie taie ultimele coloane (vezi raportarea cu captura de pe mobil).
display:block pe il transforma intr-un simplu bloc scrollabil orizontal, pastrand
randurile/celulele intacte in interior - nu are nevoie de un div de invelis in plus, pe care nu-l
putem adauga retroactiv in continutul deja salvat in DB. */
.pub-content-section-text table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pub-content-section-imagine-text img {
max-width: 100%;
height: auto;
border-radius: var(--pub-radius);
}
.pub-content-section-imagine-text {
display: flex;
gap: 24px;
align-items: flex-start;
}
.pub-content-section-imagine-text.pozitie-dreapta {
flex-direction: row-reverse;
}
.pub-content-section-img {
flex: 0 0 45%;
}
.pub-content-section-img.marime-mic {
flex-basis: 30%;
}
.pub-content-section-img.marime-mare {
flex-basis: 60%;
}
.pub-content-section-img.marime-foarte_mare {
flex-basis: 75%;
}
.pub-content-section-img img {
display: block;
width: 100%;
}
.pub-content-section-text-scurt {
flex: 1;
min-width: 0;
font-size: 15px;
line-height: 1.7;
}
@media (max-width: 700px) {
.pub-content-section-imagine-text,
.pub-content-section-imagine-text.pozitie-dreapta {
flex-direction: column;
}
.pub-content-section-img {
flex: 0 0 auto;
width: 100%;
}
}