/**
 * Responsive — desktop >= 1280 | tablet 768-1279 | mobile <= 767
 */

/* Tablet */
@media (max-width: 1279px) {
    .destinations__grid {
        height: 90vh;
        min-height: 480px;
        grid-template-columns: repeat(2, 1fr);
    }

    .dest-card__content {
        padding: var(--space-lg) var(--space-xl);
    }

    .dest-card__headline-block {
        max-width: 45%;
    }

    .philosophy__scene {
        min-height: 148vh;
        padding: 50vh var(--space-xl) 0.8vh;
    }

    .philosophy__text {
        font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    }

    .philosophy-slot--landscape-lg {
        width: clamp(240px, 25vw, 320px);
        height: clamp(165px, 18vw, 220px);
    }

    .philosophy-slot--portrait-md,
    .philosophy-slot--portrait-tall,
    .philosophy-slot--portrait-framing {
        width: clamp(170px, 16vw, 240px);
        height: clamp(230px, 24vw, 320px);
    }

    .philosophy-slot--landscape-sm {
        width: clamp(150px, 16vw, 220px);
        height: clamp(100px, 10vw, 150px);
    }

    .philosophy-slot--square-sm {
        width: clamp(120px, 12vw, 170px);
        height: clamp(120px, 12vw, 170px);
    }

    .philosophy-slot--portrait-xs {
        width: clamp(100px, 10vw, 140px);
        height: clamp(130px, 14vw, 190px);
    }

    .philosophy-slot--hero-large { width: min(46vw, 420px); height: min(32vw, 280px); }
    .philosophy-slot--large { width: min(34vw, 320px); height: min(24vw, 210px); }
    .philosophy-slot--medium { width: min(24vw, 240px); height: min(17vw, 160px); }
    .philosophy-slot--support { width: min(18vw, 180px); height: min(13vw, 120px); }
    .philosophy-slot--small { width: min(14vw, 130px); height: min(10vw, 95px); }
    .philosophy-slot--accent { width: min(12vw, 110px); height: min(10vw, 90px); }

    .hero-panel-wrapper .destinations {
        border-radius: 0;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .container,
    .container--narrow {
        padding-inline: var(--space-lg);
    }

    .hero__overlay {
        padding: var(--space-lg);
    }

    .hero__logo {
        margin-bottom: var(--space-xl);
    }

    .heading-display--hero {
        font-size: clamp(1.875rem, 10vw, 2.5rem);
    }

    .hero__meta {
        bottom: var(--space-xl);
    }

    .hero__nav-btn {
        width: 40px;
        height: 40px;
    }

    .hero__nav-btn--prev {
        left: var(--space-md);
    }

    .hero__nav-btn--next {
        right: var(--space-md);
    }

    .hero__nav-btn svg {
        width: 14px;
        height: 14px;
    }

    .destinations__grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(50vh, auto));
        height: auto;
        min-height: auto;
        gap: 1px;
    }

    .dest-card {
        min-height: 50vh;
    }

    .dest-card__content {
        padding: var(--space-xl) var(--space-lg);
    }

    .dest-card__top {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .dest-card__headline-block {
        max-width: 100%;
    }

    .dest-card__headline {
        text-align: left;
    }

    .dest-card__desc {
        max-width: none;
    }

    .philosophy__scene {
        min-height: 142vh;
        padding: 50vh var(--space-lg) 0.6vh;
    }

    .philosophy__text {
        font-size: clamp(1.1rem, 4.5vw, 1.3rem);
    }

    .philosophy-slot--landscape-lg {
        width: clamp(220px, 55vw, 300px);
        height: clamp(150px, 38vw, 200px);
    }

    .philosophy-slot--landscape-md,
    .philosophy-slot--portrait-wide {
        width: clamp(200px, 48vw, 260px);
        height: clamp(130px, 32vw, 180px);
    }

    .philosophy-slot--portrait-md,
    .philosophy-slot--portrait-tall,
    .philosophy-slot--portrait-framing {
        width: clamp(160px, 42vw, 220px);
        height: clamp(220px, 55vw, 300px);
    }

    .philosophy-slot--square-md {
        width: clamp(180px, 45vw, 240px);
        height: clamp(180px, 45vw, 240px);
    }

    .philosophy-slot--portrait-sm {
        width: clamp(140px, 38vw, 200px);
        height: clamp(180px, 48vw, 260px);
    }

    .philosophy-slot--accent-sm {
        width: clamp(120px, 32vw, 180px);
        height: clamp(150px, 40vw, 220px);
    }

    .philosophy-slot--landscape-sm {
        width: clamp(140px, 35vw, 200px);
        height: clamp(90px, 22vw, 140px);
    }

    .philosophy-slot--square-sm {
        width: clamp(110px, 28vw, 160px);
        height: clamp(110px, 28vw, 160px);
    }

    .philosophy-slot--portrait-xs {
        width: clamp(90px, 24vw, 130px);
        height: clamp(120px, 32vw, 180px);
    }

    /* Mobile: padat & mewah — hero-large 46–68vw, large 30–46vw, medium 22–34vw */
    .philosophy-slot--hero-large { width: min(68vw, 400px); height: min(48vw, 280px); }
    .philosophy-slot--large { width: min(46vw, 320px); height: min(38vw, 220px); }
    .philosophy-slot--medium { width: min(34vw, 240px); height: min(28vw, 170px); }
    .philosophy-slot--support { width: min(24vw, 180px); height: min(18vw, 130px); }
    .philosophy-slot--small { width: min(26vw, 160px); height: min(20vw, 120px); }
    .philosophy-slot--accent { width: min(18vw, 120px); height: min(14vw, 95px); }

    .brand-break {
        padding: var(--space-4xl) var(--space-lg);
    }

    .site-footer {
        padding: var(--space-4xl) var(--space-lg) var(--space-2xl);
    }

    .footer__links {
        gap: var(--space-md) var(--space-xl);
    }

    .footer__social,
    .footer__lang {
        margin-bottom: var(--space-xl);
    }

    .dest-card:active .dest-card__img {
        transform: scale(0.99);
    }

    .hero-panel-wrapper .destinations {
        border-radius: 0;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .heading-display--hero {
        font-size: 1.75rem;
    }

    .hero__meta-index,
    .hero__meta-caption {
        font-size: 0.625rem;
    }
}