/* ============================================
   Vinuri (Wines) Page
   Black background, wine bottle cards, 2-col tabs
   ============================================ */

/* ── Hero Section ── */
.vinuri-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vinuri-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.vinuri-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vinuri-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.45);
}
.vinuri-hero__overlay {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    padding: 0 60px;
}
.vinuri-hero__gif {
    display: flex;
    align-items: center;
    justify-content: center;
}
.vinuri-hero__gif img {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
}
.vinuri-hero__text {
    text-align: left;
    padding-left: 40px;
}
.vinuri-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 700;
    font-style: italic;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 0;
    line-height: 1.1;
}
.vinuri-hero__description {
    font-family: var(--font-primary);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-top: 20px;
}

/* ── Tab Navigation (2-col grid) ── */
.vinuri-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 0 0;
}
.vinuri-tabs__item {
    height: 232px;
    border: 1px solid var(--color-white);
    cursor: pointer;
}
.vinuri-tabs__item:nth-child(odd) {
    border-right: none;
}
/* Orphan last item: when the total tab count is odd, the last item sits
   alone in the left column with nothing to close its right edge. Restore
   the right border so the grid stays closed (mirrors the wine-category
   :last-child rule). */
.vinuri-tabs__item:last-child:nth-child(odd) {
    border-right: 1px solid var(--color-white);
}
.vinuri-tabs__item:nth-child(n+3) {
    border-top: none;
}
/* Empty filler cell for an odd tab count — bordered like a real cell so the
   last row's right side closes, but inert (no pill, no pointer). */
.vinuri-tabs__item--spacer {
    cursor: default;
}
.vinuri-tabs__pill {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 116px;
    transition: all 0.3s ease;
    padding: 10px 30px;
}
.vinuri-tabs__pill--active {
    background-color: var(--color-white);
    color: var(--color-black);
}
.vinuri-tabs__item:hover .vinuri-tabs__pill:not(.vinuri-tabs__pill--active) {
    color: var(--color-gold-light);
}
.vinuri-tabs__label {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, calc(30px + 25 * (100vw / 1308)), 55px);
    font-weight: 400;
    text-transform: uppercase;
}

/* ── Wine Category Cards Grid (4-col) ── */
.vinuri-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 0;
}

.wine-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 730px;
    border: 1px solid var(--color-white);
    border-right: none;
    border-bottom: none;
    padding: 0 15px 20px;
    transition: all 0.3s ease;
}
.wine-category-card:nth-child(-n+4) {
    border-top: none;
}
.wine-category-card:nth-child(4n) {
    border-right: 1px solid var(--color-white);
}
.wine-category-card:nth-last-child(-n+4) {
    border-bottom: 1px solid var(--color-white);
}
/* Last card always closes its right side, even when total isn't a multiple of 4. */
.wine-category-card:last-child {
    border-right: 1px solid var(--color-white);
}

.wine-category-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 199px;
    padding: 30px 0;
}
.wine-category-card__image img {
    max-height: 508px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.wine-category-card:hover .wine-category-card__image img {
    transform: scale(1.05);
}

.wine-category-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.wine-category-card__name {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-white);
    margin-top: 10px;
    margin-bottom: 20px;
}

.wine-category-card__link {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 45px;
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--color-black);
    text-align: center;
    transition: all 0.3s ease;
}
.wine-category-card:hover .wine-category-card__link {
    background-color: transparent;
    color: var(--color-white);
}

/* ── Promotions Product Grid (4-col) ── */
.vinuri-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-bottom: 60px;
}

.vinuri-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-white);
    transition: border-color 0.3s ease;
    overflow: hidden;
}
.vinuri-product-card:hover {
    border-color: var(--color-white);
    color: var(--color-white);
}

.vinuri-product-card.is-sold-out {
    pointer-events: none;
}
.vinuri-product-card.is-sold-out .vinuri-product-card__image,
.vinuri-product-card.is-sold-out .vinuri-product-card__name,
.vinuri-product-card.is-sold-out .vinuri-product-card__prices {
    opacity: 0.45;
    filter: grayscale(0.6);
    transition: opacity 0.3s ease;
}

/* ── Star badge — yellow 12-point star with text centered ─────
   Star SVG sits as a ::before background, text rendered on top in the badge box. */
.vinuri-product-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-black);
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    line-height: 1.05;
    padding: 0;
    border: 0;
    z-index: 2;
    pointer-events: none;
}
.vinuri-product-card__badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../svg/badge-star.svg") center / contain no-repeat;
    z-index: -1;
}

/* Sold-out variant — same star, smaller stacked text. */
.vinuri-product-card__badge--sold-out {
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    width: 96px;
    height: 96px;
    line-height: 1.15;
    padding: 0 18px;
}

.vinuri-product-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    min-height: 280px;
    background-color: var(--color-black);
}
.vinuri-product-card__image img {
    max-height: 240px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.vinuri-product-card:hover .vinuri-product-card__image img {
    transform: scale(1.05);
}

.vinuri-product-card__name {
    font-family: var(--font-primary);
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-white);
    text-align: center;
    padding: 15px 10px 10px;
}

.vinuri-product-card__prices {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 10px 20px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
}
.vinuri-product-card__price {
    color: var(--color-white);
    font-weight: 600;
}
.vinuri-product-card__price--old {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: line-through;
    font-size: 0.8rem;
}
.vinuri-product-card__price--sale {
    color: #e74c3c;
    font-weight: 700;
}

/* ── Empty state ── */
.vinuri-empty {
    text-align: center;
    padding: 80px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-primary);
    font-size: 1rem;
}

/* ── Page wrapper ── */
.page-vinuri {
    background-color: var(--color-black);
    min-height: 100vh;
    padding-bottom: 40px;
}

/* ── Transparent header (same as istorie) ── */
.page-template-page-vinuri .site-header {
    background-color: transparent;
}
.page-template-page-vinuri .site-header.scrolled {
    background-color: rgba(0, 0, 0, 0.95);
}

/* ============================================
   Responsive
   ============================================ */

/* ── Tablet landscape (≤1024px): 2-col cards ── */
@media (max-width: 1024px) {
    /* Hero */
    .vinuri-hero__overlay {
        padding: 0 40px;
    }
    .vinuri-hero__gif img {
        max-width: 300px;
    }

    /* Tabs */
    .vinuri-tabs__item {
        height: 180px;
    }
    .vinuri-tabs__pill {
        border-radius: 90px;
    }

    /* Cards: 2 columns */
    .vinuri-categories-grid,
    .vinuri-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wine-category-card {
        height: 550px;
    }
    .wine-category-card__image {
        width: 160px;
    }
    .wine-category-card__image img {
        max-height: 380px;
    }
    /* Reset 4-col border rules for 2-col */
    .wine-category-card:nth-child(4n) {
        border-right: none;
    }
    .wine-category-card:nth-child(-n+4) {
        border-top: 1px solid var(--color-white);
    }
    .wine-category-card:nth-child(-n+2) {
        border-top: none;
    }
    .wine-category-card:nth-child(2n) {
        border-right: 1px solid var(--color-white);
    }
    .wine-category-card:nth-child(odd) {
        border-right: none;
    }
    /* Last card right border (in case odd total) */
    .wine-category-card:last-child {
        border-right: 1px solid var(--color-white);
    }
    .wine-category-card__name {
        font-size: 1.1rem;
    }
    .wine-category-card__link {
        font-size: 1.1rem;
    }
}

/* ── Tablet portrait (≤768px): stacked hero ── */
@media (max-width: 768px) {
    /* Hero: stack vertically */
    .vinuri-hero {
        height: 80vh;
    }
    .vinuri-hero__overlay {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 24px;
    }
    .vinuri-hero__gif {
        justify-content: center;
    }
    .vinuri-hero__gif img {
        max-width: 220px;
    }
    .vinuri-hero__text {
        text-align: center;
        padding-left: 0;
    }

    /* Tabs */
    .vinuri-tabs__item {
        height: 140px;
    }
    .vinuri-tabs__pill {
        border-radius: 70px;
        padding: 10px 20px;
    }

    /* Cards */
    .wine-category-card {
        height: 460px;
        padding: 0 10px 15px;
    }
    .wine-category-card__image {
        width: 140px;
    }
    .wine-category-card__image img {
        max-height: 300px;
    }
    .wine-category-card__name {
        font-size: 1rem;
        margin-bottom: 14px;
    }
    .wine-category-card__link {
        font-size: 1rem;
        padding: 8px;
    }

    /* Promo cards */
    .vinuri-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vinuri-product-card__image {
        min-height: 200px;
        padding: 20px 15px;
    }
    .vinuri-product-card__image img {
        max-height: 170px;
    }
}

/* ── Mobile (≤480px): single-col tabs, 2-col cards ── */
@media (max-width: 480px) {
    /* Hero */
    .vinuri-hero {
        height: 70vh;
    }
    .vinuri-hero__gif img {
        max-width: 160px;
    }
    .vinuri-hero__title {
        font-size: 2rem;
        letter-spacing: 2px;
    }
    .vinuri-hero__description {
        font-size: 0.85rem;
        margin-top: 12px;
    }

    /* Tabs: single column */
    .vinuri-tabs {
        grid-template-columns: 1fr;
    }
    /* Single column → no empty slot to fill; hide the filler. */
    .vinuri-tabs__item--spacer {
        display: none;
    }
    .vinuri-tabs__item {
        height: 100px;
    }
    .vinuri-tabs__item:nth-child(odd) {
        border-right: 1px solid var(--color-white);
    }
    .vinuri-tabs__item:nth-child(n+3) {
        border-top: none;
    }
    .vinuri-tabs__item:nth-child(2) {
        border-top: none;
    }
    .vinuri-tabs__pill {
        border-radius: 50px;
        padding: 8px 15px;
    }
    .vinuri-tabs__label {
        font-size: 1.3rem;
    }

    /* Cards: 2 columns, compact */
    .wine-category-card {
        height: 360px;
        padding: 0 8px 12px;
    }
    .wine-category-card__image {
        width: 110px;
    }
    .wine-category-card__image img {
        max-height: 220px;
    }
    .wine-category-card__name {
        font-size: 0.8rem;
        margin-top: 8px;
        margin-bottom: 10px;
    }
    .wine-category-card__link {
        font-size: 0.75rem;
        padding: 8px;
        border-radius: 30px;
    }

    /* Promo cards */
    .vinuri-product-card__image {
        min-height: 160px;
        padding: 15px 10px;
    }
    .vinuri-product-card__image img {
        max-height: 140px;
    }
    .vinuri-product-card__name {
        font-size: 0.75rem;
    }
}

/* ── Small mobile (≤360px) ── */
@media (max-width: 360px) {
    .vinuri-hero {
        height: 60vh;
    }
    .vinuri-hero__gif img {
        max-width: 120px;
    }
    .vinuri-hero__title {
        font-size: 1.6rem;
    }
    .vinuri-hero__description {
        font-size: 0.8rem;
    }

    .vinuri-tabs__item {
        height: 80px;
    }
    .vinuri-tabs__label {
        font-size: 1rem;
    }

    .wine-category-card {
        height: 300px;
    }
    .wine-category-card__image {
        width: 90px;
    }
    .wine-category-card__image img {
        max-height: 180px;
    }
    .wine-category-card__name {
        font-size: 0.7rem;
    }
    .wine-category-card__link {
        font-size: 0.65rem;
        padding: 6px;
    }
}