/* =====================================================
   TABLET / COMPACT DESKTOP
===================================================== */

@media (max-width: 1100px) {

    :root {
        --page-padding: 34px;
    }

    /* NAV */

    .navbar {
        height: 92px;
    }

    .navbar__nav {
        min-width: 470px;
        gap: 22px;
        padding: 12px 22px;
    }

    .navbar__nav a {
        font-size: 0.68rem;
    }


    /* HERO 01 */

    .hero-copy {
        left: 50%;
        right: auto;

        top: 27%;
        bottom: auto;

        width: calc(100% - 72px);
        max-width: 680px;

        text-align: center;

        transform: translateX(-50%);
    }

    .hero-copy__title {
        font-size: clamp(3.8rem, 8vw, 5.4rem);
    }

    .hero-side-copy {
        left: 50%;
        right: auto;

        top: 62%;
        bottom: auto;

        width: min(500px, calc(100% - 80px));

        text-align: center;

        transform: translateX(-50%);
    }

    .hero-side-note {
        top: 108px;
        right: 34px;

        transform: none;
    }


    /* HERO 02 */

    .vineyard-card {
        left: 34px;
        right: auto;

        width: min(390px, 42vw);
    }

    .hero-chapter__intro {
        left: auto;
        right: 34px;

        width: min(460px, 45vw);
    }


    /* HERO 03 */

    .cellar-story {
        width: min(760px, calc(100% - 80px));
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 900px) {

    :root {
        --page-padding: 20px;
    }

    /* =========================
   MOBILE BASE
========================= */

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        position: relative;
    }


    /* =========================
   HERO VIEWPORT
========================= */

    .hero-journey {
        width: 100%;
        height: 600vh;
    }

    .hero-journey__sticky {
        position: sticky;
        top: 0;

        width: 100%;
        height: 100vh;
        height: 100dvh;

        overflow: hidden;
        background: #15110d;
    }

    .hero-scene {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;
    }

    .hero-scene__image {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    /* =========================
   MOBILE NAVBAR
========================= */

    .navbar {
        position: fixed;

        top: 0;
        left: 0;

        width: 100%;
        height: 74px;

        padding: 0;

        display: block;

        z-index: 1200;
    }


    /* LOGO */

    .navbar__logo {
        position: absolute;

        left: 18px;
        top: 24px;

        z-index: 1202;

        font-size: 1.18rem;
        letter-spacing: 0.08em;
    }


    /* HIDE DESKTOP META */

    .navbar__meta {
        display: none;
    }


    /* HAMBURGER */

    .navbar__menu {
        position: absolute;

        top: 15px;
        right: 14px;

        width: 44px;
        height: 44px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 7px;

        z-index: 1202;
    }

    .navbar__menu span {
        display: block;

        width: 24px;
        height: 1px;

        background: currentColor;

        transform-origin: center;

        transition:
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.3s ease;
    }

    .navbar.is-open .navbar__menu span:first-child {
        transform: translateY(4px) rotate(45deg);
    }

    .navbar.is-open .navbar__menu span:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }


    /* =========================
   FULLSCREEN MOBILE MENU
========================= */

    .navbar__nav {
        position: fixed;
        inset: 0;

        width: 100%;
        height: 100dvh;

        min-width: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 90px 24px 50px;

        border: none;
        border-radius: 0;

        background: rgba(29, 16, 14, 0.97);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        box-shadow: none;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform: none;

        z-index: 1201;

        transition:
            opacity 0.4s ease,
            visibility 0.4s ease;
    }

    .navbar__nav a {
        font-family: var(--font-serif);

        font-size: 2rem;
        font-weight: 400;

        letter-spacing: 0.01em;
        text-transform: none;

        color: var(--color-white);
    }

    .navbar__nav a::after {
        display: none;
    }

    .navbar.is-open .navbar__nav {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;
    }

    body.menu-open {
        overflow: hidden;
    }

    /* =================================================
       HERO GENERAL
    ================================================= */

    .hero-journey {
        height: 600vh;
    }

    .hero-journey__sticky {
        height: 100vh;
        height: 100dvh;
    }

    .hero-scene {
        width: 100%;
        height: 100%;
    }

    .hero-scene__image {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center center;
    }


    /* =================================================
       SCENA 01
    ================================================= */

    .hero-copy {
        position: absolute;

        left: 50%;
        right: auto;

        top: 25%;
        bottom: auto;

        width: calc(100% - 40px);
        max-width: 500px;

        text-align: center;

        transform: translateX(-50%);
    }

    .hero-copy__eyebrow {
        margin-bottom: 10px;

        font-size: 0.56rem;
        letter-spacing: 0.14em;
    }

    .hero-copy__title {
        font-size: clamp(2.9rem, 11vw, 4.2rem);

        line-height: 1;
    }

    .hero-copy__text {
        margin-top: 12px;

        font-size: 0.9rem;
        line-height: 1.5;
    }


    /* CHAPTER COUNTER */

    .hero-side-note {
        position: absolute;

        top: 86px;
        left: 50%;
        right: auto;

        width: auto;
        max-width: 220px;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 4px;

        transform: translateX(-50%);

        text-align: center;

        opacity: 0.78;
    }

    .hero-side-note__number {
        font-family: var(--font-serif);

        font-size: 1.25rem;
        line-height: 1;

        margin-bottom: 3px;
    }

    .hero-side-note__text {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 2px;

        padding-top: 0;

        font-size: 0.43rem;
        line-height: 1.35;

        letter-spacing: 0.13em;
        text-transform: uppercase;
    }

    .hero-side-note::after {
        content: "";

        display: block;

        width: 30px;
        height: 1px;

        margin-top: 5px;

        background: rgba(247, 244, 237, 0.32);
    }


    /* POETIC COPY */

    .hero-side-copy {
        position: absolute;

        left: 50%;
        right: auto;

        top: 61%;
        bottom: auto;

        width: calc(100% - 52px);
        max-width: 360px;

        text-align: center;

        transform: translateX(-50%);
    }

    .hero-side-copy__text {
        font-size: 0.86rem;

        line-height: 1.55;
    }


    /* SCROLL CTA */

    .hero-progress {
        left: 50%;
        right: auto;

        bottom: 22px;

        width: calc(100% - 40px);

        gap: 6px;

        text-align: center;

        transform: translateX(-50%);
    }

    .hero-progress__label {
        font-size: 0.82rem;
    }

    .hero-progress__arrow {
        font-size: 1rem;
    }


    /* =================================================
       SCENA 02
    ================================================= */

    .hero-chapter--vineyard {
        width: 100%;

        overflow: hidden;
    }


    /* INFO CARD */

    .vineyard-card {
        left: 20px;
        right: 20px;

        top: 16%;

        width: auto;

        padding: 16px 18px;

        border-radius: 18px;

        transform: none;
    }

    .vineyard-card__index {
        margin-bottom: 12px;
        font-size: 0.5rem;
    }

    .vineyard-card__title,
    .vineyard-card__description {
        display: none;
    }

    .vineyard-card__details {
        margin-top: 0;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        /* VRATI ORIGINALNI GAP */
        gap: 14px 20px;

        border-top: none;
    }

    .vineyard-card__row {
        min-width: 0;

        padding: 0;

        display: flex;
        flex-direction: column;

        /* samo ovo mijenjamo */
        align-items: center;

        gap: 4px;

        border: none;

        text-align: center;
    }

    .vineyard-card__row span:first-child {
        width: 100%;

        font-size: 0.52rem;
        text-align: center;
    }

    .vineyard-card__row span:last-child {
        width: 100%;

        font-size: 0.76rem;
        text-align: center;
    }


    /* STORY */

    .hero-chapter__intro {
        left: 20px;
        right: 20px;

        top: 47%;

        width: auto;

        text-align: center;

        transform: none;
    }

    .hero-chapter__eyebrow {
        margin-bottom: 10px;

        font-size: 0.52rem;
    }

    .hero-chapter__title {
        font-size: clamp(2.25rem, 9vw, 3.15rem);

        line-height: 1.02;
    }

    .hero-chapter__story {
        max-width: 380px;

        margin:
            18px auto 0;

        gap: 10px;
    }

    .hero-chapter__story p {
        font-size: 0.8rem;

        line-height: 1.55;
    }


    /* =================================================
       SCENA 03
    ================================================= */

    .hero-chapter--cellar {
        width: 100%;

        padding:
            105px 20px 40px;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: hidden;

        box-sizing: border-box;
    }

    .cellar-story {
        width: 100%;
        max-width: 430px;

        margin: 0 auto;

        text-align: center;
    }

    .cellar-story__eyebrow {
        margin-bottom: 12px;

        font-size: 0.5rem;
    }

    .cellar-story__title {
        font-size: clamp(2.3rem, 9.5vw, 3.2rem);

        line-height: 1.02;
    }

    .cellar-story__body {
        width: 100%;
        max-width: 350px;

        margin:
            20px auto 0;

        gap: 10px;
    }

    .cellar-story__body p {
        font-size: 0.8rem;

        line-height: 1.55;
    }

    .cellar-details {
        width: 100%;
        max-width: 390px;

        margin:
            24px auto 0;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .cellar-details__item {
        min-width: 0;

        padding: 12px 5px;
    }

    .cellar-details__label {
        font-size: 0.43rem;
    }

    .cellar-details__value {
        font-size: clamp(0.72rem, 3vw, 0.88rem);
    }

    /* =========================================
   MOBILE PAGE CONTAINMENT
   sprječava desktop sekcije da prošire viewport
========================================= */

    html {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    main {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }


    /* svaka velika sekcija ostaje unutar viewporta */

    .hero-journey,
    .vineyard-section,
    .wines-section,
    .visit-section,
    .site-footer {
        width: 100%;
        max-width: 100vw;

        overflow-x: clip;
    }


    /* hero NE SMIJE ovisiti o širini nekog parenta */

    .hero-journey__sticky {
        width: 100vw;
        max-width: 100vw;

        height: 100vh;
        height: 100dvh;

        overflow: hidden;
    }


    /* svaka scena zauzima cijeli viewport */

    .hero-scene {
        position: absolute;
        inset: 0;

        width: 100vw;
        max-width: 100vw;

        height: 100%;
    }

    .hero-scene__image {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        display: block;
    }

    /* =====================================================
   CONTENT SECTIONS — MOBILE
===================================================== */


    /* ========================================
   VINOGRAD
======================================== */

    .vineyard-section {
        padding:
            82px 0 76px;
    }

    .vineyard-section__inner {
        width: calc(100% - 36px);
        max-width: 620px;

        margin: 0 auto;
    }

    .vineyard-section__section-label {
        margin-bottom: 54px;

        font-size: 1.05rem;
    }


    /* GLAVNI DIO */

    .vineyard-section__hero {
        display: flex;
        flex-direction: column;

        gap: 44px;
    }

    .vineyard-section__content {
        width: 100%;
        max-width: 520px;

        margin: 0 auto;

        text-align: center;
    }

    .vineyard-section__title {
        font-size: clamp(2.8rem, 11vw, 4.4rem);

        line-height: 0.98;
    }

    .vineyard-section__lead {
        max-width: 460px;

        margin:
            22px auto 0;

        font-size: 0.92rem;
        line-height: 1.7;
    }


    /* BUTTONS */

    .vineyard-section__actions {
        margin-top: 28px;

        display: flex;
        justify-content: center;

        gap: 12px;
    }

    .vineyard-section__button {
        min-width: 0;

        padding:
            13px 18px;

        font-size: 0.66rem;
    }


    /* IMAGE */

    .vineyard-section__media {
        width: 100%;

        margin: 0 auto;
    }

    .vineyard-section__image {
        width: 100%;
        height: clamp(300px, 95vw, 460px);

        object-fit: cover;
    }

    .vineyard-section__caption {
        margin-top: 10px;

        font-size: 0.5rem;
        line-height: 1.5;

        text-align: center;
    }


    /* STORY */

    .vineyard-section__story {
        width: 100%;

        margin:
            64px auto 0;

        display: flex;
        flex-direction: column;

        gap: 24px;

        text-align: center;
    }

    .vineyard-section__story-lead p {
        max-width: 430px;

        margin: 0 auto;

        font-size: clamp(1.8rem, 7vw, 2.5rem);
        line-height: 1.18;
    }

    .vineyard-section__story-text {
        max-width: 460px;

        margin: 0 auto;

        gap: 16px;
    }

    .vineyard-section__story-text p {
        font-size: 0.88rem;
        line-height: 1.72;
    }


    /* BOTTOM WORDS */

    .vineyard-section__footer {
        margin-top: 58px;

        grid-template-columns:
            repeat(2, 1fr);
    }

    .vineyard-section__footer span {
        padding: 14px 8px;

        font-size: 0.52rem;
    }

    .vineyard-section__footer span:nth-child(2) {
        border-right: none;
    }

    .vineyard-section__footer span:nth-child(-n + 2) {
        border-bottom:
            1px solid rgba(23, 20, 17, 0.14);
    }



    /* ========================================
   VINA
======================================== */

    .wines-section {
        padding:
            82px 0 90px;
    }

    .wines-section__inner {
        width: calc(100% - 36px);
        max-width: 620px;

        margin: 0 auto;
    }

    .wines-section__section-label {
        margin-bottom: 55px;

        font-size: 1.05rem;
    }


    .wines-section__header {
        gap: 24px;

        margin-bottom: 65px;
    }

    .wines-section__title {
        max-width: 520px;

        font-size: clamp(2.8rem, 11vw, 4.2rem);

        line-height: 0.98;
    }

    .wines-section__intro {
        max-width: 440px;

        font-size: 0.9rem;
        line-height: 1.7;
    }


    /* VINA JEDNO ISPOD DRUGOG */

    .wines-section__grid {
        display: flex;
        flex-direction: column;

        gap: 78px;
    }

    .wine-card {
        width: 100%;
        max-width: 420px;

        margin: 0 auto;
    }

    .wine-card__visual {
        height: clamp(390px, 110vw, 520px);

        margin-bottom: 12px;
    }

    .wine-card__image {
        max-width: 88%;
        height: 100%;
    }

    .wine-card__name {
        font-size: clamp(2rem, 8vw, 2.7rem);
    }

    .wine-card__type {
        font-size: 0.74rem;
    }

    .wine-card__link {
        margin-top: 18px;

        font-size: 0.62rem;
    }



    /* ========================================
   POSJETI NAS
======================================== */

    .visit-section {
        padding:
            76px 0 70px;
    }

    .visit-section__inner {
        width: calc(100% - 36px);
        max-width: 620px;

        margin: 0 auto;
    }

    .visit-section__section-label {
        margin-bottom: 52px;

        font-size: 1.05rem;
    }


    /* INFO */

    .visit-info {
        display: flex;
        flex-direction: column;

        gap: 0;

        padding-bottom: 0;
    }

    .visit-info__item {
        width: 100%;

        flex-direction: column;
        align-items: center;

        text-align: center;

        padding:
            18px 0;

        gap: 16px;

        border-bottom:
            1px solid rgba(239, 230, 213, 0.14);
    }

    .visit-info__content {
        align-items: center;
        text-align: center;
    }

    .visit-info__icon {
        width: 42px;
        height: 42px;

        flex: 0 0 42px;
    }

    .visit-info__icon svg {
        width: 18px;
        height: 18px;
    }

    .visit-info__content strong,
    .visit-info__content a {
        font-size: 1.05rem;
    }


    /* SOCIAL */

    .visit-socials {
        margin-top: 24px;

        justify-content: center;
        text-align: center;
    }


    /* NEWSLETTER */

    .visit-newsletter {
        margin-top: 42px;

        padding:
            28px 22px;

        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 28px;

        border-radius: 18px;

        text-align: center;
    }

    .visit-newsletter h3 {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    .visit-newsletter p {
        max-width: 340px;

        margin:
            10px auto 0;

        line-height: 1.6;
    }

    .newsletter-form {
        width: 100%;
    }


    /* ========================================
   FOOTER
======================================== */

    .site-footer {
        padding:
            36px 0;
    }

    .site-footer__inner {
        width: calc(100% - 36px);

        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 24px;

        text-align: center;
    }

    .site-footer__brand {
        font-size: 1.2rem;
    }

    .site-footer__nav {
        display: flex;
        flex-wrap: wrap;

        justify-content: center;

        gap:
            12px 20px;
    }

    .site-footer__nav a {
        font-size: 0.62rem;
    }

    .site-footer__meta {
        justify-self: auto;

        align-items: center;

        text-align: center;
    }

    /* ========================================
   WINE DETAIL — MOBILE
======================================== */

    body.wine-detail-lock {
        overflow: hidden !important;
        touch-action: none;
    }

    body.wine-detail-lock .wine-detail {
        touch-action: pan-y;
    }

    .wine-detail {
        position: fixed;

        inset: 0;

        width: 100%;
        max-width: 100%;

        height: 100vh;
        height: 100dvh;

        min-height: 0;

        padding:
            90px 18px 70px;

        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        background: #341015;

        z-index: 1000;

        scrollbar-width: none;
    }

    .wine-detail::-webkit-scrollbar {
        display: none;
    }

    .wine-detail__back {
        margin:
            0 0 34px;

        padding:
            11px 16px;

        font-size: 0.68rem;
    }


    /* DESKTOP GRID -> MOBILE STACK */

    .wine-detail__layout {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 32px;

        min-height: 0;
    }


    /* BOCA */

    .wine-detail__visual {
        width: 100%;
        height: 430px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wine-detail__image {
        width: auto;
        height: 92%;
        max-width: 78%;

        object-fit: contain;
    }


    /* CONTENT */

    .wine-detail__content {
        width: 100%;
        max-width: 520px;

        margin: 0 auto;

        text-align: center;
    }

    .wine-detail__year {
        font-size: 0.62rem;
        letter-spacing: 0.16em;
    }

    .wine-detail__name {
        margin-top: 8px;

        font-size: clamp(2.8rem, 12vw, 4rem);

        line-height: 1;
    }

    .wine-detail__type {
        margin-top: 8px;

        font-size: 0.85rem;
    }


    /* STORY */

    .wine-detail__story {
        max-width: 430px;

        margin:
            26px auto 0;
    }

    .wine-detail__story p {
        font-size: 0.9rem;
        line-height: 1.7;
    }


    /* SPECS */

    .wine-detail__specs {
        margin-top: 34px;

        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0;
    }

    .wine-spec {
        min-width: 0;

        padding:
            17px 10px;

        text-align: left;
    }


    /* NOTES */

    .wine-detail__notes {
        margin-top: 32px;

        text-align: center;
    }

    .wine-detail__notes-list {
        justify-content: center;
    }


    /* CTA */

    .wine-detail__cta {
        margin-top: 34px;
    }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 520px) {

    .navbar {
        padding:
            0 14px;
    }

    .hero-copy {
        top: 23%;
    }

    .hero-copy__title {
        font-size: clamp(2.6rem, 12.5vw, 3.5rem);
    }

    .hero-side-note {
        top: 80px;
        right: 14px;
    }

    .hero-side-copy {
        top: 60%;
    }

    .hero-progress {
        bottom: 18px;
    }


    .vineyard-card {
        left: 14px;
        right: 14px;
    }

    .hero-chapter__intro {
        left: 16px;
        right: 16px;
    }

    .hero-chapter__title {
        font-size: clamp(2.1rem, 9.8vw, 2.75rem);
    }


    .cellar-story__title {
        font-size: clamp(2.15rem, 10vw, 2.85rem);
    }
}


/* =====================================================
   SHORT PHONE
===================================================== */

@media (max-width: 520px) and (max-height: 700px) {

    .hero-copy {
        top: 19%;
    }

    .hero-side-copy {
        top: 57%;
    }

    .hero-progress {
        bottom: 10px;
    }

    .vineyard-card {
        top: 24%;
    }

    .hero-chapter__intro {
        top: 44%;
    }

    .hero-chapter__story p {
        font-size: 0.74rem;
    }

    .cellar-story__title {
        font-size: 2.15rem;
    }

    .cellar-story__body p {
        font-size: 0.74rem;
    }

    /* ========================================
   CONTENT — SMALL MOBILE
======================================== */

    .vineyard-section__inner,
    .wines-section__inner,
    .visit-section__inner,
    .site-footer__inner {
        width: calc(100% - 28px);
    }


    /* VINOGRAD */

    .vineyard-section__title {
        font-size: clamp(2.55rem, 12vw, 3.4rem);
    }

    .vineyard-section__actions {
        flex-direction: column;

        width: 100%;
    }

    .vineyard-section__button {
        width: 100%;
    }

    .vineyard-section__image {
        height: 360px;
    }


    /* VINA */

    .wines-section__title {
        font-size: clamp(2.55rem, 12vw, 3.5rem);
    }

    .wine-card__visual {
        height: 420px;
    }


    /* KONTAKT */

    .visit-socials {
        justify-content: center;
    }

    .visit-newsletter {
        padding:
            26px 18px;
    }

    .visit-newsletter h3 {
        font-size: 1.9rem;
    }


    /* FOOTER */

    .site-footer__nav {
        max-width: 280px;
    }

    @media (max-width: 520px) {

        .wine-detail {
            padding-top: 84px;
        }

        .wine-detail__visual {
            height: 380px;
        }

        .wine-detail__image {
            height: 94%;
            max-width: 84%;
        }

        .wine-detail__name {
            font-size: 3rem;
        }

        .wine-detail__story p {
            font-size: 0.86rem;
        }

        .wine-spec {
            padding:
                15px 8px;
        }

    }
}