/*
 * Responsive Styles for MKRST
 *
 * Mobile/responsive overrides only - loaded after main.css and custom-classes.css.
 * Breakpoint tokens (documented in :root): --bp-sm 540, --bp-md 768, --bp-lg 1024, --bp-scroll-block 900
 *
 * - Mobile:              max-width: 767px
 * - Small mobile:        max-width: 540px
 * - Scroll-block mobile: max-width: 900px (matches JS pin cutoff)
 * - Tablet portrait:     768px – 1023px
 * - Tablet landscape:    1024px – 1279px
 */

/* ==========================================================================
   Mobile (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------------------
       Base typography - reduce root size site-wide on mobile
       ------------------------------------------------------------------ */

    html,
    body {
        font-size: 15px;
    }

    .content-blocks {
        --content-body-size: 1em;
    }

    h2 {
        font-size: clamp(1.25em, 5vw, 2.25em);
    }

    h3 {
        font-size: 1.1em;
    }

    .journal-page__title,
    .work-page__title,
    .archive-hero__title,
    .work-latest__heading,
    .post-related__heading,
    .title-block .title-block__column :is(h1, h2) {
        font-size: 1.65em;
    }

    .content-blocks__heading {
        font-size: 0.72em;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .content-blocks__three-col-heading {
        font-size: 0.95em;
        font-weight: 500;
    }

    .content-blocks__carousel-text-main {
        font-size: clamp(1.15em, 4.5vw, 1.75em);
    }

    .featured-work__title {
        font-size: 1em;
        font-weight: 500;
    }

    .featured-clients {
        font-size: clamp(1.75em, 5vw, 2.75em);
    }

    .scroll-block__panel-description {
        font-size: 1em;
    }

    .scroll-block__panel-services {
        font-size: 0.82em;
        color: var(--color-text-muted);
    }

    /* ------------------------------------------------------------------
       Header - shared gutter with content; title + Menu on one baseline
       ------------------------------------------------------------------ */

    :root {
        --site-section-padding: 1.25rem;
        --header-height: calc(2.75rem + (2 * var(--site-section-padding)) + env(safe-area-inset-top, 0px));
    }

    .site-header .container {
        padding-block: var(--site-section-padding);
        padding-inline: var(--site-section-padding);
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        min-height: 2.75rem;
    }

    .site-header__nav {
        display: none;
    }

    .site-header__brand,
    .site-header__menu {
        grid-column: auto;
        display: flex;
        align-items: center;
        flex: 0 1 auto;
    }

    .site-header__brand {
        min-width: 0;
        justify-content: flex-start;
    }

    .site-header__menu {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .site-header__brand a,
    .site-header .menu-toggle {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        line-height: 1.2;
        padding: 0;
        font-size: 1em;
        font-weight: inherit;
    }

    .site-header .menu-toggle {
        justify-content: flex-end;
        min-width: 0;
    }

    /* Keep site title + Menu visible at page bottom on mobile */
    .site-header--bottom .site-header__brand,
    .site-header--bottom .site-header__menu {
        overflow: visible;
        pointer-events: auto;
        transform: none;
        opacity: 1;
    }

    /* ------------------------------------------------------------------
       Hero
       ------------------------------------------------------------------ */

    .module--hero_section {
        min-height: 58vh;
        row-gap: var(--space-xl);
        padding-top: calc(var(--header-height) + var(--space-lg));
        padding-bottom: var(--space-xl);
        align-content: end;
    }

    .module--hero_section .hero__headline {
        font-size: 1.2em;
        max-width: none;
    }

    .module--hero_section .hero__headline h1 {
        font-size: 1.55em;
        line-height: 1.3;
    }

    .module--hero_section .hero__buttons {
        display: none;
    }

    .module--hero_section .hero__callout-buttons {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.15em 0.35em;
        font-size: 1.05em;
        width: max-content;
        max-width: 100%;
    }

    .module--hero_section .hero__callout-buttons:hover .btn {
        opacity: 1;
    }

    /* ------------------------------------------------------------------
       Float bar (mobile CTAs)
       ------------------------------------------------------------------ */

    .float-bar {
        display: flex;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    body:not(.single-work) .float-bar {
        display: flex;
    }

    .float-bar .floating-cta,
    .float-bar .floating-deck {
        padding: 0.75rem 1.5rem;
    }

    .float-bar__pill {
        max-width: none;
        width: calc(100% - (2 * var(--site-section-padding)));
        margin-inline: var(--site-section-padding);
        margin-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .float-bar__project {
        width: 100%;
        min-height: 3.25rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        padding-top: 1rem;
    }

    body.single-work .site-main,
    body:not(.single-work) .site-main {
        padding-bottom: 5.5rem;
    }

    /* Work dock hover buttons - float-bar handles mobile CTAs.
       Keep overlay panels available when opened from the float-bar. */
    .work-dock {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .work-dock__panel--overlay:not(.is-active) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .work-dock__panel--overlay.is-active {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* ------------------------------------------------------------------
       Title block
       ------------------------------------------------------------------ */

    .title-block__grid .title-block__column {
        grid-column: 1 / -1 !important;
    }

    .title-block__grid .title-block__column h1,
    .title-block__grid .title-block__column h2 {
        line-height: 1.25;
        margin-top: 0;
        margin-bottom: 0;
    }

    .title-block__column h2 {
        padding: 0;
    }

    .title-block.u-pt-xl {
        padding-top: clamp(3.5rem, 14vw, 5rem) !important;
    }

    /* ------------------------------------------------------------------
       Content blocks
       ------------------------------------------------------------------ */

    .module--content_blocks {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
        padding-inline: var(--space-md);
    }

    .content-blocks__carousel-scroll-wrap {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }

    .content-blocks__carousel-scroll-wrap.is-native-scroll {
        overflow-x: auto;
    }

    .content-blocks__carousel-track {
        gap: var(--grid-gap);
        transform: none !important;
        will-change: auto;
        padding-inline: var(--site-section-padding);
    }

    .content-blocks__carousel-slide {
        flex: 0 0 auto;
        width: min(85vw, 28rem);
        min-width: 0;
        height: 16rem;
        box-sizing: border-box;
        scroll-snap-align: start;
    }

    .content-blocks__carousel-slide img,
    .content-blocks__carousel-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: none;
    }

    .content-blocks__carousel--grayscale .content-blocks__carousel-slide img,
    .content-blocks__carousel--grayscale .content-blocks__carousel-slide video {
        filter: none;
    }

    .content-blocks__carousel-text {
        padding: var(--space-xl) var(--space-md);
    }

    .content-blocks__split .content-blocks__col-media,
    .content-blocks__col:not(.content-blocks__col--image_text) > .content-blocks__col-media {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .content-blocks__three-col {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* ------------------------------------------------------------------
       Work archive grids
       ------------------------------------------------------------------ */

    .work-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md);
    }

    .work-archive--pairs .work-archive__item--featured {
        grid-column: 1 / -1;
    }

    /* grid-cards uses a more specific rule in main.css that keeps 3 cols on mobile */
    .work-archive--grid-cards .work-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-archive--grid-cards .work-archive__meta .work-archive__title {
        font-size: 0.95em;
        font-weight: 500;
        color: var(--color-text);
    }

    .work-archive--grid-cards .work-archive__client {
        font-size: 0.78em;
        font-weight: 400;
        color: var(--color-text-muted);
    }

    .work-archive--grid-cards .work-archive__excerpt {
        font-size: 0.82em;
        font-weight: 400;
        color: var(--color-text-muted);
        white-space: normal;
        overflow: hidden;
        text-overflow: unset;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        max-width: none;
    }

    .work-archive--grid-cards .work-archive__meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15em;
    }

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

    .work-archive--pairs .work-archive__grid {
        row-gap: calc(var(--grid-gap) * 4);
    }

    .work-archive--pairs .work-archive__excerpt {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: unset;
    }

    /* Tap-to-reveal hover media */
    .work-archive__media--has-hover.is-hover-revealed .work-archive__media-hover {
        opacity: 1;
    }

    .work-archive__cursor-title {
        display: none !important;
    }

    body.work-archive-cursor-active,
    body.work-archive-cursor-active * {
        cursor: auto !important;
    }

    /* Journal cards - always-readable, no hover-only overlay */
    .journal-card__media::after,
    .journal-card__view-post,
    .post-related .work-latest__view-post {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .journal-card__link:hover .journal-card__media::after,
    .journal-card__link:focus-visible .journal-card__media::after,
    .journal-card__link:hover .journal-card__view-post,
    .journal-card__link:focus-visible .journal-card__view-post {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* ------------------------------------------------------------------
       Menu drawer
       ------------------------------------------------------------------ */

    .menu-drawer__cta-row {
        grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr);
        row-gap: var(--space-sm);
    }

    .menu-drawer__nav-layout {
        grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr);
    }

    .menu-drawer__description {
        max-width: none;
    }

    /* Drawer + inner previously both carried a large padding-bottom,
       doubling the gap under the Connect/description block. Keep one
       modest inset (plus the home-indicator safe area) on the inner. */
    .menu-drawer {
        padding-bottom: 0;
    }

    .menu-drawer__inner {
        padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    }

    .menu-drawer__list a {
        font-size: 2em;
    }

    /* Keep the 44px tap target but align the "Close" text with the
       Menu label / first nav item instead of centering it lower. */
    .menu-drawer__close {
        min-height: 2.75rem;
        min-width: 2.75rem;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 0;
        line-height: 1.2;
    }

    /* ------------------------------------------------------------------
       Journal / post single
       ------------------------------------------------------------------ */

    .post-single__section-main h2 {
        font-size: 2em;
    }

    .site-footer__underlay-snippets {
        padding-bottom: max(var(--site-section-padding), env(safe-area-inset-bottom));
    }

    .work-page .title-block.u-pt-xl,
    .journal-page .title-block.u-pt-xl {
        --page-title-padding-top: clamp(3.5rem, 14vw, 5rem);
    }

    .work-archive--pairs .work-archive__item--featured .work-archive__media {
        aspect-ratio: 16 / 9;
    }

    /* ------------------------------------------------------------------
       Featured work scroll - keep horizontal pin scrub on mobile
       ------------------------------------------------------------------ */

    .featured-work {
        min-height: 100svh;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow: hidden;
    }

    .featured-work__track {
        flex-direction: row;
        width: max-content;
        gap: 1.25em;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .featured-work__item {
        width: min(78vw, 22rem);
        flex: 0 0 auto;
    }

    .featured-work__link,
    .featured-work__media {
        width: 100%;
    }

    .featured-work__media img,
    .featured-work__media video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ------------------------------------------------------------------
       Media banner
       ------------------------------------------------------------------ */

    .module--media_banner .media-banner {
        min-height: 50vh;
    }

    .module--media_banner .media-banner__parallax {
        min-height: 50vh;
        height: 100%;
    }

    .module--media_banner .media-banner__image,
    .module--media_banner .media-banner__video {
        height: 100%;
        min-height: 50vh;
        object-fit: cover;
        object-position: center;
    }

    .module--media_banner .media-banner[data-layout="half"] .media-banner__parallax,
    .module--media_banner .media-banner[data-layout="half"][data-half-position="right"] .media-banner__parallax,
    .module--media_banner .media-banner[data-layout="third"] .media-banner__parallax,
    .module--media_banner .media-banner[data-layout="third"][data-third-position="middle"] .media-banner__parallax,
    .module--media_banner .media-banner[data-layout="third"][data-third-position="right"] .media-banner__parallax {
        grid-column: 1 / -1;
    }

    .module--media_banner .media-banner[data-layout="full"] {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    /* ------------------------------------------------------------------
       Work single
       ------------------------------------------------------------------ */

    .work-single--has-hero,
    .home-hero-page--has-hero {
      --work-intro-height: 58svh;
    }

    .work-media-item {
        border-radius: 0;
    }

    /* ------------------------------------------------------------------
       Footer - 50/50 overlay + Why Rebrand (mobile only)
       ------------------------------------------------------------------ */

    :root {
        --footer-overlay-height: 50svh;
        --footer-underlay-height: 100svh;
    }

    .site-footer .container {
        padding-inline: 0;
    }

    .site-footer__overlay {
        height: var(--footer-overlay-height);
        min-height: var(--footer-overlay-height);
        max-height: var(--footer-overlay-height);
        padding: var(--site-section-padding);
        padding-bottom: calc(var(--site-section-padding) + var(--space-xl));
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        box-sizing: border-box;
    }

    .site-footer__overlay > .container {
        width: 100%;
        margin-top: auto;
    }

    .site-footer__underlay {
        height: var(--footer-overlay-height);
        min-height: var(--footer-overlay-height);
        max-height: var(--footer-overlay-height);
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        place-items: center;
        gap: 0;
    }

    .site-footer__underlay-snippets {
        grid-area: 1 / 1;
        width: min(70rem, 100%);
        margin: 0;
        padding-inline: var(--site-section-padding);
        padding-block: var(--site-section-padding);
        padding-bottom: max(var(--site-section-padding), env(safe-area-inset-bottom));
        align-self: center;
        justify-self: center;
    }

    .site-footer__underlay-logo-wrap {
        grid-area: 1 / 1;
        z-index: 0;
    }

    .site-footer .site-footer__row > *:first-child {
        display: none;
    }

    .site-footer .site-footer__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "studio ."
            "paired paired";
        column-gap: var(--space-md);
        row-gap: var(--space-lg);
        align-items: start;
    }

    .site-footer .site-footer__col--studio {
        grid-area: studio;
    }

    .site-footer .site-footer__col--studio > p {
        margin: 0;
    }

    .site-footer .site-footer__col--paired {
        grid-area: paired;
    }

    .site-footer .site-footer__row .col-2,
    .site-footer .site-footer__row .col-4,
    .site-footer .site-footer__row .col-6 {
        flex: none;
        width: auto;
        max-width: none;
    }

    .site-footer__paired {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "address contact"
            "meta toggle";
        column-gap: var(--space-md);
        row-gap: var(--space-lg);
    }

    .site-footer__stack--social,
    .site-footer__paired-break,
    .site-footer__paired-cell--empty {
        display: none;
    }

    .site-footer__stack--address {
        grid-area: address;
    }

    .site-footer__stack--meta {
        grid-area: meta;
        align-self: start;
    }

    .site-footer__stack--contact {
        grid-area: contact;
    }

    .site-footer__stack--toggle {
        grid-area: toggle;
        align-self: start;
    }

    .site-footer .site-footer__col {
        padding-inline: 0;
        min-width: 0;
    }

    .site-footer .site-footer__col--studio p {
        margin: 0;
    }

    .site-footer {
        padding-bottom: 0;
    }
}

/* ==========================================================================
   Small mobile (max-width: 540px)
   ========================================================================== */

@media (max-width: 540px) {

    .work-archive__grid,
    .work-archive--grid-cards .work-archive__grid,
    .work-archive--pairs .work-archive__grid {
        grid-template-columns: 1fr;
    }

    .work-archive--pairs .work-archive__item--featured {
        grid-column: 1 / -1;
    }

    .work-latest__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Tablet portrait (768px – 1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    .work-archive--pairs .work-archive__grid {
        row-gap: calc(var(--grid-gap) * 5);
    }

    .content-blocks__carousel-text {
        padding: var(--space-xl) var(--site-section-padding);
    }

    .post-single__section-main h2 {
        font-size: 2em;
    }

    .work-archive--grid-cards .work-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Tablet landscape / small desktop (1024px – 1279px)
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1279px) {
    .work-archive--pairs .work-archive__grid {
        row-gap: calc(var(--grid-gap) * 6);
    }
}

/* ==========================================================================
   Desktop (1280px+)
   ========================================================================== */

@media (min-width: 1280px) {
    /* Desktop baseline lives in main.css */
}

/* ==========================================================================
   Large desktop (1440px+)
   ========================================================================== */

@media (min-width: 1440px) {
    /* Large desktop baseline lives in main.css */
}

/* ==========================================================================
   Scroll block (≤900): full-viewport accordion above the mobile CTA bar
   ========================================================================== */

@media (max-width: 900px) {
    :root {
        --float-bar-offset: calc(4.75rem + env(safe-area-inset-bottom, 0px));
        --site-section-padding: 1.25rem;
        --header-height: calc(2.75rem + (2 * var(--site-section-padding)) + env(safe-area-inset-top, 0px));
    }

    .module--scroll_block {
        height: calc(100svh - var(--float-bar-offset));
        min-height: calc(100svh - var(--float-bar-offset));
        max-height: calc(100svh - var(--float-bar-offset));
        padding: 0 !important;
    }

    .scroll-block-cover {
        margin-top: calc(-1 * (100svh - var(--float-bar-offset)));
        min-height: calc(100svh - var(--float-bar-offset));
    }

    .scroll-block-cover.module--media_banner .media-banner,
    .scroll-block-cover.module--media_banner .media-banner__parallax {
        min-height: calc(100svh - var(--float-bar-offset));
        height: calc(100svh - var(--float-bar-offset));
    }

    .scroll-block__tab:not(.is-active) {
        display: none;
    }

    .scroll-block__tab-sep {
        display: none;
    }

    .scroll-block__tab {
        display: block;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 1;
        cursor: default;
        font-size: 1.15em;
    }

    .scroll-block__pin {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        padding-top: calc(var(--header-height) + var(--space-md));
        padding-right: var(--site-section-padding);
        padding-bottom: var(--space-md);
        padding-left: var(--site-section-padding);
        box-sizing: border-box;
    }

    .scroll-block__tabs {
        flex: 0 0 auto;
        border: none;
        min-height: 0;
        margin-bottom: var(--space-md);
        grid-column: auto;
    }

    .scroll-block__panels {
        flex: 1 1 auto;
        min-height: 0;
        border: none;
        overflow: hidden;
        padding: 0;
        grid-column: auto;
        height: auto;
    }

    .scroll-block__panels-inner,
    .scroll-block__panel.is-active {
        height: 100%;
        min-height: 0;
    }

    .scroll-block__panel-content {
        justify-content: space-between;
        gap: var(--space-xl);
        min-height: 100%;
        height: 100%;
    }

    .scroll-block__panel-services {
        margin-top: auto;
        padding-bottom: 0;
    }
}

/* ==========================================================================
   Float-bar: hidden on tablet and up (desktop work-dock handles CTAs)
   ========================================================================== */

@media (min-width: 768px) {
    .float-bar {
        display: none !important;
    }
}

/* ==========================================================================
   Very short viewports (phone landscape): pin is disabled in main.js
   (scrollBlockNoPinQuery) - section sizes to content, tabs become a
   tappable row. Keep the 520px value in sync with main.js.
   ========================================================================== */

@media (max-height: 520px) {
    .module--scroll_block {
        height: auto;
        min-height: 100svh;
        max-height: none;
        overflow: visible;
    }

    .module--scroll_block .scroll-block,
    .scroll-block__pin {
        height: auto;
    }

    .scroll-block__panels {
        height: auto;
        overflow: visible;
    }

    .scroll-block__panels-inner,
    .scroll-block__panel,
    .scroll-block__panel.is-active,
    .scroll-block__panel-content {
        height: auto;
        min-height: 0;
    }

    .scroll-block__tab:not(.is-active),
    .scroll-block__tab-sep {
        display: inline;
    }

    .scroll-block__tab {
        display: inline;
        opacity: 0.4;
        cursor: pointer;
    }

    .scroll-block__tab.is-active {
        opacity: 1;
    }
}