/* ─── AQUA MALACCA — About page responsive (clean stack + scroll UX) ─── */

@media (max-width: 1280px) {
    .ap-wrap,
    .ap-hero__inner {
        width: min(1180px, calc(100% - 64px));
    }

    .ap-story,
    .ap-journey,
    .ap-team,
    .ap-stats {
        padding: 88px 0;
    }

    .ap-values {
        padding: 80px 0;
    }
}

@media (max-width: 1024px) {
    .page-about .ap {
        --ap-stack-width: min(100%, 560px);
        --ap-carousel-item: min(76vw, 300px);
    }

    .page-about .ap-section {
        position: relative;
        text-align: center;
    }

    .page-about .ap-section::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--ap-accent), transparent);
        transform: translateX(-50%);
        opacity: 0;
        transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
        pointer-events: none;
    }

    .page-about .ap-section.is-active::after {
        width: min(160px, 42%);
        opacity: 1;
    }

    .ap-wrap,
    .ap-hero__inner {
        width: min(1180px, calc(100% - 40px));
    }

    .ap-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Hero */
    .ap-hero {
        min-height: auto;
        padding:
            calc(92px + env(safe-area-inset-top, 0px))
            0
            calc(72px + env(safe-area-inset-bottom, 0px));
    }

    .ap-hero__grid {
        grid-template-columns: 1fr;
    }

    .ap-hero__aside {
        display: none;
    }

    .ap-hero__bg {
        background-position: center 30%;
        transform: none;
    }

    html[dir="rtl"] .ap-hero__bg {
        background-position: center 30%;
    }

    .ap-hero__overlay {
        background: linear-gradient(
            180deg,
            rgba(249, 247, 242, 0.96) 0%,
            rgba(249, 247, 242, 0.92) 50%,
            rgba(249, 247, 242, 0.55) 100%
        );
    }

    html[data-theme="dark"] .ap-hero__overlay {
        background: linear-gradient(
            180deg,
            rgba(10, 11, 10, 0.94) 0%,
            rgba(10, 11, 10, 0.9) 50%,
            rgba(10, 11, 10, 0.58) 100%
        );
    }

    .ap-hero__content {
        max-width: var(--ap-stack-width);
        margin-inline: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ap-hero__desc {
        margin-inline: auto;
    }

    .ap-hero__cta {
        justify-content: center;
    }

    .ap-hero__title {
        font-size: clamp(40px, 7vw, 56px);
    }

    /* Story + Journey stacks */
    .ap-story,
    .ap-journey,
    .ap-team,
    .ap-values,
    .ap-stats {
        padding: 72px 0;
    }

    .ap-story__grid,
    .ap-journey__grid {
        grid-template-columns: 1fr;
        gap: 40px;
        justify-items: center;
    }

    .ap-story__content,
    .ap-journey__content,
    .ap-team__intro {
        width: var(--ap-stack-width);
        max-width: var(--ap-stack-width);
        margin-inline: auto;
        text-align: center;
    }

    .ap-body {
        max-width: none;
        margin-inline: auto;
    }

    .ap-eyebrow {
        margin-inline: auto;
    }

    .ap-story__visual,
    .ap-journey__visual {
        width: min(100%, 480px);
        margin-inline: auto;
    }

    .ap-journey__visual {
        order: -1;
    }

    .ap-story__frame {
        border-radius: 22px;
    }

    .ap-story__frame img {
        min-height: 0;
        aspect-ratio: 4 / 5;
        max-height: 440px;
    }

    .ap-story__badge {
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
    }

    html[dir="rtl"] .ap-story__badge {
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }

    /* Features — minimal editorial stack */
    .ap-features {
        width: var(--ap-stack-width);
        margin: 28px auto 0;
        gap: 0;
    }

    .ap-features__item {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 10px;
        padding: 22px 0;
        border: none;
        border-radius: 0;
        background: none;
        border-bottom: 1px solid rgba(176, 141, 87, 0.14);
    }

    .ap-features__item:last-child {
        border-bottom: none;
    }

    .ap-features__icon {
        margin-bottom: 4px;
    }

    .ap-features__title,
    .ap-features__text {
        text-align: center;
    }

    /* Values — snap carousel */
    .ap-values__carousel {
        width: 100%;
        max-width: 100%;
        position: relative;
        overflow-x: clip;
        overflow-y: visible;
    }

    .ap-values__grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        overflow-y: clip;
        touch-action: pan-x pan-y;
        scroll-snap-type: x mandatory;
        gap: 16px;
        margin-top: 36px;
        padding: 8px max(20px, calc((100% - var(--ap-carousel-item)) / 2)) 20px;
        scroll-padding-inline: max(20px, calc((100% - var(--ap-carousel-item)) / 2));
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        box-sizing: border-box;
    }

    .ap-values__grid::-webkit-scrollbar {
        display: none;
    }

    .ap-values__item {
        flex: 0 0 var(--ap-carousel-item);
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 28px 20px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(176, 141, 87, 0.1);
        box-shadow: none;
        min-height: auto;
    }

    html[data-theme="dark"] .ap-values__item {
        background: rgba(255, 255, 255, 0.03);
    }

    .ap-values__icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(176, 141, 87, 0.1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
    }

    .ap-values__scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 8px;
        font-size: 9px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ap-text-soft);
    }

    html[lang="fa"] .ap-values__scroll-hint {
        letter-spacing: 0.04em;
        text-transform: none;
    }

    .ap-values__dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 14px;
    }

    .ap-values__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: rgba(176, 141, 87, 0.25);
        transition: transform 0.35s ease, background 0.35s ease;
        cursor: pointer;
    }

    .ap-values__dot.is-active {
        background: var(--ap-accent);
        transform: scale(1.35);
    }

    /* Journey timeline — centered editorial */
    .ap-timeline {
        width: var(--ap-stack-width);
        margin: 28px auto 0;
        gap: 0;
        padding: 0;
    }

    .ap-timeline__line {
        display: none;
    }

    .ap-timeline__step {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 8px;
        padding: 24px 0;
        border-bottom: 1px solid rgba(176, 141, 87, 0.12);
    }

    .ap-timeline__step:last-child {
        border-bottom: none;
    }

    .ap-timeline__num {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--ap-line);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
    }

    .ap-timeline__title,
    .ap-timeline__text {
        text-align: center;
    }

    /* Team carousel */
    .ap-team__intro {
        margin-bottom: 32px;
    }

    .ap-link-cta {
        justify-content: center;
    }

    .ap-team__carousel {
        width: 100%;
        max-width: 100%;
        position: relative;
        overflow-x: clip;
        overflow-y: visible;
    }

    .ap-team__grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        overflow-y: clip;
        touch-action: pan-x pan-y;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 8px max(20px, calc((100% - var(--ap-carousel-item)) / 2)) 20px;
        scroll-padding-inline: max(20px, calc((100% - var(--ap-carousel-item)) / 2));
        margin-inline: 0;
        width: 100%;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        box-sizing: border-box;
    }

    .ap-team__grid::-webkit-scrollbar {
        display: none;
    }

    .ap-team__card {
        flex: 0 0 var(--ap-carousel-item);
        scroll-snap-align: center;
        text-align: center;
        opacity: 1;
        transform: none;
    }

    .ap-team__dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 14px;
    }

    .ap-team__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: rgba(176, 141, 87, 0.25);
        transition: transform 0.35s ease, background 0.35s ease;
        cursor: pointer;
    }

    .ap-team__dot.is-active {
        background: var(--ap-accent);
        transform: scale(1.35);
    }

    /* Stats — clean centered grid */
    .ap-stats__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 24px;
        width: min(100%, 480px);
        margin: 36px auto 0;
    }

    .ap-stats__item {
        padding: 20px 12px;
        background: none;
        border: none;
        border-radius: 0;
        text-align: center;
    }

    .ap-stats__icon {
        justify-content: center;
    }

    /* Banner */
    .ap-banner {
        min-height: 340px;
        padding: 64px 0;
    }

    .ap-banner__inner {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .page-about .ap {
        --ap-stack-width: min(100%, 480px);
        --ap-carousel-item: min(82vw, 280px);
    }

    .ap-wrap,
    .ap-hero__inner {
        width: min(1180px, calc(100% - 28px));
    }

    .ap-hero {
        padding:
            calc(84px + env(safe-area-inset-top, 0px))
            0
            52px;
    }

    .ap-hero__title {
        font-size: clamp(34px, 9vw, 46px);
        line-height: 1.14;
    }

    .ap-hero__subtitle {
        font-size: clamp(17px, 4.2vw, 22px);
    }

    .ap-hero__desc {
        font-size: 14px;
        line-height: 1.82;
    }

    .ap-heading {
        font-size: clamp(28px, 7.2vw, 38px);
    }

    .ap-story,
    .ap-journey,
    .ap-team,
    .ap-values,
    .ap-stats {
        padding: 56px 0;
    }

    .ap-story__visual {
        width: min(100%, 400px);
    }

    .ap-story__frame img {
        max-height: 400px;
    }

    .ap-journey__visual img {
        border-radius: 18px;
        aspect-ratio: 16 / 11;
    }

    .ap-eyebrow {
        font-size: 10px;
        letter-spacing: 0.2em;
    }

    html[lang="fa"] .ap-eyebrow,
    html[lang="fa"] .ap-hero__cta-label,
    html[lang="fa"] .ap-features__title,
    html[lang="fa"] .ap-values__title,
    html[lang="fa"] .ap-stats__label {
        letter-spacing: 0.04em;
        text-transform: none;
    }

    .ap-values__item,
    .ap-stats__item,
    .ap-features__item,
    .ap-timeline__step {
        opacity: 0.55;
        transform: translateY(18px);
        transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .ap-values__carousel .ap-values__item {
        opacity: 1;
        transform: none;
    }

    .ap-values__item.is-visible,
    .ap-stats__item.is-visible,
    .ap-features__item.is-visible,
    .ap-timeline__step.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .ap-banner {
        min-height: 300px;
        padding: 52px 0;
    }

    .ap-banner__title {
        font-size: clamp(26px, 7vw, 34px);
    }
}

@media (max-width: 480px) {
    .ap-wrap,
    .ap-hero__inner {
        width: min(1180px, calc(100% - 22px));
    }

    .page-about .ap {
        --ap-carousel-item: min(86vw, 260px);
    }

    .ap-story,
    .ap-journey,
    .ap-team,
    .ap-values,
    .ap-stats {
        padding: 48px 0;
    }

    .ap-story__visual {
        width: min(100%, 340px);
    }

    .ap-stats__grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ap-stats__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid rgba(176, 141, 87, 0.1);
    }

    .ap-stats__item:last-child {
        border-bottom: none;
    }

    .ap-banner {
        min-height: 260px;
        padding: 44px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-hero__bg,
    .ap-banner__bg {
        transform: none !important;
    }

    .page-about .ap-section::after {
        display: none;
    }

    .ap-values__item,
    .ap-stats__item,
    .ap-features__item,
    .ap-timeline__step,
    .ap-team__card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Bilingual — centered stack on responsive */
@media (max-width: 1024px) {
    html[lang="fa"] .ap-hero__content,
    html[lang="fa"] .ap-story__content,
    html[lang="fa"] .ap-journey__content,
    html[lang="fa"] .ap-team__intro,
    html[lang="fa"] .ap-body,
    html[lang="fa"] .ap-features__item,
    html[lang="fa"] .ap-values__item,
    html[lang="fa"] .ap-timeline__step,
    html[lang="fa"] .ap-stats__item,
    html[lang="fa"] .ap-team__card {
        text-align: center;
    }

    html[lang="fa"] .ap-heading--center {
        text-align: center;
    }

    html[lang="fa"] .ap-hero__cta {
        flex-direction: row;
        justify-content: center;
    }
}