/* Shared layout for the home and author pages. Legacy component styles stay in styles.css. */
body { overflow-wrap: break-word; }
[id] { scroll-margin-top: 24px; }
.container { min-width: 0; padding: 0 clamp(16px, 5vw, 86px); }
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
.col { min-width: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #2963d1;
    outline-offset: 5px;
}
.horizontal-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
#skillsMap svg { display: block; width: 100%; min-width: 760px; height: auto; }
.comparison-scroll table { min-width: 640px; width: 100%; }
.game-scroll { margin: 20px 15px 40px; }
.game-scroll #game { min-width: 1010px; margin: 0; }
.games-disclosure { clear: both; padding: 18px 15px 28px; }
.games-disclosure summary { width: fit-content; padding: 12px 20px; border: 1px solid #d5dfe9; border-radius: 6px; color: #2963d1; cursor: pointer; }
.games-disclosure[open] summary { margin-bottom: 20px; }
.games-disclosure #gamesToHide { display: block; }
video { display: block; border-radius: 4px; }
.fotorama { max-width: 100%; }
/* A useful photo remains visible while the optional gallery script is unavailable. */
.fotorama:not(.fotorama--loaded) > a { display: none; }
.fotorama:not(.fotorama--loaded) > a:first-child { display: block; }
.fotorama:not(.fotorama--loaded) > a:first-child img { display: block; width: 100%; height: auto; }

@media (max-width: 1000px) {
    h1 { font-size: 48px; line-height: 1.12 !important; }
    .mainBlock1 { width: 66%; }
    .mainBlock2 { width: 34%; }
    .order-contacts .contactHolder1, .order-contacts .contactHolder2 { width: 100%; padding: 8px 24px; }
    .order-contacts .contactHolder2 { padding-top: 0; }
    .order-contacts .contactHolder1 h2 { margin-top: 28px; }
}

@media (max-width: 700px) {
    body { font-size: 17px; line-height: 1.55; }
    h1 { font-size: clamp(32px, 8.6vw, 44px); line-height: 1.12 !important; }
    h2 { font-size: 29px; line-height: 1.2 !important; margin-top: 34px; margin-bottom: 18px; }
    h3 { font-size: 23px; line-height: 1.3; }
    .container { padding: 20px 16px 0; }
    .col { padding-right: 8px; padding-left: 8px; }
    .row .row { margin-right: -8px; margin-left: -8px; }
    .mainBlock1, .mainBlock2, .courseProgram, .testimoinals1 { width: 100%; }
    .mainBlock1 p { padding-right: 0; }
    .mainBlock100 { margin-bottom: 20px !important; }
    .contactvmenu { float: none !important; display: block; margin-top: 14px; line-height: 1.65; }
    .pmenu { display: inline-block; margin-right: 18px; }
    .mainBlock2 > img { display: block; max-width: 240px; margin: 16px auto 8px !important; }
    .mainBlock2:has(> img[src*="cloud"]) { display: none; }
    .testimonialsPhoto { width: 23%; padding: 20px 8px 0; }
    .tesimonialsText { width: 77%; padding: 0 8px; }
    .testimoialWithPad { margin-top: 0; }
    .podpis, .mainBlock1 .podpis { font-size: 15px; line-height: 1.45; }
    .blockshadow { margin: 16px 0 28px; padding: 12px 8px; }
    .price { font-size: 32px; }
    .kit-unavailable { padding: 12px 8px 22px; }
    .kit-unavailable h3 { margin-top: 12px; }
    .kit-unavailable-details #folderImg { display: block; max-width: 280px; margin: 0 auto; }
    .kit-unavailable-details .courseProgram:last-child img { max-height: 340px; object-fit: contain; }
    .kit-alternative { margin: 0 0 36px; padding: 0 8px; }
    .kit-alternative h3 { font-size: 23px; }
    .email-order { line-height: 1.5; }
    .courseProgram > img[src*="elnabor"] { margin-top: 4px !important; }
    .courseProgram > .podpis { margin-bottom: 16px !important; }
    #skillsMap { margin: 0 8px 30px; }
    .games-disclosure { padding: 8px 8px 24px; }
    .comparison-scroll { margin-bottom: 20px; }
    .comparison-scroll td { padding: 8px; vertical-align: top; }
    .snowFlakeTestimonials { margin-top: 16px; }
    .order-contacts .contactHolder1, .order-contacts .contactHolder2 { padding: 4px 20px; }
    .order-contacts .contactHolder1 h2 { margin-top: 24px; }
    .order-contacts .contactHolder2 p { font-size: 17px; }
    .hideonmobile { display: none; }
    .hideondesctop { display: block; }
    #promo { display: none; }
    #promo-mobile { display: block; width: 100%; }
    .author-page #authorAbout .authorAbout2 { margin-top: 24px !important; }
    .author-page .logo { width: 50%; margin-bottom: 24px; }
    .author-page .logo img, .author-page .logo p { margin-left: 0; padding-left: 0; }
    .author-page .citata { margin-top: 12px; }
    #footer { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}