/* Accepted Przedszkole2 composition. Shared tokens and controls live in main.css. */
.p2-wrap, .p2-hero-inner, .breadcrumbs, .subpage-content, .page-intro {
  width: min(var(--container-width), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
}
.subpage-content .page-intro { width: 100%; }
.p2-hero { background: var(--hero-green); color: #fff; overflow: hidden; }
.p2-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: var(--space-5); min-height: 540px; align-items: center; }
.p2-hero h1 { font: 400 clamp(34px,3.3vw,55px)/1.18 var(--font-heading); margin: var(--space-5) 0; }
.p2-hero mark { background: none; color: var(--yellow); }
.p2-hero p { color: #e1eae6; font-size: var(--text-sm); max-width: 500px; line-height: 1.8; }
.p2-hero-art { position: relative; align-self: stretch; display: flex; justify-content: center; align-items: flex-end; height: 540px; min-width: 0; padding-top: var(--space-8); }
.p2-hero-art img { display: block; flex: 0 1 auto; width: auto; max-width: 100%; height: 100%; max-height: 508px; object-fit: contain; object-position: center bottom; }
.hero-actions { gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.p2-about { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-section); padding-block: var(--space-section); align-items: start; }
.p2-about h2, .p2-values h2 { font: 400 clamp(26px,2.4vw,37px)/1.2 var(--font-heading); margin: var(--space-3) 0 var(--space-5); }
.p2-about p { font-size: var(--text-sm); color: var(--muted); line-height: 1.65; }
.p2-about-art { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 0; margin: var(--space-3) 0 0; isolation: isolate; }
.p2-about-art::before { content: ''; position: absolute; inset: 27% 8% 0; background: var(--orange); border-radius: var(--radius-card); z-index: -1; }
.p2-about-art img { display: block; width: min(426px, 100%); height: auto; object-fit: contain; object-position: center bottom; }
.p2-highlights { display: grid; gap: var(--space-6); margin: var(--space-6) 0; }
.p2-highlights > div { display: flex; gap: var(--space-5); align-items: center; }
.p2-highlights h3 { font: 400 17px/1.3 var(--font-heading); margin: 0 0 var(--space-2); }
.p2-highlights p { margin: 0; font-size: var(--text-sm); }
.p2-icon { display: flex; flex: none; align-items: center; justify-content: center; border-radius: 50%; width: 60px; height: 60px; background: #fff; color: inherit; }
.p2-icon .icon { width: 30px; height: 30px; }
.tone-0 { background: var(--red); color: #fff; }
.tone-1 { background: var(--orange); color: var(--ink); }
.tone-2 { background: var(--bright-green); color: var(--hero-green); }
.tone-3 { background: var(--purple); color: #fff; }
.p2-mosaic { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: 255px 255px; gap: var(--space-5); padding-block: var(--space-4) var(--space-6); }
.p2-mosaic figure { margin: 0; overflow: hidden; border-radius: var(--radius-card); }
.p2-mosaic figure:nth-child(1) { grid-column: span 2; }
.p2-mosaic figure:nth-child(3) { grid-column: 4; grid-row: 1/3; }
.p2-mosaic figure:nth-child(5) { grid-column: 2/4; }
.p2-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.p2-values { text-align: center; padding-block: var(--space-8) var(--space-section); }
.p2-values h2 { max-width: 620px; margin: 0 auto var(--space-10); }
.p2-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-6); }
.p2-card { position: relative; padding: 52px var(--space-6); min-height: 305px; mask: url(card-wave.svg) center/100% 100% no-repeat; text-align: center; }
.p2-card .p2-icon { margin: 0 auto var(--space-6); width: 100px; height: 100px; }
.p2-card .icon { width: 52px; height: 52px; }
.p2-card h3, .p2-card h2 { font: 400 20px/1.3 var(--font-heading); margin: 0 0 var(--space-4); }
.p2-card p { font-size: var(--text-sm); line-height: 1.65; margin: 0; }
.p2-card.tone-0 .p2-icon { color: var(--red); }
.p2-card.tone-1 .p2-icon { color: #995000; }
.p2-card.tone-2 .p2-icon { color: var(--green); }
.p2-card.tone-3 .p2-icon { color: var(--purple); }
.p2-method { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.14fr); align-items: center; gap: var(--space-section); background: var(--yellow-soft); border-radius: var(--radius-section); padding: 55px; position: relative; z-index: 2; margin-bottom: -80px; }
.p2-method h2 { font: 400 clamp(32px,3.5vw,48px)/1.17 var(--font-heading); color: var(--purple-dark); margin: 0 0 var(--space-6); }
.p2-method p { font-size: var(--text-sm); line-height: 1.65; }
.p2-method .text-link { color: var(--green-dark); }
.p2-parent-copy > .button { margin-top: var(--space-6); }
.p2-parent-copy .p2-parent-livekid { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgb(10 34 42 / 18%); }
.p2-parent-tiles.parent-tiles { grid-template-columns: minmax(0,1fr); gap: var(--space-4); margin: 0; }
.p2-parent-tiles .parent-tile { padding: 0; }
.parent-tile-link { display: grid; grid-template-columns: 44px minmax(0,1fr) 24px; gap: var(--space-4); align-items: center; width: 100%; min-height: 108px; padding: var(--space-5); border-radius: inherit; color: inherit; text-decoration: none; }
.parent-tile-link:hover { color: inherit; }
.parent-tile-copy { min-width: 0; }
.parent-tile-copy h3 { font-size: 20px; line-height: 1.3; margin: 0 0 var(--space-2); }
.parent-tile-link:focus-visible { outline-offset: 4px; }
.p2-parent-tiles .parent-tile .p2-icon { width: 44px; height: 44px; margin: 0; }
.p2-parent-tiles .parent-tile p { margin: 0; }
#o-nas { scroll-margin-top: var(--space-4); }
.activities { margin-block: var(--space-10); }
.activities img { max-width: 100%; border-radius: var(--radius-card); margin-top: var(--space-4); }
.activities .p2-card:last-child { background: #eee8f0; color: var(--purple-dark); }
.activities .p2-card:last-child .p2-icon { border: 1px dashed var(--purple); background: transparent; }
/* Disclosures remain readable when JavaScript is unavailable. */
.p2-mosaic-toggle span { display: inline-block; transition: transform var(--motion-duration); }
.p2-mosaic-toggle[aria-expanded=true] span { transform: rotate(180deg); }
.p2-about-disclosure.is-enhanced .p2-about-fallback, .p2-documents-disclosure.is-enhanced .p2-documents-fallback { display: none; }
.p2-about-disclosure.is-enhanced .p2-mosaic-reveal, .p2-documents-disclosure.is-enhanced .p2-documents-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .5s ease, opacity var(--motion-duration), visibility .5s; }
.p2-mosaic-clip, .p2-documents-clip { min-height: 0; overflow: hidden; }
.p2-about-disclosure.is-open .p2-mosaic-reveal, .p2-documents-disclosure.is-open .p2-documents-reveal { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.p2-gallery-link { margin-bottom: var(--space-10); }
.founder-section { scroll-margin-top: var(--space-8); }
.founder-section.has-founder-portrait { grid-template-columns: minmax(160px,230px) minmax(0,1fr); align-items: center; gap: var(--space-8); }
.founder-portrait { position: relative; margin: 0; align-self: center; isolation: isolate; }
.founder-portrait::before { content: ''; position: absolute; inset: 25% -8% 0; background: var(--orange); border-radius: var(--radius-card); z-index: -1; }
.founder-portrait img { display: block; width: 100%; height: auto; object-fit: contain; }
.notice-featured { padding: var(--space-8); background: var(--yellow-soft); border: 1px solid rgb(10 34 42 / 12%); border-radius: var(--radius-card); box-shadow: var(--shadow); margin-block: 0 var(--space-10); }
.notice-featured h2 { margin-block: var(--space-3) var(--space-4); }
.notice-featured p { margin-bottom: var(--space-5); }
.notice-featured .eyebrow { margin-right: var(--space-4); }
.notice-row { overflow-wrap: anywhere; border-radius: var(--radius-card); background: var(--sage-light); border: 1px solid var(--line); padding: var(--space-6); margin: 0; box-shadow: var(--shadow); }
.notice-row h3 { font-size: clamp(20px,2vw,24px); line-height: 1.35; margin-block: var(--space-2) var(--space-3); }
.notice-row p { margin-bottom: var(--space-4); }
.notice-row time, .notice-featured time { color: var(--muted); font-size: var(--text-sm); }
.notice-list { display: grid; gap: var(--space-6); }
.notice-archive { margin-block: var(--space-10); }
.notice-archive > h2 { margin-bottom: var(--space-6); }
.MarkupPagerNav { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin-block: var(--space-8); }
.MarkupPagerNav a { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: var(--space-2) var(--space-4); background: var(--sage-light); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; }
.MarkupPagerNavOn a { background: var(--green); color: #fff; border-color: var(--green); }
.parent-tiles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6); margin-block: var(--space-8); }
.parent-tile { mask: none; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--sage-light); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.parent-tile-label { display: block; font-size: var(--text-xs); font-weight: 600; line-height: 1.5; margin-bottom: var(--space-3); }
.parent-tile .p2-icon .icon { width: 28px; height: 28px; }
.parent-tile .p2-icon { margin-bottom: var(--space-5); width: 52px; height: 52px; color: var(--green); }
.parent-tile h2, .parent-tile strong { font-size: 20px; line-height: 1.35; margin-block: 0 var(--space-3); }
.parent-tile p { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.parent-tile time { color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.parent-tile .text-link, .parent-tile .button { margin-top: auto; }
.parent-tile .text-link { padding-top: var(--space-3); }
.parent-tile:hover { background: var(--sage); color: var(--ink); }
.parent-tile:focus-visible { outline-offset: 4px; }
.parent-documents-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6); padding-block: var(--space-6); }
.parent-documents-grid .document-item { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-6); margin: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--sage-light); box-shadow: var(--shadow); }
.parent-documents-grid .document-item h2, .parent-documents-grid .document-item h3 { font: 400 var(--text-lg)/1.4 var(--font-heading); }
.parent-documents-grid .document-copy { width: 100%; }
/* One CMS calendar: month grid on desktop, an event agenda on narrow screens. */
.event-calendar { margin-block: var(--space-section); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow); scroll-margin-top: var(--space-8); }
.event-calendar > h2 { margin-bottom: var(--space-6); }
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.calendar-toolbar h3 { font-size: clamp(24px,2.5vw,32px); line-height: 1.3; }
.calendar-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.calendar-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sage-light); color: var(--green-dark); text-decoration: none; font-size: var(--text-sm); line-height: 1.5; }
.calendar-nav a:hover { background: var(--sage); }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-weekdays { padding-block: var(--space-3); font-size: var(--text-sm); font-weight: 600; text-align: center; color: var(--muted); }
.calendar-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.calendar-day { min-width: 0; min-height: 104px; padding: var(--space-2); background: var(--paper); overflow-wrap: anywhere; }
.calendar-date { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; font-size: var(--text-sm); }
.calendar-day.is-outside { background: var(--sage-light); color: var(--muted); }
.calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--green); }
.calendar-day.is-today .calendar-date { border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; }
.calendar-events { list-style: none; padding: 0; margin: var(--space-1) 0 0; }
.calendar-events li { padding: var(--space-2); border-left: 3px solid var(--green); background: var(--sage-light); border-radius: 0 var(--space-1) var(--space-1) 0; font-size: var(--text-sm); line-height: 1.5; }
.calendar-events li + li { margin-top: var(--space-2); }
.calendar-events p { margin-top: var(--space-1); color: var(--muted); }
.calendar-empty-month { margin-top: var(--space-5); color: var(--muted); }
.calendar-agenda { margin-top: var(--space-6); }
.calendar-agenda h3 { margin-bottom: var(--space-3); }
.calendar-agenda ol { list-style: none; margin: 0; padding: 0; }
.calendar-agenda li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.calendar-agenda time { flex: 0 0 150px; font-size: var(--text-sm); font-weight: 600; color: var(--green-dark); }
.calendar-agenda li > div { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.calendar-agenda p { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.calendar-poster { margin-block: var(--space-section); }
.calendar-poster img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
@media (max-width: 900px) {
  .p2-about { gap: var(--space-8); }
  .p2-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .p2-method { gap: var(--space-8); padding: var(--space-8); }
  .p2-mosaic { grid-template-rows: 180px 180px; }
  .parent-tiles, .parent-documents-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .p2-method { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) and (min-width: 601px) {
  .p2-hero-art { padding-top: 55px; }
  .p2-hero-art img { height: auto; max-height: 485px; width: 100%; }
}
@media (max-width: 600px) {
  .event-calendar { padding: var(--space-4); }
  .calendar-toolbar { align-items: flex-start; }
  .calendar-day { min-height: 48px; padding: var(--space-1); text-align: center; }
  .calendar-events { display: none; }
  .calendar-day:has(.calendar-events li)::after { content: ""; display: block; width: 5px; height: 5px; margin: 2px auto 0; border-radius: 50%; background: var(--green); }
  .p2-hero-inner, .p2-about, .p2-method { grid-template-columns: minmax(0,1fr); }
  .p2-hero-inner { padding-top: var(--space-10); }
  .p2-hero h1 { font-size: 36px; }
  .p2-hero-art { height: 380px; padding-top: var(--space-5); margin-top: var(--space-4); }
  .p2-hero-art img { max-height: 360px; }
  .p2-about { gap: var(--space-10); padding-top: var(--space-10); }
  .p2-about-art { margin: 0; }
  .p2-about-art img { width: min(292px, 100%); }
  .p2-about-art::before { inset: 25% 8% 0; border-radius: var(--radius-card); }
  .p2-mosaic { gap: var(--space-2); grid-template-rows: 140px 140px; }
  .p2-mosaic figure { border-radius: var(--radius-sm); }
  .p2-cards, .parent-tiles, .parent-documents-grid { grid-template-columns: minmax(0,1fr); }
  .p2-card { min-height: 270px; }
  .p2-method { padding: var(--space-8) var(--space-6); border-radius: 35px; }
  .p2-method h2 { font-size: 35px; }
  .founder-section.has-founder-portrait { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }
  .founder-portrait { width: min(200px,70%); margin-inline: auto; }
  .notice-featured { padding: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .p2-mosaic-toggle span, .p2-about-disclosure.is-enhanced .p2-mosaic-reveal, .p2-documents-disclosure.is-enhanced .p2-documents-reveal { transition: none; }
}