/* Nabór na rok szkolny — landing dla dorosłych. Design source: design_handoff_zapisy_landing/README.md */
/* Strona używa domyślnego szablonu Divi (normalny nagłówek/stopka serwisu) —
klasa .pms-page siedzi na KAŻDEJ sekcji lądowania (przez module_class w
build-nabor-page.php), nie na , żeby nie przefarbować reszty strony
(menu, stopka witryny) na ciemno/pomarańczowo. */
.pms-page * { box-sizing: border-box; }
/* Atrybutowy selektor zamiast wyliczanki nazw sekcji — działa dla każdej
obecnej i przyszłej strony lądowania korzystającej z tego arkusza. */
[class*="pms-section-"] {
background: #00001A;
color: #EDEEF5;
font-family: Karla, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* :where() keeps this at zero extra specificity so single-class overrides
below (buttons, tiles, header phone link) always win regardless of source order. */
:where(.pms-page) a { color: #F8921C; text-decoration: none; }
:where(.pms-page) a:hover { color: #FFAC48; }
.pms-page :focus-visible { outline: 2px solid #F8921C; outline-offset: 2px; }
.pms-page summary { list-style: none; cursor: pointer; }
.pms-page summary::-webkit-details-marker { display: none; }
.pms-page input, .pms-page select, .pms-page textarea, .pms-page button { font-family: inherit; }
.pms-page input, .pms-page select, .pms-page textarea { width: 100%; min-width: 0; }
.pms-page input::placeholder, .pms-page textarea::placeholder { color: #5C5E7A; }
.pms-container { max-width: 1360px; margin: 0 auto; padding-left: clamp(20px, 5vw, 64px); padding-right: clamp(20px, 5vw, 64px); }
/* Buttons */
.pms-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pms-btn--accent { background: #F8921C; color: #00001A; border: none; }
.pms-btn--accent:hover { background: #FFAC48; color: #00001A; }
.pms-btn--outline { background: transparent; color: #EDEEF5; border: 1px solid #3A3A66; font-weight: 600; }
.pms-btn--outline:hover { border-color: #F8921C; color: #EDEEF5; }
.pms-btn--sm { padding: 10px 20px; font-size: 14px; }
.pms-btn--lg { padding: 16px 30px; font-size: 16px; }
/* 1. Header */
.pms-header {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 16px clamp(20px, 5vw, 64px);
background: rgba(0,0,26,0.90);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid #1E1E3C;
}
.pms-header__brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pms-header__name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.pms-header__sub { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #8E90AA; white-space: nowrap; }
.pms-header__actions { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.pms-header__tel { font-size: 15px; font-weight: 500; color: #EDEEF5; white-space: nowrap; }
.pms-header__tel:hover { color: #F8921C; }
/* 2. Hero i inne dwukolumnowe sekcje z natywnym Image module — prawdziwe
wiersze/kolumny Divi, nie CSS grid. Divi attribute max_width nie zawsze
generuje CSS przy zapisie przez WP-CLI, więc wymuszamy własnym rules
(patrz też: box-sizing, bo bez niego padding poszerza box poza 1360px). */
.pms-native-row,
body #page-container .et_pb_row.pms-native-row {
width: 100% !important;
max-width: 1360px !important; margin-left: auto !important; margin-right: auto !important;
padding-left: clamp(20px, 5vw, 64px) !important; padding-right: clamp(20px, 5vw, 64px) !important;
box-sizing: border-box !important;
display: flex !important; align-items: center !important;
}
.pms-native-row--hero { padding-top: clamp(48px, 8vw, 104px) !important; padding-bottom: clamp(40px, 6vw, 80px) !important; }
.pms-native-row--section { padding-top: clamp(56px, 7vw, 96px) !important; padding-bottom: clamp(56px, 7vw, 96px) !important; }
/* Divi ma tylko garstkę gotowych podziałów kolumn (1_2, 3_5/2_5, ...) —
wymuszamy dokładne proporcje z projektu bez względu na wybrany preset. */
.pms-hero-row > .et_pb_column:nth-child(1) { width: 55% !important; }
.pms-hero-row > .et_pb_column:nth-child(2) { width: 45% !important; }
.pms-teacher-row > .et_pb_column:nth-child(1) { width: 42.5% !important; }
.pms-teacher-row > .et_pb_column:nth-child(2) { width: 57.5% !important; }
.pms-hero-text { min-width: 0; }
/* Moduł Divi Image — puste (bez wgranego zdjęcia) pokazuje ten sam placeholder
co wcześniej; po wgraniu zdjęcia w Builderze ![]()
wypełnia ramkę 4:5. */
.pms-hero-image {
aspect-ratio: 4/5; border-radius: 18px; border: 1px solid #242446;
overflow: hidden; background: repeating-linear-gradient(135deg, #0A0A24 0 12px, #0E0E2C 12px 24px);
}
.pms-hero-image .et_pb_image_wrap, .pms-hero-image img { width: 100%; height: 100%; display: block; }
.pms-hero-image img { object-fit: cover; }
.pms-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 14px 7px 12px; border: 1px solid #2C2C52; border-radius: 999px;
margin-bottom: 28px; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #C8CADD;
}
.pms-badge__dot { width: 7px; height: 7px; border-radius: 999px; background: #F8921C; flex-shrink: 0; }
.pms-h1 {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
font-size: clamp(40px, 6.4vw, 82px); line-height: 0.98; letter-spacing: -0.035em;
margin: 0 0 24px; text-wrap: pretty;
}
.pms-accent-text { color: #F8921C; }
.pms-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: #B9BBD0; max-width: 30em; margin: 0 0 36px; text-wrap: pretty; }
.pms-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.pms-hero__meta { display: flex; flex-wrap: wrap; gap: 28px; font-size: 14.5px; color: #8E90AA; }
/* 3. Instruments */
.pms-instruments { border-top: 1px solid #1A1A34; border-bottom: 1px solid #1A1A34; background: #060620; }
.pms-instruments .pms-container { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.pms-eyebrow { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #8E90AA; margin: 0 0 16px; }
.pms-instruments .pms-eyebrow { margin-bottom: 28px; }
.pms-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pms-pill { padding: 11px 20px; border: 1px solid #26264A; border-radius: 999px; font-size: 15.5px; color: #DCDEEE; display: inline-block; }
.pms-pill:hover { border-color: #F8921C; color: #FFFFFF; }
/* 4. Steps */
.pms-steps-section { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.pms-h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 12px; text-wrap: pretty; }
.pms-section-lead { font-size: 17px; color: #8E90AA; margin: 0 0 48px; max-width: 34em; }
.pms-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.pms-step { border-top: 2px solid #26264A; padding-top: 22px; min-width: 0; }
.pms-step--accent { border-top-color: #F8921C; }
.pms-step__num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; letter-spacing: 0.16em; color: #6A6C88; margin-bottom: 14px; }
.pms-step--accent .pms-step__num { color: #F8921C; }
.pms-h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 21px; margin: 0 0 10px; letter-spacing: -0.01em; }
.pms-p { font-size: 16px; line-height: 1.65; color: #A6A8C0; margin: 0; }
/* 5. Signup */
.pms-signup { background: #060620; border-top: 1px solid #1A1A34; }
.pms-signup__grid {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(36px, 5vw, 80px);
padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px);
}
.pms-signup__info { min-width: 0; }
.pms-h2--signup { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; margin-bottom: 18px; }
.pms-signup__lead { font-size: 17px; line-height: 1.65; color: #A6A8C0; max-width: 30em; margin: 0 0 40px; text-wrap: pretty; }
.pms-tiles { display: grid; gap: 2px; border: 1px solid #1E1E3C; border-radius: 14px; overflow: hidden; margin-bottom: 32px; }
.pms-tile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 22px; background: #0B0B28; color: #EDEEF5; }
a.pms-tile:hover { background: #12123A; }
.pms-tile__label { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8E90AA; white-space: nowrap; }
.pms-tile__value { font-size: 15.5px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pms-tile__value--lg { font-size: 17px; font-weight: 700; text-align: left; }
.pms-hours { display: grid; gap: 10px; max-width: 380px; }
.pms-hours__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 16px; padding-bottom: 10px; border-bottom: 1px solid #1A1A34; }
.pms-hours__day { color: #B9BBD0; }
.pms-hours__time { font-weight: 600; white-space: nowrap; }
.pms-form-card { background: #0B0B28; border: 1px solid #242446; border-radius: 20px; padding: clamp(20px, 3vw, 40px); min-width: 0; }
.pms-form-note { font-size: 13.5px; color: #6A6C88; margin: 12px 0 0; text-align: center; }
/* Contact Form 7 styling — kontrakt pól: name(text) / email / phone(tel) /
instrument(select) / slot(radio, .pms-slot-group) / message(textarea) /
consent(checkbox, wymagany). Standardowe tagi CF7 dziedziczą ten wygląd. */
.pms-form .wpcf7-form p { display: grid; gap: 8px; margin: 0 0 18px; }
.pms-form .wpcf7-form > p:last-of-type { margin-bottom: 0; }
.pms-form label { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #8E90AA; display: block; margin-bottom: 8px; }
.pms-form input[type=text],
.pms-form input[type=email],
.pms-form input[type=tel],
.pms-form select,
.pms-form textarea {
width: 100%; min-width: 0; padding: 15px 16px; border-radius: 10px;
border: 1px solid #2C2C52; background: #04041A; color: #EDEEF5;
font-size: 16px; outline: none;
}
.pms-form input[type=text]:focus,
.pms-form input[type=email]:focus,
.pms-form input[type=tel]:focus,
.pms-form select:focus,
.pms-form textarea:focus { border-color: #F8921C; }
.pms-form textarea { resize: vertical; }
.pms-form .wpcf7-not-valid { border-color: #E2555F; }
.pms-form .wpcf7-not-valid-tip { color: #FF8B8B; font-size: 13px; margin-top: 6px; }
.pms-form .wpcf7-response-output { border-radius: 10px; border: 1px solid #2C2C52 !important; color: #EDEEF5; font-size: 14px; margin: 18px 0 0; padding: 12px 14px; }
.pms-form .pms-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: #A6A8C0; cursor: pointer; text-transform: none; letter-spacing: normal; }
.pms-form input[type=checkbox] { width: 18px; min-width: 0; height: 18px; accent-color: #F8921C; flex-shrink: 0; margin-top: 3px; }
/* CF7 zagnieżdża input WEWNĄTRZ