/* MOBIILIASETTELU: julkinen sivusto, jäsensivut ja varaushallinta. */
.mobile-nav-label { display: none; }

/* Tausta ja 1100 px leveä yläpalkki keskitetään samaan sivuun.
   Myös juurielementin leveys tarvitaan, koska selain piirtää bodyn taustan siihen. */
@media screen and (min-width: 768px) {
    html:has(> body.public-site), body.public-site { min-width: 1100px; }
}

/* Alle 768 px: puhelinasettelu. Tableteilla säilyvät palstat ja kuvavalikko. */
@media screen and (max-width: 767px) {
    .public-site, .member-site, .booking-site, .member-tool {
        margin: 0;
        min-width: 0;
        overflow-wrap: break-word;
    }
    .public-site *, .member-site *, .booking-site *, .member-tool * { box-sizing: border-box; }
    .public-site img, .member-site img, .booking-site img { max-width: 100%; height: auto; }
    .public-site input, .public-site select, .public-site textarea,
    .member-site input, .member-site select, .member-site textarea,
    .booking-site input, .booking-site select { max-width: 100%; font-size: 16px; }
    .public-site button, .member-site button, .booking-site button,
    input[type="submit"], input[type="button"] { min-height: 40px; }
    textarea { max-width: 100%; }

    /* Julkisen sivuston kuvan päälle sijoitetut linkit vaihtuvat tekstivalikoksi. */
    .public-site .bg, .public-site .wrapper, .public-site .navi_bg {
        width: 100%; height: auto; min-height: 0;
    }
    .public-site .navi_bg {
        background: none;
        padding-top: 16px;
        /* Rajaus ei muuta kuvien kokoa eikä taustan keskikohtaa. */
        overflow: hidden;
    }
    /* Spotlight siirtyy 129 px -> -55 px eli 184 px ylös; tausta seuraa samoin. */
    body.public-site, .public-site .bg { background-position: center 200px; }
    .public-site #kellariteatteri_logo {
        position: relative; top: auto; left: auto;
        z-index: 1;
        display: block; width: min(75%, 320px); margin: 0 auto 20px;
    }
    .public-site #spotlight {
        display: block;
        /* Työpöydällä vasen reuna on 104 px 1100 px leveässä otsakkeessa. */
        left: calc(50% - 446px);
        top: -55px;
        width: 908px;
        height: 410px;
        z-index: 0;
        pointer-events: none;
    }
    .public-site #content { z-index: 1; }
    .public-site #navi {
        position: relative;
        display: flex; flex-wrap: wrap; justify-content: space-evenly;
        gap: 0 clamp(0px, calc(1vw - 3.2px), 12px);
        padding: 0 clamp(4px, 1vw, 12px);
    }
    .public-site #navi > div {
        position: static !important; flex: 0 1 auto; min-width: min-content;
    }
    .public-site #navi a {
        display: flex; align-items: center; justify-content: center;
        min-height: 44px; padding: 12px 0;
        background: none; color: #fff !important;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        font-size: clamp(11px, 3vw, 20px);
        font-weight: 300; letter-spacing: 0.06em;
        text-transform: uppercase; white-space: nowrap;
    }
    .public-site #navi #link1 { --nav-accent: #69c; }
    .public-site #navi #link2 { --nav-accent: #c38; }
    .public-site #navi #link3 { --nav-accent: #6cb; }
    .public-site #navi #link4 { --nav-accent: #b6c; }
    .public-site #navi #link5 { --nav-accent: #6ac; }
    .public-site #navi .activeNav .mobile-nav-label {
        border-bottom-color: var(--nav-accent, #48d);
    }
    .public-site #navi img { display: none; }
    .public-site .mobile-nav-label {
        display: inline-block; padding: 4px 0 7px;
        border-bottom: 4px solid transparent;
        /* Reunus maalataan tekstin alle, jotta ohut valkoinen kirjain säilyy. */
        -webkit-text-stroke: 3px #000;
        paint-order: stroke fill;
        text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
                     1px -1px 0 #000, -1px 1px 0 #000;
    }
    .public-site #content {
        top: auto; left: auto; width: 100%; padding: 24px 12px;
        font-size: 16px;
    }
    .public-site #content .container, .public-site #content .area,
    .public-site #content .text, .public-site #content .special {
        float: none; width: 100% !important; min-width: 0;
        margin: 0 0 20px; max-width: 100%;
    }
    .public-site #content .area { padding: 16px !important; }
    .public-site #content .text > div, .public-site #content .special > div {
        max-width: 100%;
    }
    .public-site #content .text div[style*="float"],
    .public-site #content .special div[style*="float"] {
        float: none !important; max-width: 100%;
    }
    .public-site #content .prokkis { float: none; width: 100%; margin: 0 0 20px; }
    .public-site #content .special { overflow-x: auto; }
    .public-site #content .irtokuva {
        display: none;
    }
    .public-site .kuva_vasemmalle, .public-site .kuva_oikealle {
        float: none; display: block; margin: 12px 0;
    }
    .public-site #subnavi { display: flex; flex-wrap: wrap; margin: 0 0 16px; padding: 0; }
    .public-site #subnavi > div { float: none; margin: 4px; }
    .public-site iframe, .public-site video { max-width: 100%; }
    .public-site .adminbar { height: auto; padding: 12px; }
    .public-site .adminbar > div { position: static !important; }
    /* Muokkaustyökalut pysyvät sivun sisällä myös kapealla näytöllä. */
    .public-site #upper_admincontrols,
    .public-site #admin_message {
        position: static;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0 auto 12px;
    }
    .public-site #admin_message { height: auto; max-height: 100px; }
    .public-site #upper_admincontrols {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .public-site #upper_admincontrols a { margin: 0; }
    .public-site #upper_admincontrols form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        max-width: 100%;
    }
    .public-site #upper_admincontrols input[name="nimi"] {
        flex: 0 1 180px;
        width: 180px;
        min-width: 0;
        max-width: 100%;
    }

    /* Jäsensivujen kiinteät sisältöleveydet ja kaksi rinnakkaista palstaa. */
    .member-site .topbar { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px; }
    .member-site .topbar > div { float: none !important; width: 100%; text-align: left !important; }
    .member-site .topbar a, .member-site .topbar .page_active {
        display: inline-block; padding: 10px 0; margin-right: 12px;
    }
    .member-site .subnavi span { margin-right: 8px; }
    .member-site .content_grey, .member-site .content_black,
    .member-site #memberlist_wrapper, .member-site #bookinglists_area > div {
        width: calc(100% - 24px) !important; max-width: 100%;
        margin: 20px 12px; padding: 16px;
    }
    .member-site .content_grey div[style*="float"],
    .member-site .content_black div[style*="float"],
    .member-site #popup div[style*="float"] {
        float: none !important; width: auto !important; max-width: 100%;
        text-align: left !important; margin-bottom: 16px;
    }
    .member-site #myinfo_info, .member-site #myinfo_profile,
    .member-site #error_area { width: 100% !important; }
    .member-site .memberpic { float: none; max-width: 100%; }
    .member-site .calendarwrapper { width: 100%; padding: 12px; }
    .member-site #calendar_area, .member-site #admintool,
    .member-site #bookinglists_area, .member-site #memberlist_wrapper {
        max-width: 100%; overflow-x: auto;
    }
    /* Kalenteri mahtuu näytölle; vain varsinaiset hallintolistat vierivät. */
    .member-site .calendar {
        min-width: 0; width: 100%; table-layout: fixed; border-spacing: 2px;
    }
    .member-site .calendar-header {
        display: grid; gap: 14px; margin-bottom: 16px;
        grid-template-areas: 'title' 'legend' 'month' 'add';
    }
    .member-site .calendar-header h2 { grid-area: title; margin: 8px 0; }
    .member-site .calendar-legend {
        grid-area: legend; position: static !important; width: 100% !important;
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
    }
    .member-site .calendar-legend .showbox_area { float: none; width: auto; padding: 0; margin: 0; }
    .member-site .calendar-month-controls {
        grid-area: month; display: flex; align-items: center; justify-content: center; gap: 16px;
    }
    .member-site .calendar-month-controls > span { padding-bottom: 0 !important; }
    .member-site .calendar-month-controls > a { display: inline-flex; padding: 8px; }
    .member-site .calendar-add { grid-area: add; position: static !important; text-align: center !important; }
    .member-site .calendar td { width: calc(100% / 7); min-width: 0; font-size: 12px; overflow: hidden; }
    .member-site .calendar td.day { height: clamp(70px, 17vw, 100px); border-radius: 3px; }
    .member-site .calendar .day_smallnumber { margin: 5px 3px; }
    .member-site .calendar .day_event {
        width: auto; min-width: 0; padding: 2px; font-size: 10px; line-height: 1.4;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .member-site .calendar .day_event a {
        display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .member-site .calendar-event-time { display: none; }
    .member-site .calendar .day_more { padding: 2px; font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .member-site .admintools_members { width: max-content; }
    .member-site #calendar_area > div[style*="width:400px"] {
        position: static !important; width: 100% !important;
    }
    .member-site #subnavi a { display: inline-block; padding: 8px 0; }
    .member-site > div[style*="width:700px"] { width: 100% !important; }

    /* Kirjautuminen, salasanan palautus ja kala-animaation sisältö. */
    .member-site #login { width: min(100%, 350px); margin: 32px auto; padding: 0 12px; }
    .member-site #register { width: min(100%, 450px); padding: 24px 16px; margin: auto; }
    .member-site #register input { width: 100%; }
    .member-site #register pre { overflow-wrap: anywhere; }

    /* Molempien sivustojen omat popupit sovitetaan näyttöön. */
    .public-site #popup, .member-site #popup {
        left: 12px !important; margin-left: 0 !important;
        width: calc(100% - 24px); max-width: 100%;
    }
    .public-site #paperi, .member-site #popup > div,
    .member-site #popup form > div {
        width: 100% !important; max-width: 100%; margin-left: 0 !important;
        padding: 16px;
    }

    /* Varaushallinnassa leveä taulukko vierii oman alueensa sisällä. */
    .booking-site .wrapper { width: 100%; margin: 24px auto; padding: 12px; }
    .booking-site #varaushallinta { padding: 16px; overflow-x: auto; }
    .booking-site #varaushallinta > img { float: none !important; width: min(100%, 300px) !important; }
    .booking-site h1 { font-size: 26px; padding-top: 12px !important; }
    .booking-site .varauslista { min-width: 700px; }
    .member-tool { padding: 12px; overflow-x: auto; }
}

@media screen and (max-width: 767px) {
    /* Kaksi saraketta ilman inline-block-solujen väliin jäävää tyhjää tilaa. */
    .public-site .member_gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-spacing: 0;
    }
    .public-site .member_gallery tbody,
    .public-site .member_gallery tr { display: contents; }
    .public-site .member_gallery td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 8px;
        box-sizing: border-box;
    }
    .public-site .member_gallery img { width: 100% !important; height: auto !important; }
}

@media screen and (max-width: 767px) {
    .member-site .member-info-form, .member-site .member-profile-form,
    .member-site .profile-long-fields { grid-template-columns: minmax(0, 1fr); }
    .member-site .member-field-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}