/**
 * KSSBS.SK - Obsahové podstránky hlavného webu
 * (O škole, Patrón školy, Školská jedáleň …)
 *
 * Farby cez tokeny z _variables.css — v tmavom režime sa prepnú samé
 * (--color-white je „povrch“, --color-gray-900 nadpis, --color-gray-600 text).
 */

/* ============================================
   ÚVOD STRÁNKY
   ============================================ */
.page-hero {
    /* hlavička pláva nad obsahom (--header-offset v _mega-header.css) */
    padding: calc(var(--header-offset) + var(--space-6)) 0 var(--space-12);
    /* jemný prechod modrej školy namiesto plochej farby: svetlo vpravo hore,
       do fialova vľavo dole */
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(255, 255, 255, 0.18), transparent 60%),
        radial-gradient(700px 380px at 0% 110%, rgba(124, 92, 230, 0.35), transparent 62%),
        linear-gradient(135deg, #5b67e8 0%, #4d58d8 50%, #4249c4 100%);
    color: #fff;
}

[data-theme="dark"] .page-hero {
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(165, 180, 252, 0.14), transparent 60%),
        radial-gradient(700px 380px at 0% 110%, rgba(124, 92, 230, 0.22), transparent 62%),
        linear-gradient(135deg, #2b3290 0%, #232a78 55%, #1c2160 100%);
}

.page-hero__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);
}

.page-hero__crumbs a {
    color: inherit;
    text-decoration: none;
}

.page-hero__crumbs a:hover {
    color: #fff;
    text-decoration: underline;
}

.page-hero__crumbs .material-symbols-outlined {
    font-size: 1rem;
}

.page-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: #fff;
    margin: 0;
}

.page-hero__subtitle {
    margin: var(--space-2) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 768px) {
    .page-hero__title {
        font-size: var(--text-5xl);
    }

    .page-hero__subtitle {
        font-size: var(--text-2xl);
    }
}

/* ============================================
   SEKCIE
   ============================================ */
.page-section {
    padding: var(--space-16) 0;
    background: var(--color-white);
}

.page-section--alt {
    background: var(--color-gray-50);
}

.page-section__head {
    max-width: 720px;
    margin-bottom: var(--space-10);
}

.page-section__label {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

.page-section__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
    margin: 0;
}

@media (min-width: 768px) {
    .page-section__title {
        font-size: var(--text-4xl);
    }
}

/* Text + obrázok vedľa seba (na mobile pod sebou) */
.page-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 1024px) {
    .page-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-16);
    }

    .page-split--reverse .page-split__media {
        order: -1;
    }
}

.page-split__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
}

.page-prose {
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

.page-prose p {
    margin: 0 0 var(--space-4);
}

.page-prose p:last-child {
    margin-bottom: 0;
}

.page-prose strong {
    color: var(--color-gray-900);
}

/* Karty s textom (napr. „Čo škola ponúka?“) */
.page-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
}

@media (min-width: 900px) {
    .page-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.page-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-8);
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
}

.page-card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    background: var(--color1-opacity);
    color: var(--color-primary);
}

.page-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
    margin: 0;
}

.page-card__text {
    margin: 0;
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

.page-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-2);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

.page-card__link:hover {
    text-decoration: underline;
}

/* Podstránka vložená ako sekcia (napr. karty škôl) nemá vlastný horný okraj navyše
   ani druhý vnútorný okraj kontajnera (bola by užšia než zvyšok stránky) */
.page-section .schools-section {
    margin-top: 0;
    padding: 0;
    background: none;
}

.page-section .schools-section > .container {
    padding: 0;
    max-width: none;
}

.page-section__title + .page-prose {
    margin-top: var(--space-6);
}

/* Mobil: hlavička nepláva (je dole), stačí menší horný okraj */
@media (max-width: 600px) {
    .page-hero {
        padding-top: var(--space-8);
    }
}

/* Animácie „príchod zboku“ (animate-on-scroll from-left/right) by pred
   zobrazením roztiahli stránku do šírky — sekcia ich oreže. */
.page-section,
.contact-section,
.about-section {
    overflow-x: clip;
}

/* ============================================
   ÚVOD STRÁNKY — varianty
   ============================================ */
.page-hero--compact {
    padding-bottom: var(--space-10);
}

.page-hero__eyebrow {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.page-hero__lead {
    max-width: 720px;
    margin: var(--space-4) 0 0;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.88);
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* Jedáleň: zelená (farba jedálne z admina), tmavšia kvôli bielemu textu */
.page-hero--jedalen {
    background:
        radial-gradient(700px 300px at 90% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
        linear-gradient(135deg, #14532d 0%, var(--color-jedalen-ink) 55%, #1c7a42 100%);
    padding-bottom: calc(var(--space-16) + 40px); /* miesto pre karty, ktoré zasahujú do úvodu */
}

[data-theme="dark"] .page-hero--jedalen {
    background: linear-gradient(135deg, #0d3a20 0%, #134d2c 100%);
}

/* Tlačidlá na farebnom úvode */
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    color: #fff;
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.hero-btn:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.hero-btn--solid {
    background: #fff;
    box-shadow: none;
    color: #14532d;
}

.hero-btn--solid:hover {
    background: #f0fdf4;
}

.hero-btn__ext {
    font-size: 16px;
    opacity: 0.7;
}

/* Nadpis sekcie s odkazom vpravo */
.page-section__head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: none;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: var(--font-semibold);
    color: var(--color-main-ink);
    text-decoration: none;
}

.section-link .material-symbols-outlined {
    font-size: 18px;
    transition: transform var(--transition-fast);
}

.section-link:hover .material-symbols-outlined {
    transform: translateX(3px);
}

.news-grid--4 {
    gap: var(--space-5);
}

@media (min-width: 1200px) {
    .news-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================
   FORMÁTOVANÝ TEXT Z EDITORA (dokumenty, články)
   ============================================ */
.page-prose--rich {
    font-size: 1.0625rem;
    line-height: 1.75;
    overflow-wrap: break-word;
}

.page-prose--rich > :first-child {
    margin-top: 0;
}

.page-prose--rich h2,
.page-prose--rich h3,
.page-prose--rich h4 {
    margin: 1.8em 0 0.6em;
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
}

.page-prose--rich h2 { font-size: var(--text-2xl); }
.page-prose--rich h3 { font-size: var(--text-xl); }
.page-prose--rich h4 { font-size: var(--text-lg); }

.page-prose--rich ul,
.page-prose--rich ol {
    margin: 0 0 var(--space-4);
    padding-left: 1.4em;
}

.page-prose--rich li {
    margin-bottom: 0.35em;
}

.page-prose--rich li::marker {
    color: var(--color-main-ink);
}

/* len skutočné odkazy — <a> bez href (zo starých textov) nemá vyzerať klikateľne */
.page-prose--rich a[href] {
    color: var(--color-main-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.page-prose--rich a[href]:hover {
    text-decoration-thickness: 2px;
}

.page-prose--rich img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-6) auto;
    border-radius: var(--radius-xl);
}

/* Malé obrázky v texte (ikonky, smajlíky) ostanú v riadku — trieda z kss-widgets.js */
.page-prose--rich img.is-inline {
    display: inline;
    margin: 0 2px;
    border-radius: 0;
    vertical-align: -3px;
}

.page-prose--rich blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-gray-50);
    font-style: italic;
    color: var(--color-gray-700);
}

.page-prose--rich hr {
    margin: var(--space-8) 0;
    border: 0;
    height: 1px;
    background: var(--color-gray-200);
}

.page-prose--rich table {
    width: 100%;
    margin: var(--space-6) 0;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

/* <figure class="table"> / obrázok z editora — bez predvoleného odsadenia 40 px */
.page-prose--rich figure {
    margin: var(--space-6) 0;
}

/* Široká tabuľka sa na mobile posúva do strany (obal z kss-widgets.js) */
.page-prose--rich .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    margin: var(--space-6) 0;
}

.page-prose--rich .table-wrap table {
    margin: 0;
}

.page-prose--rich th,
.page-prose--rich td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-gray-200);
    text-align: left;
    vertical-align: top;
}

.page-prose--rich th {
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
    background: var(--color-gray-50);
}

/* ============================================
   ŠKOLSKÁ JEDÁLEŇ
   ============================================ */
.jed-facts-wrap {
    background: var(--color-white); /* v tmavom režime inak pás farby pozadia stránky */
}

[data-theme="dark"] .page-section__label {
    color: var(--color-main-ink);
}

.jed-facts {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: calc((var(--space-16) + 8px) * -1);
}

@media (min-width: 768px) {
    .jed-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.jed-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    background: var(--color-white);
    box-shadow: var(--shadow-xl);
}

.jed-fact__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-xl);
    background: var(--color-jedalen-tint);
    color: var(--color-jedalen-ink);
}

.jed-fact__label {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-500);
}

.jed-fact__value {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
}

.jed-fact__value--text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
}

.jed-fact__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 6px 0 0;
}

.jed-fact__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--font-semibold);
    color: var(--color-jedalen-ink);
    text-decoration: none;
}

.jed-fact__links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jed-fact__links .material-symbols-outlined {
    font-size: 18px;
}

/* Platby */
.jed-pay {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

@media (min-width: 960px) {
    .jed-pay {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: var(--space-12);
    }
}

.jed-note {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-ms-tint);
    color: var(--color-ms-ink);
}

.jed-note p {
    margin: 0;
    color: inherit;
}

.jed-bank {
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    background: var(--color-gray-50);
}

.jed-bank__label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-500);
}

.jed-bank__label--gap {
    margin-top: var(--space-6);
}

.jed-bank__iban {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 10px 10px 16px;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.jed-bank__iban code {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-gray-900);
    white-space: nowrap; /* IBAN v jednom riadku — tak sa prepisuje do banky */
}

@media (max-width: 420px) {
    .jed-bank__iban code {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.jed-bank__copy {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-jedalen-tint);
    color: var(--color-jedalen-ink);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.jed-bank__copy:hover {
    transform: scale(1.05);
}

.jed-bank__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.jed-bank__row:last-child {
    border-bottom: 0;
}

.jed-bank__row strong {
    color: var(--color-gray-900);
}

.jed-small {
    max-width: 860px;
    margin: var(--space-8) 0 0;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-500);
}

/* Jedálny lístok + dodávatelia */
.jed-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
}

@media (min-width: 960px) {
    .jed-menu {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: var(--space-16);
    }
}

.jed-menu__intro {
    margin: var(--space-6) 0 var(--space-4);
    color: var(--color-gray-600);
}

.jed-menu__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.jed-menu__list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-gray-50);
    font-weight: var(--font-medium);
    color: var(--color-gray-800);
}

.jed-menu__list .material-symbols-outlined {
    flex: none;
    color: var(--color-jedalen-ink);
}

.jed-menu__note {
    margin: var(--space-5) 0 0;
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

.jed-suppliers {
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    background: var(--color-gray-50);
}

.jed-suppliers__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-gray-900);
}

.jed-suppliers__title .material-symbols-outlined {
    color: var(--color-jedalen-ink);
}

.jed-suppliers ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jed-suppliers li {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

@media (max-width: 600px) {
    .page-hero--jedalen {
        padding-bottom: calc(var(--space-12) + 40px);
    }

    .jed-facts {
        margin-top: calc((var(--space-12) + 8px) * -1);
    }
}

/* ============================================
   PATRÓN, PARTNERSKÁ ŠKOLA, PROJEKTY, HLÁSENIE PORÚCH
   (patron-skoly.php, partnerska-skola.php, projekty.php a stránky projektov,
   hlasenie.php) — texty zo starého webu
   ============================================ */

/* Úzky stĺpec dlhého textu */
.page-narrow { max-width: 760px; }

/* Citáty z Písma */
.page-quotes {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.page-quote {
    margin: 0;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-2xl);
    background: var(--color1-opacity);
}

.page-quote p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-900);
}

.page-quote cite {
    display: block;
    margin-top: var(--space-2);
    font-style: normal;
    font-weight: var(--font-semibold);
    color: var(--color-primary);
}

/* Fotky pod sebou / vedľa seba */
.page-photos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

@media (min-width: 700px) {
    .page-photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-photos img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
}

/* Karty projektov (odkazy) */
.page-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

@media (min-width: 900px) {
    .page-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.page-link-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-2xl);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.page-link-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.page-link-card__label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

.page-link-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
}

.page-link-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    font-weight: var(--font-semibold);
    color: var(--color-primary);
}

/* Údaje o projekte (kľúč → hodnota) */
.page-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    margin: var(--space-6) 0;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--color-gray-200);
}

.page-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--color-white);
}

@media (min-width: 700px) {
    .page-facts > div { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); }
}

.page-facts dt {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-500);
}

.page-facts dd {
    margin: 0;
    color: var(--color-gray-900);
}

/* Rozbaľovacie pozície (náplň práce) */
.page-acc {
    display: grid;
    gap: var(--space-3);
}

.page-acc details {
    border-radius: var(--radius-2xl);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.page-acc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-gray-900);
    cursor: pointer;
    list-style: none;
}

.page-acc summary::-webkit-details-marker { display: none; }
.page-acc summary .material-symbols-outlined { transition: transform 0.2s; color: var(--color-primary); }
.page-acc details[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.page-acc__body { padding: 0 var(--space-6) var(--space-6); }
.page-acc__body h4 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-base); color: var(--color-gray-900); }

/* Logá financovania (národný projekt) */
.page-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-2xl);
    background: #fff; /* logá sú na bielom aj v tmavom režime */
}

.page-logos img { display: block; max-width: 100%; height: auto; max-height: 56px; }

/* Strany dokumentu (zmluva, výkresy) */
.page-doc-pages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    gap: var(--space-4);
}

.page-doc-pages a {
    display: grid;
    gap: var(--space-2);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    text-decoration: none;
}

.page-doc-pages img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s, box-shadow 0.2s;
}

.page-doc-pages--wide img { aspect-ratio: 4 / 3; object-fit: contain; }
.page-doc-pages a:hover img { transform: translateY(-3px); box-shadow: var(--shadow-xl); }

/* Formulár hlásenia porúch */
.fault-form {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}

.fault-form__row { display: grid; gap: var(--space-5); }

@media (min-width: 700px) {
    .fault-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fault-form label { display: grid; gap: var(--space-2); font-weight: var(--font-semibold); color: var(--color-gray-900); }
.fault-form .req { color: #c2410c; }
.fault-form small { font-weight: 400; color: var(--color-gray-500); }

.fault-form input,
.fault-form textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    color: var(--color-gray-900);
    font: inherit;
    font-weight: 400;
}

.fault-form textarea { min-height: 150px; resize: vertical; }

.fault-form input:focus,
.fault-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color1-opacity);
}

.fault-form [aria-invalid="true"] { border-color: #dc2626; }
.fault-form__error { margin: 0; color: #dc2626; font-size: var(--text-sm); font-weight: 400; }
.fault-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fault-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.fault-form__actions p { margin: 0; color: var(--color-gray-500); font-size: var(--text-sm); }

.fault-alert {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color1-opacity);
    color: var(--color-gray-900);
}

.fault-alert--ok { background: rgba(22, 163, 74, 0.12); }
.fault-alert--err { background: rgba(220, 38, 38, 0.1); }
.fault-alert p { margin: 0; }