/* ==========================================================================
   SOKA ELEMENTS 2027 - MIDNIGHT RIOT
   responsive.css : breakpoint adjustments only
   Mobile keeps the oversized typography. Photography crops harder,
   overlays simplify, practical information stacks.
   ========================================================================== */

/* ------------------------------------------------ large desktop, 1600px up */
@media (min-width: 1600px) {
    :root { --gutter: 5rem; }
    .hero__inner { padding-bottom: 5.5rem; }
}

/* ---------------------------------------------------------------- 1180px - */
@media (max-width: 1180px) {
    .merch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .event__grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vh, 4rem); }
    .event__date span { font-size: clamp(4.5rem, 24vw, 12rem); }

    .faq__grid { grid-template-columns: 1fr; }
    .guest__grid { grid-template-columns: 1fr; }
    .guest__media { max-width: 620px; }

    .prereg__benefits { grid-template-columns: 1fr; gap: 1.8rem; }
    .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------- tablet and small laptop, 960 */
@media (max-width: 960px) {
    .site-nav { display: none; }
    .menu-toggle { display: inline-flex; }
    .site-header__actions .riot-button { display: none; }

    .brand__event { display: none; }

    .social__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 7vh, 4rem); }
    .social__frame { max-width: 560px; margin-inline: auto; }
    .social__bubbles { inset: -4% -2%; }
    .chat-bubble { font-size: 0.6rem; padding: 0.5rem 0.8rem; }

    .merch__head { grid-template-columns: 1fr; }
    .venue { grid-template-columns: 1fr; align-items: start; }
    .split-note { grid-template-columns: 1fr; }

    .manifesto__col--left,
    .manifesto__col--right,
    .manifesto__col--wide,
    .manifesto__col--mid { grid-column: 1 / -1; }
    .manifesto__col--end { grid-column: 1 / -1; text-align: left; }
    .manifesto__cut { max-width: 460px; aspect-ratio: 4 / 5; }

    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ mobile, 700- */
@media (max-width: 700px) {
    :root {
        --pad-section: clamp(4rem, 9vh, 6rem);
        --fs-mega: clamp(4rem, 22vw, 7rem);
        --fs-huge: clamp(3rem, 17vw, 5.5rem);
    }

    .hero { min-height: 100svh; }
    .hero__title { font-size: clamp(3.6rem, 19vw, 6.4rem); }
    .hero__title .hero__riot { margin-left: 0; }
    .hero__media img { object-position: 42% 6%; }
    .hero__media::after {
        background:
            linear-gradient(0deg, rgba(5,5,5,0.97) 12%, rgba(5,5,5,0.35) 62%, rgba(5,5,5,0.55)),
            linear-gradient(90deg, rgba(5,5,5,0.6), rgba(5,5,5,0) 70%);
    }
    .hero__halo { display: none; }
    .hero__scroll { display: none; }
    .hero__sub { flex-wrap: wrap; gap: 0.6rem; letter-spacing: 0.3em; }
    .hero__meta { gap: 0.5rem 1.2rem; }
    .hero__meta span { font-size: 0.68rem; }
    .hero__actions { gap: 0.7rem; }
    .hero__actions .riot-button { flex: 1 1 100%; justify-content: center; }

    .silence { min-height: 70svh; }
    /* still one line on mobile: sized to span the full column width */
    .silence__words {
        font-size: 18vw;
        letter-spacing: -0.02em;
    }

    .element-word { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .element-word__note { text-align: left; max-width: none; }
    .element-word__wash { opacity: 0.22; }

    .campaign-bleed { height: 70svh; }
    .campaign-bleed__caption { max-width: none; }

    .countdown { gap: 1.2rem 2rem; }
    .countdown__unit { min-width: 4rem; }

    .event__fact { grid-template-columns: 1fr; gap: 0.4rem; }
    .event__fact dt { letter-spacing: 0.2em; }

    .social__bubbles { display: none; }
    .social__frame { aspect-ratio: 3 / 4; }

    .merch__grid { grid-template-columns: 1fr; }
    .merch-item__media { aspect-ratio: 3 / 4; }

    .notice { grid-template-columns: 1fr; gap: 0.8rem; }
    .prereg__actions { gap: 1rem; }
    .prereg__actions .riot-button { width: 100%; justify-content: center; }

    .info-grid { grid-template-columns: 1fr; }
    .sponsors__grid { gap: 2rem 1.5rem; }
    .sponsors__item { width: calc(50% - 1.5rem); min-height: 88px; }
    .sponsors__item img { max-height: 78px; }

    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

    /* Subpage heroes are wide crops. At phone width the frame is far taller
       than the file, so cover crops hard from the sides. Each page pans to
       keep its subject's face in frame. */
    .page-hero { min-height: 56svh; }
    .merch-page .page-hero__media img  { object-position: 44% 42%; }
    .tickets .page-hero__media img     { object-position: 20% 38%; }
    .info-page .page-hero__media img   { object-position: 80% 40%; }

    /* sticky CTA becomes a full-width ticket stub along the bottom edge,
       so it stays easy to tap. The notches move to the short ends. */
    .sticky-cta {
        left: 0;
        right: 0;
        bottom: 0;
        justify-content: center;
        transform: translateY(100%);
    }
    .sticky-cta.is-visible { transform: translateY(0); }
    /* stretched across a phone the tear texture smears, so the bar keeps a
       torn top edge only and squares off against the screen edges */
    .sticky-cta__ticket {
        justify-content: center;
        --notch: 9px;
        -webkit-mask-image:
            linear-gradient(#000, #000),
            radial-gradient(circle at left center, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
            radial-gradient(circle at right center, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
        mask-image:
            linear-gradient(#000, #000),
            radial-gradient(circle at left center, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
            radial-gradient(circle at right center, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
    }
    .sticky-cta::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 12px;
        background: var(--riot-pink);
        -webkit-mask-image: url("../images/textures/ticket-edge.png");
        mask-image: url("../images/textures/ticket-edge.png");
        -webkit-mask-size: 300% 400%;
        mask-size: 300% 400%;
        -webkit-mask-position: center top;
        mask-position: center top;
        transition: background 0.3s var(--ease);
    }
    .sticky-cta:hover::before { background: var(--white); }
    .sticky-cta__body {
        flex-direction: row;
        align-items: baseline;
        gap: 0.7rem;
        padding: 0.95rem 1rem;
    }
    .sticky-cta__stub { padding: 0.6rem 1rem; }
    .sticky-cta__mark { width: 16px; height: 16px; }
    /* the bar sits on the bottom edge, so paint would run off screen */
    .sticky-cta__drips { display: none; }
    .site-footer { padding-bottom: 3.5rem; }
}

/* -------------------------------------------------------- small phone, 400 */
@media (max-width: 400px) {
    .brand__mark { width: 96px; }
    .marquee__item { font-size: 1.6rem; }
    .mobile-menu__link { font-size: clamp(2.4rem, 14vw, 3.4rem); }
}

/* -------------------------------------------------------- landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
    .hero { min-height: 620px; }
    .silence { min-height: auto; }
}

/* --------------------------------------------------------------- hover off */
@media (hover: none) {
    .element-word__wash { opacity: 0.2; }
}

/* ------------------------------------------------------------------- print */
@media print {
    .site-header, .sticky-cta, .mobile-menu, .marquee, body::after { display: none !important; }
    body { background: #fff; color: #000; }
}