/*
Theme Name: KROM
Author: Weblix
Description: Motyw Krajowej Rady Opiekunów Medycznych.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: krom
*/

/* Wartości 1:1 z mockups/home.html. Kolory i typografia bazowa siedzą w theme.json. */

:root {
	--krom-cien: 0 4px 20px rgba(31, 43, 80, .06);
	--krom-promien: 16px;
	--krom-tekst-pomocniczy: #55596b;
}

:focus-visible { outline: 3px solid var(--wp--preset--color--niebieski); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* Pasek kontaktowy */
.pasek-kontaktowy .krom-dane--pasek { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; min-height: 40px; }
.pasek-kontaktowy a { color: inherit; text-decoration: none; }
.pasek-kontaktowy a:hover { color: inherit; text-decoration: underline; }
@media (max-width: 599px) { .pasek-kontaktowy .ukryj-mobile { display: none; } }

/* Nagłówek */
.naglowek .wp-block-site-logo img { height: 88px; width: auto; }
.naglowek .wp-block-navigation a { color: var(--wp--preset--color--granat); text-decoration: none; font-weight: 500; }
.naglowek .wp-block-navigation a:hover { color: var(--wp--preset--color--niebieski); }
.naglowek .wp-block-navigation .current-menu-item > a,
.naglowek .wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--niebieski); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.naglowek .wp-block-navigation__responsive-container-open { min-height: 48px; min-width: 48px; border: 1px solid var(--wp--preset--color--ramka); border-radius: 10px; padding: 0 12px; }
.naglowek .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; }
.naglowek .wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.25rem; }
@media (max-width: 1099px) { .naglowek .ukryj-tablet { display: none; } }
@media (max-width: 599px) { .naglowek .wp-block-site-logo img { height: 80px; } }

/* Separator EKG */
.ekg { display: block; width: 120px; height: 18px; margin: 4px 0 28px; }

/* Karty */
.karta { background: #fff; border: 1px solid var(--wp--preset--color--ramka); border-radius: var(--krom-promien); box-shadow: var(--krom-cien); }
.kafel { padding: 32px 28px; }
.kafel__ikona { width: 56px; height: 56px; border-radius: 14px; background: var(--wp--preset--color--tlo-jasne); color: var(--wp--preset--color--niebieski); display: grid; place-items: center; margin-bottom: 20px; }
.kafel__ikona svg { width: 28px; height: 28px; }
.kafel p, .tekst-pomocniczy { color: var(--krom-tekst-pomocniczy); }

/* Hero */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(22, 6, 107, .92) 0%, rgba(22, 6, 107, .75) 45%, rgba(22, 6, 107, 0) 75%); }
.hero .wp-block-cover__inner-container { z-index: 2; }
.hero .wp-block-cover__image-background { object-position: right center; }
@media (max-width: 781px) {
	.hero { min-height: 480px !important; align-items: flex-end; }
	.hero::before { background: linear-gradient(180deg, rgba(22, 6, 107, .25) 0%, rgba(22, 6, 107, .85) 45%, rgba(22, 6, 107, .95) 100%); }
	.hero .wp-block-cover__image-background { object-position: 70% center; }
}
.is-style-outline > .wp-block-button__link.has-bialy-color { border-color: rgba(255, 255, 255, .85); }
.is-style-outline > .wp-block-button__link.has-bialy-color:hover { background: rgba(255, 255, 255, .12); }
.wp-block-button__link.has-bialy-background-color:hover { background: #e8eefc !important; color: var(--wp--preset--color--granat) !important; }

/* Nagłówek sekcji z linkiem po prawej */
.naglowek-z-linkiem { align-items: flex-end; }
.link-strzalka a, a.link-strzalka { font-weight: 600; text-decoration: none; }
.link-strzalka a:hover, a.link-strzalka:hover { text-decoration: underline; }

/* Szkolenia */
.lista-szkolen { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
.karta-szkolenia { display: flex; gap: 20px; padding: 24px; }
.karta-szkolenia h3 { font-size: 1.25rem; margin: 0 0 8px; }
.karta-szkolenia h3 a { color: var(--wp--preset--color--granat); text-decoration: none; }
.karta-szkolenia h3 a:hover { color: var(--wp--preset--color--niebieski); text-decoration: underline; }
.karta-szkolenia p { margin: 0 0 6px; }
.data-bloczek { flex: none; width: 76px; height: 84px; border-radius: 12px; background: var(--wp--preset--color--czerwony); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.data-bloczek__dzien { font-size: 32px; font-weight: 700; }
.data-bloczek__miesiac { font-size: 14px; font-weight: 600; letter-spacing: .06em; margin-top: 6px; }
.karta-szkolenia__meta { color: var(--krom-tekst-pomocniczy); font-size: 16px; }
.ceny { font-weight: 600; font-size: 16px; margin-bottom: 18px !important; }
.ceny span { color: var(--wp--preset--color--czerwony); }
.punkty { display: table; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--granat); background: var(--wp--preset--color--tlo-jasne); border-radius: 999px; padding: 2px 12px; margin-bottom: 10px; }
.lista-szkolen--minione .data-bloczek { background: #8a8fa3; }
.wp-block-details summary { font-weight: 600; color: var(--wp--preset--color--granat); cursor: pointer; padding: 12px 0; }

/* Fakty szkolenia */
.fakty-szkolenia { padding: 24px; margin: 0; display: grid; gap: 14px; }
.fakty-szkolenia__wiersz { display: grid; grid-template-columns: 160px 1fr; gap: 12px; }
.fakty-szkolenia dt { font-weight: 600; color: var(--wp--preset--color--granat); }
.fakty-szkolenia dd { margin: 0; }
.fakty-szkolenia__plakat { margin-top: 24px; border-radius: 12px; }
@media (max-width: 480px) { .fakty-szkolenia__wiersz { grid-template-columns: 1fr; gap: 0; } }

/* Członkostwo */
.lista-ptaszki { list-style: none; padding-left: 0; display: grid; gap: 12px; }
.lista-ptaszki li { position: relative; padding-left: 36px; }
.lista-ptaszki li::before { content: ""; position: absolute; left: 0; top: .35em; width: 22px; height: 22px; border-radius: 50%; background: var(--wp--preset--color--niebieski) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ramka-korzysc { border-left: 4px solid var(--wp--preset--color--czerwony); border-radius: 0 12px 12px 0; }
.cta-pasek { border-radius: var(--krom-promien); }

/* Aktualności */
.wp-block-post-template.is-layout-grid { gap: 24px; }
.karta-wpisu { overflow: hidden; height: 100%; }
.karta-wpisu .wp-block-post-featured-image { margin: 0; }
.karta-wpisu .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.karta-wpisu .wp-block-post-title a { color: var(--wp--preset--color--granat); text-decoration: none; }
.karta-wpisu .wp-block-post-title a:hover { color: var(--wp--preset--color--niebieski); text-decoration: underline; }
.karta-wpisu .wp-block-post-excerpt { color: var(--krom-tekst-pomocniczy); font-style: normal; text-align: left; }
.karta-wpisu .wp-block-post-date { color: var(--krom-tekst-pomocniczy); }

/* Kontakt */
.krom-dane--karty { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.karta-kontakt { padding: 20px 22px; }
.karta-kontakt p { margin: 0; }
.karta-kontakt__tytul { font-size: 15px; font-weight: 600; color: var(--krom-tekst-pomocniczy); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px !important; }
.karta-kontakt__link { font-size: 1.125rem; font-weight: 600; }
.karta-kontakt__link a { text-decoration: none; }
.karta-kontakt__link a:hover { text-decoration: underline; }
.karta-kontakt__opis { font-size: 15px; color: var(--krom-tekst-pomocniczy); margin-top: 4px !important; }

/* Stopka */
.stopka a { color: #fff; }
.stopka a:hover { color: #cfe2ff; }
.stopka ul { list-style: none; padding-left: 0; }
.stopka .wp-block-site-logo { background: #fdfdfd; border-radius: 12px; padding: 6px; display: inline-block; }
.stopka .wp-block-site-logo img { height: 72px; width: auto; }
.stopka__dol { border-top: 1px solid rgba(255, 255, 255, .2); }

/* Treść stron */
.wp-block-post-content > h2 { margin-top: 1.6em; }
.wp-block-post-content > h3 { margin-top: 1.4em; }

/* Nagłówek sekcji: H2 + EKG + wstęp wyrównane do lewej krawędzi kolumny */
.naglowek-sekcji .tekst-pomocniczy { max-width: 640px; margin-bottom: 0; }

/* Hero: treść w kolumnie 1200 px, nie przy krawędzi ekranu */
.wp-block-cover.hero .wp-block-cover__inner-container { width: 100% !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; }
.hero .wp-block-cover__inner-container > .wp-block-group { margin-left: 0 !important; max-width: 620px; }

/* Części szablonu (nagłówek, treść, stopka) przylegają do siebie */
.wp-site-blocks > * { margin-block-start: 0; }

/* Pasek tytułu podstron */
.naglowek-podstrony h1, .naglowek-podstrony .wp-block-post-title { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); }
.naglowek-podstrony .ekg { margin: 12px 0 0; }
.naglowek-podstrony .tekst-pomocniczy { margin: 0; }
.naglowek-podstrony .tekst-pomocniczy + .wp-block-post-title, .naglowek-podstrony .wp-block-post-date + .wp-block-post-title { margin-top: 4px; }
.wp-block-post-content > h2:first-child { margin-top: 0; }

/* ===== Spójność kart i widok telefonu ===== */
:root { --krom-karta-pad: clamp(20px, 4vw, 32px); }

/* Jedno wewnętrzne wcięcie dla wszystkich kart (nadpisuje padding z atrybutów bloków). */
.karta.kafel, .karta-szkolenia, .karta-kontakt, .fakty-szkolenia,
main .wp-block-group.karta:not(.karta-wpisu),
.cta-pasek, .ramka-korzysc { padding: var(--krom-karta-pad) !important; }
.karta-wpisu .wp-block-group { padding-left: var(--krom-karta-pad) !important; padding-right: var(--krom-karta-pad) !important; }

/* Logo: jasnoszare tło JPG-a znika na białym nagłówku. */
.naglowek .wp-block-site-logo img { mix-blend-mode: multiply; filter: brightness(1.035) contrast(1.02); }

/* Menu: 7 pozycji mieści się w linii od 1100 px – poniżej (telefon i tablet) hamburger z menu nakładkowym.
   WP przełącza na hamburgera dopiero <600 px, więc dla 600–1099 px chowamy menu w linii i pokazujemy przycisk;
   otwarte menu (.is-menu-open) korzysta z gotowych stylów nakładki WP. */
@media (max-width: 1099px) {
	.naglowek .wp-block-navigation__responsive-container-open { display: flex !important; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; }
	.naglowek .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
}
@media (min-width: 600px) and (max-width: 1099px) {
	.naglowek .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}

@media (max-width: 600px) {
	/* Przyciski w hero i w pasku „Dołącz" – jeden pod drugim, na całą szerokość. */
	.hero .wp-block-buttons, .cta-pasek .wp-block-buttons { flex-direction: column; align-items: stretch; width: 100%; }
	.hero .wp-block-button, .cta-pasek .wp-block-button { width: 100%; }
	.hero .wp-block-button__link, .cta-pasek .wp-block-button__link { width: 100%; justify-content: center; }
	.cta-pasek > .wp-block-group { width: 100%; }

	/* Karta szkolenia: data jako znaczek nad treścią, tytuł na pełną szerokość karty. */
	.karta-szkolenia { flex-direction: column; gap: 14px; }
	.data-bloczek { flex-direction: row; gap: 8px; width: auto; height: auto; align-self: flex-start; padding: 8px 14px; }
	.data-bloczek__dzien { font-size: 22px; }
	.data-bloczek__miesiac { margin-top: 0; }
	.karta-szkolenia .wp-element-button { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }
}

/* Pasek tytułu: linia EKG przy lewej krawędzi tytułu (układ constrained centruje wąskie elementy). */
.naglowek-podstrony > .ekg { margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; }

@media (max-width: 781px) {
	/* Szkolenie na telefonie: najpierw fakty (termin, miejsce, cena), potem opis i zapisy. */
	.kolumny-szkolenia > .wp-block-column:last-child { order: -1; }
	.naglowek-podstrony h1, .naglowek-podstrony .wp-block-post-title { font-size: 1.75rem; }
}
@media (max-width: 600px) {
	.krom-formularz button[type="submit"] { width: 100%; justify-content: center; }
}

/* Otwarte menu (telefon i tablet): pozycje od lewej, duże cele dotyku, linie podziału. */
.naglowek .wp-block-navigation__responsive-container.is-menu-open { padding: 20px clamp(16px, 4vw, 32px); background: #fff; }
.naglowek .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: 56px; }
.naglowek .is-menu-open .wp-block-navigation__container { align-items: stretch !important; width: 100%; gap: 0 !important; }
.naglowek .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--wp--preset--color--ramka); }
.naglowek .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 16px 0 !important; font-size: 1.25rem; font-weight: 600; color: var(--wp--preset--color--granat); text-decoration: none !important; }
.naglowek .is-menu-open .wp-block-navigation-item__content[aria-current="page"], .naglowek .is-menu-open .current-menu-item > a { color: var(--wp--preset--color--niebieski); }
.naglowek .wp-block-navigation__responsive-container-close { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.naglowek .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

/* Kafle w kolumnach i karty wpisów w siatce – równa wysokość w rzędzie (karta wypełnia kolumnę). */
.wp-block-columns > .wp-block-column > .kafel { height: 100%; box-sizing: border-box; }
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > .karta-wpisu { flex: 1; }

/* Hero: mały skrót nad pełną nazwą stowarzyszenia. */
.hero .hero-skrot { margin: 0 0 4px; font-size: 1.125rem; font-weight: 700; letter-spacing: .28em; opacity: .9; }
.hero h1 { font-size: clamp(2rem, 3.6vw, 3.25rem); max-width: 22ch; }

/* Zdjęcie w kafelku „Co robimy" – stały kadr, żeby kafle były równe przy różnych zdjęciach. */
.kafel .kafel__zdjecie { margin: 0 0 20px; }
.kafel .kafel__zdjecie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; display: block; }

/* Długie adresy i ciągi bez spacji (np. linki w polityce) łamią się zamiast rozpychać stronę na telefonie. */
.wp-block-post-content p, .wp-block-post-content li, .wp-block-post-content dd { overflow-wrap: anywhere; }

/* Kafel szkolenia z obrazkiem wyróżniającym: zdjęcie na górze, bloczek daty nałożony na róg. */
.karta-szkolenia.ma-zdjecie { flex-direction: column; gap: 0; padding: 0 !important; overflow: hidden; }
.karta-szkolenia__media { position: relative; }
.karta-szkolenia__zdjecie { display: block; }
.karta-szkolenia__zdjecie img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center top; }
.karta-szkolenia.ma-zdjecie .data-bloczek { position: absolute; top: 16px; left: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.karta-szkolenia.ma-zdjecie .karta-szkolenia__tresc { padding: var(--krom-karta-pad); }
@media (max-width: 600px) {
	.karta-szkolenia.ma-zdjecie .data-bloczek { flex-direction: column; width: 64px; height: 70px; padding: 0; }
	.karta-szkolenia.ma-zdjecie .data-bloczek__dzien { font-size: 26px; }
}
/* Plakat w ramce faktów – klikany (lightbox rdzenia). */
.fakty-szkolenia-blok .fakty-szkolenia__plakat { margin: 24px 0 0; }
.fakty-szkolenia-blok .fakty-szkolenia__plakat img { border-radius: 12px; cursor: zoom-in; }

/* Adresy e-mail i numery w kartach nie łamią się w środku słowa (miejsce łamania: <wbr> przed „@”). */
.wp-block-post-content .krom-dane p, .krom-dane a { overflow-wrap: normal; word-break: normal; }