/*
 * Agape Church: responsive and mobile styles.
 * Loaded after style.css. Desktop stays untouched above 991.98px.
 *   - Mobile menu: below 992px.
 *   - Mobile layout: below 768px (Bootstrap md), where every column stacks.
 */

/* Mobile menu (hidden on desktop) */

.nav-toggle,
.mobile-menu {
    display: none;
}

@media (max-width: 991.98px) {
    header,
    header.is-compact {
        padding: 12px 0;
    }

    header > .container-fluid,
    body:has(.hero-overlay) header:not(.is-compact) > .container-fluid {
        --bs-gutter-x: 40px;
    }

    header .row {
        flex-wrap: nowrap;
    }

    header .row > * {
        flex: 0 0 auto;
        width: auto;
    }

    header .row > :last-child {
        margin-left: auto;
    }

    header .nav,
    header .btn-sm {
        display: none;
    }

    .logo {
        width: 150px;
    }

    header.is-compact .logo {
        transform: none;
    }

    body:has(.hero-overlay) header:not(.is-compact) {
        padding: 22px 0 12px;
    }

    body:has(.hero-overlay) header:not(.is-compact) > .container-fluid {
        --bs-gutter-x: 56px;
    }

    body:has(.hero-overlay) header:not(.is-compact)::before {
        inset: 10px 10px 0;
    }

    .nav-toggle {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-naval-blue);
    }

    body:has(.hero-overlay) header:not(.is-compact) .nav-toggle {
        color: var(--color-soft-white);
    }

    .nav-toggle-line {
        display: block;
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background-color: currentColor;
        transition: transform .5s var(--ease-spring), background-color .3s;
    }

    .nav-toggle:focus-visible {
        outline: 2px solid var(--color-terracotta);
        outline-offset: 2px;
        border-radius: 6px;
    }

    .menu-open,
    .menu-open body {
        overflow: hidden;
    }

    .menu-open header,
    .menu-open header.is-compact {
        padding: 12px 0;
    }

    .menu-open header > .container-fluid {
        --bs-gutter-x: 40px;
    }

    .menu-open header::before {
        opacity: 0;
    }

    .menu-open header .logo {
        filter: brightness(0) invert(1);
    }

    .menu-open .nav-toggle {
        color: var(--color-soft-white);
    }

    .menu-open .nav-toggle-line:first-child {
        transform: translateY(4px) rotate(45deg);
    }

    .menu-open .nav-toggle-line:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }

    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: -1;
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
        height: 100dvh;
        padding: 88px 20px calc(32px + env(safe-area-inset-bottom));
        background-color: var(--color-naval-blue);
        color: var(--color-soft-white);
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transition: clip-path .7s var(--ease-spring), visibility 0s .7s;
    }

    .menu-open .mobile-menu {
        visibility: visible;
        clip-path: inset(0);
        transition: clip-path .7s var(--ease-spring), visibility 0s;
    }

    .mobile-menu-inner {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    .mobile-menu-list {
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid rgba(247, 245, 242, .2);
    }

    .mobile-menu-list > li,
    .mobile-menu-footer {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .3s, transform .3s;
    }

    .mobile-menu-list > li {
        border-bottom: 1px solid rgba(247, 245, 242, .2);
    }

    .menu-open .mobile-menu-list > li,
    .menu-open .mobile-menu-footer {
        opacity: 1;
        transform: none;
        transition: opacity .5s calc(.2s + var(--i) * .05s), transform .7s var(--ease-spring) calc(.2s + var(--i) * .05s);
    }

    .mobile-menu-link {
        display: flex;
        gap: 16px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 18px 0;
        border: 0;
        background: none;
        color: inherit;
        font-family: 'Special Gothic Expanded One', var(--bs-font-sans-serif);
        font-size: 26px;
        line-height: 1.1;
        text-align: left;
        text-transform: uppercase;
    }

    .mobile-menu-link:hover,
    .mobile-menu-link:focus-visible {
        color: inherit;
    }

    .mobile-menu-link.active {
        color: var(--color-warm-sand);
    }

    .mobile-menu-link .icon-plus {
        width: 22px;
        height: 22px;
        transition: transform .35s cubic-bezier(.65, 0, .35, 1);
    }

    .mobile-menu-link[aria-expanded="true"] .icon-plus {
        transform: rotate(45deg);
    }

    .mobile-menu .collapsing {
        transition: height .45s cubic-bezier(.65, 0, .35, 1);
    }

    .mobile-menu-sub {
        margin: -4px 0 0;
        padding: 0 0 14px;
        list-style: none;
    }

    .mobile-menu-sublink {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 12px 0;
        color: inherit;
    }

    .mobile-menu-sublink:hover {
        color: inherit;
    }

    .mobile-menu-subtitle {
        display: block;
        font-family: 'Special Gothic Expanded One', var(--bs-font-sans-serif);
        font-size: 16px;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .mobile-menu-sublink.active .mobile-menu-subtitle {
        color: var(--color-warm-sand);
    }

    .mobile-menu-text,
    .mobile-menu-info {
        font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        line-height: 1.5;
        letter-spacing: -.02em;
        text-transform: uppercase;
        color: rgba(247, 245, 242, .6);
    }

    .mobile-menu-text {
        display: block;
        margin-top: 4px;
    }

    .mobile-menu-sublink .icon-arrow {
        width: 14px;
        height: 14px;
        margin-left: auto;
        color: var(--color-warm-sand);
    }

    .mobile-menu-footer {
        margin-top: auto;
        padding-top: 40px;
    }

    .mobile-menu-footer .btn {
        justify-content: space-between;
        width: 100%;
        height: 52px;
        margin-bottom: 28px;
    }

    .mobile-menu-info + .mobile-menu-info {
        margin-top: 8px;
    }

    .mobile-menu-info a {
        color: inherit;
    }
}

/* Mobile layout */

@media (max-width: 767.98px) {
    :root {
        --fs-display: 36px;
        --fs-h1: 32px;
        --fs-h2: 26px;
        --fs-h3: 20px;
        --fs-h4: 18px;
        --fs-h5: 18px;
        --fs-body: 16px;
        --fs-small: 14px;
        --fs-button: 15px;
        --space-cta: 28px;
        --space-buttons: 12px;
        --radius: 8px;
    }

    h1, .h1,
    h2, .h2,
    h3, .h3,
    .display-1 {
        line-height: 1.05;
        overflow-wrap: break-word;
    }

    hr {
        border-top-width: 2px;
    }

    .container,
    .container-fluid {
        --bs-gutter-x: 40px;
    }

    #smooth-content {
        padding-top: 68px;
    }

    /* Stacked columns: left aligned, no desktop offsets */

    main .row > [class*="col-md-"],
    footer .row > [class*="col-md-"] {
        padding-top: 0;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    main .row > [class*="col-md-"] + [class*="col-md-"],
    footer .row > [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 20px;
    }

    main .justify-content-end {
        justify-content: flex-start !important;
    }

    main p,
    main li {
        max-width: none !important;
    }

    .eyebrow {
        font-size: 12px;
    }

    .buttons {
        flex-wrap: wrap;
    }

    /* Frames and heroes */

    .frame {
        height: 62svh;
    }

    .hero {
        padding-top: 10px;
    }

    .hero-overlay {
        margin-top: -68px;
        padding: 10px 0;
    }

    .hero > .container-fluid,
    .cover > .container-fluid,
    .banner > .container-fluid {
        --bs-gutter-x: 20px;
    }

    .hero .frame {
        height: 70svh;
    }

    .frame.is-stacked {
        height: auto;
        aspect-ratio: 1;
    }

    .frame.is-stacked video {
        height: calc(100% / 3);
        transform: none !important;
    }

    .hero-compact .frame {
        height: 42svh;
        min-height: 260px;
    }

    .hero .container {
        padding-bottom: 16px;
    }

    .hero hr {
        margin-top: 16px;
    }

    .btn-frame-label {
        font-size: 14px;
    }

    /* Lists */

    .list-links li > a,
    .list-links li > button,
    .list-links li > a:hover,
    .list-links li > button:hover,
    .list-links li > button[aria-expanded="true"] {
        min-height: 60px;
        padding: 14px 0;
    }

    .list-links li > a:hover,
    .list-links li > button:hover {
        color: #000;
    }

    .text-white .list-links li > button:hover {
        color: inherit;
    }

    .list-links li > a::before,
    .list-links li > button::before {
        content: none;
    }

    .list-links small {
        gap: 10px;
        min-width: 0;
        margin-right: 0;
        font-size: 12px;
    }

    .list-links .h3 {
        font-size: 18px !important;
        line-height: 1.3;
    }

    .list-links .icon-plus {
        width: 22px;
        height: 22px;
    }

    .list-links .icon-arrow {
        width: 14px;
        height: 14px;
    }

    .list-links p {
        padding-bottom: 20px;
    }

    .list-links .buttons {
        padding-bottom: 24px;
    }

    .list-bullets {
        padding-left: 20px;
    }

    /* Home */

    .intro {
        padding-bottom: 64px;
    }

    .intro .row > .col-md-4 {
        padding-top: 40px;
    }

    .intro-title {
        font-size: 34px;
        line-height: 1.05;
    }

    .intro-lead {
        margin-bottom: 24px;
        font-size: 12px;
    }

    .intro .list-links {
        margin-top: 32px;
    }

    .gallery {
        padding: 48px 0 56px;
    }

    .marquee-track > * {
        width: 240px;
        height: 290px;
    }

    .message {
        padding: 56px 0 64px;
    }

    .message .ratio {
        width: 100%;
        margin-left: 0;
    }

    .message .row > .col-md-5 {
        margin-top: 32px;
    }

    .message h1,
    .message h2 {
        margin-top: 16px;
    }

    .message .message-lead {
        margin: 0 0 28px;
    }

    .message .message-meta,
    .message .message-text {
        margin-top: 16px;
    }

    .message .buttons {
        margin-top: 28px;
    }

    .family {
        padding: 48px 0 64px;
    }

    .family hr {
        margin-bottom: 28px;
    }

    .family .col-md-5 p {
        max-width: none;
        margin: 0;
    }

    .family .cards,
    .family .programs {
        margin-top: 40px;
    }

    .cards {
        flex-direction: column;
        gap: 32px;
    }

    main .cards > [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 0;
    }

    .cards > :hover,
    .cards > :has(:focus-visible) {
        flex-grow: 1;
        margin-bottom: 0;
    }

    .card-body {
        padding-top: 24px;
    }

    .card-body::before {
        height: 10px;
    }

    .card-title {
        font-size: 22px;
    }

    .card-text {
        max-width: none;
        margin-top: 12px;
    }

    .card.is-revealed .card-body::before {
        background-color: var(--color-terracotta);
    }

    .card.is-revealed .card-text {
        clip-path: inset(0);
        transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .card .card-text {
            clip-path: none;
            transform: none;
        }
    }

    .banner .frame {
        height: 78svh;
    }

    .banner .container {
        padding-bottom: 20px;
    }

    .banner .btn-frame {
        margin-bottom: 0;
    }

    .steps {
        padding-top: 48px;
    }

    .steps .container > .row:first-child {
        margin-bottom: 24px;
    }

    .steps .container > .row:first-child hr {
        margin-bottom: 28px;
    }

    .steps .container > .row:first-child .text-uppercase {
        margin-top: 0;
    }

    .steps h2 br {
        display: none;
    }

    .stack-item {
        padding: 36px 0 40px;
        border-top-width: 2px;
    }

    .stack-item .h2 + p {
        margin-top: 16px;
    }

    .stack-item .parallax {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        margin: 4px 0 0;
    }

    .closing {
        padding: 16px 0 56px;
    }

    /* Inner pages */

    .ministry {
        padding-top: 32px;
    }

    .hero + .ministry:not(.values) {
        padding-top: 6px;
    }

    .hero + .ministry:not(.values) > .container {
        padding-top: 18px;
    }

    .ministry .row > .col-md-4,
    .register .row > .col-md-4,
    .checkin .row > .col-md-4 {
        padding-top: 32px;
    }

    .ministry h1 + p,
    .ministry .h1 + p,
    .checkin .h1 + p,
    .ministry p + p {
        margin-top: 20px;
    }

    .ministry .list-links {
        width: 100%;
        margin-top: 32px;
    }

    .ministry .btn-link {
        margin-top: 32px;
    }

    .chapter {
        padding-bottom: 64px;
    }

    .slider {
        padding: 48px 0;
    }

    .checkin {
        padding: 24px 0 64px;
    }

    .cover {
        padding: 10px 0;
    }

    .cover .frame {
        height: 52svh;
    }

    .ministry + .cover,
    .register + .cover {
        padding-top: 40px;
    }

    .register > .container-fluid {
        padding-top: 40px;
    }

    .ministry + .faq,
    .register + .faq,
    .register + .gallery {
        margin-top: 48px;
    }

    .form {
        max-width: none;
        margin-top: 28px;
    }

    .form .row {
        --bs-gutter-y: 20px;
    }

    .form-option {
        min-width: 52px;
        min-height: 44px;
        padding: 10px 16px;
    }

    .form-phone {
        gap: 16px;
    }

    .form-phone .form-select {
        min-width: 104px;
    }

    .form-control,
    .form-select {
        height: 48px;
    }

    .form-options-wide .form-option {
        flex-basis: 100%;
    }

    .form-success svg {
        width: 48px;
        height: 48px;
    }

    /* FAQ and photo frames */

    .faq {
        padding: 56px 0 64px;
    }

    .faq .row > .col-md-8 {
        margin-top: 36px;
    }

    .faq .pixel-frame,
    .faq .swap-frame {
        width: 100%;
        margin-top: 0;
    }

    .faq .h1 {
        margin: 24px 0;
    }

    .faq hr + h3,
    .faq p + h3,
    .values p + h3,
    .values .h1 + h3 {
        margin-top: 32px;
    }

    .faq p + p {
        margin-top: 16px;
    }

    .faq .btn + h3 {
        margin-top: 40px;
    }

    .photo-stack {
        width: 100%;
        height: auto;
        margin: 0;
        aspect-ratio: 615 / 727;
    }

    .photo-stack img {
        width: 100%;
        height: 100%;
    }

    .photo-stack img + img {
        display: none;
    }

    .swap-frame {
        aspect-ratio: 4 / 3;
        margin-top: 20px;
    }

    .swap-frame img + img {
        display: none;
    }

    main .ministry .row:has(.swap-frame) > .col-md-8 {
        padding-top: 0;
        margin-top: 32px;
    }

    /* About */

    .mission {
        padding-top: 32px;
    }

    .mission-item {
        padding-bottom: 32px;
    }

    .mission-item hr {
        margin-bottom: 24px;
    }

    .mission-item p + p {
        margin-top: 12px;
    }

    .hover-reveal {
        display: none;
    }

    .fz-4rem {
        font-size: 24px;
    }

    .values h3 + p {
        margin-top: 8px;
    }

    .values p + p {
        margin-top: 14px;
    }

    .values p + .btn {
        margin-top: 24px;
    }

    .values .btn + h3 {
        margin-top: 40px;
    }

    .beliefs {
        padding-top: 40px;
    }

    .beliefs-lead {
        padding-left: 0;
    }

    .beliefs .row > .col-md-4 br,
    .beliefs .row > .col-md-8 br:first-child,
    .beliefs .row > .col-md-8 br + br {
        display: none;
    }

    .beliefs .row > .col-md-4 {
        padding-top: 40px;
    }

    .pastor-divider {
        margin-top: 48px;
    }

    .pastor {
        margin-top: 32px;
    }

    .pastor img,
    .pastor .parallax {
        max-width: none;
    }

    main .pastor > .col-md-8 {
        margin-top: 24px;
    }

    .members {
        padding-top: 32px;
    }

    .members .h1 {
        margin: 32px 0 24px;
    }

    .members .container > .row:last-child {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px 12px;
    }

    .members .container > .row:last-child:has(.member-bio) {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    main .members .container > .row:last-child > [class*="col-md-"] {
        width: auto;
        margin-top: 0;
    }

    .members .container > .row:last-child:has(.member-bio) .member img {
        aspect-ratio: 1;
    }

    .member h3 {
        margin-top: 12px;
    }

    .member-bio {
        margin-top: 10px;
        opacity: 1;
    }

    /* Listings */

    .listing {
        padding: 40px 0 64px;
    }

    .listing hr {
        margin-bottom: 28px;
    }

    .filters {
        gap: 20px;
        row-gap: 12px;
    }

    .masonry,
    .tiles {
        margin-top: 28px;
    }

    main .masonry > [class*="col-md-"],
    main .tiles > [class*="col-md-"] {
        margin-top: 0;
        padding-bottom: 20px;
    }

    .tile-body {
        padding: 20px;
    }

    .btn-link .icon-arrow {
        width: 12px;
        height: 12px;
    }

    /* Footer */

    footer {
        padding: 56px 0 32px;
    }

    footer .row > [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 36px;
    }

    .footer-logo {
        width: 220px;
    }

    footer .row + .row {
        margin-top: 48px;
        padding-top: 20px;
    }

    /* Iconos sociales: tamaño legible y separación táctil */
    footer ul.fs-1 {
        gap: 20px !important;
        margin-top: 20px !important;
        font-size: 30px !important;
    }
}