/*
 * custom.css — nadpisania CSS per-klient
 *
 * Ten plik ładowany jest PO głównym style.css szablonu,
 * więc każda reguła tutaj ma wyższy priorytet.
 *
 * Plik jest opcjonalny — jeśli nie istnieje, nic się nie ładuje.
 * Wersja cache-bustingu aktualizuje się automatycznie po zapisaniu pliku.
 *
 * Przykłady użycia:
 *
 * Zmiana rozmiaru logo:
 *   .site-header__logo img { max-height: 80px; }
 *
 * Inne kolory primary:
 *   :root { --color-primary: #e63946; --color-primary-dark: #c1121f; }
 *
 * Ukrycie elementu:
 *   .countdown-bar { display: none; }
 */

/* ═══ sc0487 — Zespół Szkół Przemysłu Mody w Łodzi: układ wg medyk-stg.pl (wytyczne klienta) ═══ */
:root{--zspm-yellow:#fcc02c;--zspm-ink:#1a1a1a}

/* Logo poziome z nazwą w obrazku — tekst nazwy tylko dla czytników ekranu */
.brand__logo{width:auto;height:4rem;aspect-ratio:auto}
.brand__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){.brand__logo{width:auto;height:2.6rem}}

/* Menu: „Strona główna” jako ikona domku (nazwa zostaje dla czytników) */
.navbar .main-nav__item:first-child>.main-nav__link{font-size:0;letter-spacing:0}
.navbar .main-nav__item:first-child>.main-nav__link::before{content:'';display:block;width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12H3l9-9 9 9h-2'/%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12H3l9-9 9 9h-2'/%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6'/%3E%3C/svg%3E") center/contain no-repeat}

/* Baner: grafiki klienta 2500×750 z napisami w obrazie — cały obraz (10:3), bez przyciemnienia i bez nazwy szkoły na wierzchu */
.hero__slide{min-height:0;aspect-ratio:10/3}
.hero__shade{display:none}
.hero__inner{padding-top:24px;padding-bottom:24px}
.hero .prose-hero:has(.hero__fallback-title){display:none}
.hero__slider .splide__pagination{bottom:16px}
.hero__slider .splide__arrows{bottom:12px}

/* Skróty (menu pod zdjęciem): niebieski pas na całą szerokość, białe ikony */
.hero+.shortcuts,.shortcuts{margin:0}
.shortcuts{background:var(--color-primary)}
.shortcuts__list{background:none;box-shadow:none;border:0;border-radius:0}
.shortcuts__list>li+li{border-left:0}
.shortcut,.shortcuts__list>li:nth-child(even) .shortcut{--sc:#fff;min-height:0;padding:22px 12px;gap:10px}
.shortcut__icon{width:44px;height:44px;padding:0;border-radius:0;background:none;color:#fff}
.shortcut__title{color:#fff;font-weight:600;font-size:1.05rem}
.shortcut:hover,.shortcut:focus-visible{background:rgba(255,255,255,.1)}
.shortcuts{--szk-focus:#fff}

/* Pasek Funduszy Europejskich (blok tekstowy „Fundusze Europejskie”): sam obraz na białym tle */
.section-blok[aria-label="Fundusze Europejskie"]{padding:44px 0 0;background:none;color:inherit}
.section-blok[aria-label="Fundusze Europejskie"] .band{display:block}
.section-blok[aria-label="Fundusze Europejskie"] .band__icon,
.section-blok[aria-label="Fundusze Europejskie"] .btn{display:none}
.section-blok[aria-label="Fundusze Europejskie"] .band__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.section-blok[aria-label="Fundusze Europejskie"] .band__text{margin:0}
.section-blok[aria-label="Fundusze Europejskie"] .band__text img{display:block;max-width:1100px;margin:0 auto}

/* Kierunki: nagłówek na środku jak we wzorze */
.home-courses .section-head{justify-content:center;text-align:center}
.home-courses .section-head::after{left:50%;transform:translateX(-50%)}


/* Stopka (C/D wg wytycznych): godło i dane | „Bądź z nami”; bez kolumny „Na skróty”; w pasku menu bez domku i Kontaktu */
.site-footer .footer-col:not(.footer-social){display:none}
.footer-nav a:first-child,.footer-nav a[href$="/kontakt"]{display:none}

/* Kolumna boczna: pasek przy „Na skróty” w żółci z logo (reszta wyglądu w szablonie 0010) */
.side-box--links .side-box__title{--side-bar:var(--zspm-yellow)}

/* Baner: hasło ze slajdu (panel: Pokaz slajdów → opis zdjęcia) jako podpis w lewym dolnym rogu, na ciemnym tle; na telefonie ukryte (baner ma ~120 px) */
.hero__slide{align-items:flex-end}
.hero__inner{padding-bottom:54px}
.hero__content{display:inline-block;max-width:min(620px,100%);padding:14px 22px 16px;background:rgba(9,32,64,.78);border-left:4px solid var(--zspm-yellow)}
.hero .prose-hero h2,.hero .prose-hero h1{margin:0 0 4px;font-size:clamp(1.05rem,1.55vw,1.4rem);letter-spacing:.05em;text-transform:uppercase;line-height:1.25}
.hero .prose-hero p{margin:0;font-size:.98rem;line-height:1.45;color:rgba(255,255,255,.92)}
.hero__content:not(:has(.prose-hero:not(:has(.hero__fallback-title)))):not(:has(.btn)){display:none}
@media (max-width:900px){.hero__content{display:none}}