/* =====================================================================
   MALGOODI — responsive.css
   Preserve the PDF hierarchy; adapt to width. No redesign.
   =====================================================================*/

/* ---- Wide desktop: keep art from overrunning ---- */
@media (min-width: 1600px) {
    .hero-art { width: 66%; }
}

/* ---- Laptop / small desktop ---- */
@media (max-width: 1100px) {
    .hero-art { width: 74%; }
    .hero-title { font-size: clamp(2.6rem, 6.5vw, 4rem); }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
    /* On tablet/phone the hero art is a faint faded backdrop, so the
       interactive gate scene isn't meaningful — rest it closed and clip any
       sub-pixel / rotateY overhang so there's never horizontal scroll. */
    .hero { overflow: hidden; }
    .hero-art {
        width: 100%;
        max-width: none;
        overflow: hidden;
        opacity: .5;
        -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
                mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
    }
    .scene-gate-left,
    .scene-gate-right { transform: none !important; opacity: 1 !important; }
    .hero-content { padding-top: clamp(6px, 2vw, 20px); }

    /* experience: 2 x 4 */
    .exp-box { grid-template-columns: repeat(2, 1fr); row-gap: clamp(26px, 4vw, 40px); }
    .exp-item + .exp-item::before { display: none; }
    /* redraw dividers only between columns (2nd & 4th items get left border) */
    .exp-item:nth-child(odd) { border-right: 1px solid var(--malgoodi-border); }
    .exp-item:nth-child(1),
    .exp-item:nth-child(2) { border-bottom: 1px solid var(--malgoodi-border); padding-bottom: clamp(24px, 4vw, 36px); }

    /* location stacks: map first */
    .location-inner { grid-template-columns: 1fr; }
    .map-wrap { max-width: 620px; margin: 0 auto; }
    .location-info { max-width: 620px; margin: 0 auto; }
    .location-copy { max-width: none; }
}

/* ---- Large phone ---- */
@media (max-width: 620px) {
    :root { --gutter: 20px; }

    .site-header .header-hasiru { display: none; }
    .header-logo { height: 28px; }

    .hero-hasiru { height: 40px; }
    .hero-wordmark { width: clamp(200px, 55vw, 260px); }
    .hero-title { font-size: clamp(2.4rem, 12vw, 3.4rem); }
    .hero-story { text-align: left; }

    /* experience: 2 columns preserved */
    .exp-box { padding: 22px 6px; }

    /* stats: keep 3 across if readable, else allow shrink */
    .stats { gap: 10px; }
    .stat { width: clamp(92px, 29vw, 130px); }
    .stat-num { font-size: clamp(2.1rem, 11vw, 3rem); }

    /* distances stack cleaner */
    .distances { flex-wrap: wrap; gap: 16px 14px; }
    .dist-divider { display: none; }
    .distance { flex: 1 1 40%; }

    /* price box */
    .price-plots { margin-left: 6px; }

    /* ticket: stub moves under body */
    .ticket { grid-template-columns: 1fr; }
    .ticket-stub {
        width: 100%;
        min-height: 120px;
        padding: 24px;
    }
    .ticket-stub::before {
        left: 10%; top: -2px;
        width: 80%; height: 0;
        border-left: none;
        border-top: 2px dashed rgba(35,70,2,.55);
    }
    .ticket-wordmark {
        transform: rotate(0deg);
        width: clamp(150px, 45vw, 220px);
    }
    .ticket-tc {
        writing-mode: horizontal-tb;
        right: 14px; bottom: 8px;
    }
    .ticket-body { outline-offset: -10px; }

    /* modal: single column fields */
    .field-row { grid-template-columns: 1fr; }
    .modal-submit { align-self: stretch; text-align: center; }
}

/* ---- Small phone (375–430) : no horizontal overflow ---- */
@media (max-width: 430px) {
    .hero-title { font-size: clamp(2.2rem, 13vw, 3rem); }
    .capsule-main { font-size: clamp(1.35rem, 7vw, 1.9rem); }
    .offer-main  { font-size: clamp(1.35rem, 7vw, 1.9rem); }
    .visit-heading { font-size: clamp(1.4rem, 7.2vw, 2rem); }
    .price-big { font-size: clamp(2.6rem, 15vw, 3.6rem); }
    .price-plots { font-size: clamp(2rem, 12vw, 3rem); }
    .price-rate .rule { width: clamp(28px, 8vw, 50px); }
    .stat-label { font-size: .78rem; }
}

/* very narrow safety */
@media (max-width: 360px) {
    .stats { gap: 8px; }
    .stat { width: 28vw; }
}