/* ========================================
   FEATURED COLLECTION
======================================== */

.featured-collection {
    position: relative;

    background-image:
        linear-gradient(
            rgba(247, 238, 242, 0.68),
            rgba(247, 238, 242, 0.68)
        ),
        url("../assets/images/backgrounds/featured-bg.jpeg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-attachment: fixed;
}


/* ========================================
   SECTION HEADER
======================================== */

.featured-header {
    margin-bottom: 30px;
}

.featured-title {
    max-width: 800px;

    font-family: var(--font-heading);

    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 500;

    line-height: 0.9;

    letter-spacing: -0.04em;

    color: var(--primary);
}

.featured-title span {
    display: block;

    font-style: italic;

    color: var(--gold);
}


/* ========================================
   FEATURED SHOWCASE
======================================== */

.featured-showcase {
    display: grid;

    grid-template-columns: 1.25fr 0.75fr;

    align-items: center;

    gap: clamp(50px, 10vw, 150px);
}

/* ========================================
   FEATURED CARD HOVER POLISH
======================================== */

.featured-card {
    overflow: hidden;

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s ease;
}

.featured-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 60px rgba(43, 23, 32, 0.14);
}


/* Image container */

.featured-image {
    overflow: hidden;
}

.featured-image img {
    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-card:hover .featured-image img {
    transform: scale(1.07);
}


/* ========================================
   FEATURED IMAGE SLIDER
======================================== */

.featured-image-wrapper {
    position: relative;

    height: 450px;

    overflow: hidden;

    border-radius: 4px;
}

.featured-slider {
    position: relative;

    width: 100%;
    height: 100%;
}

.featured-slide {
    position: absolute;
    inset: 0;

    opacity: 0;

    transform: scale(1.05);

    transition:
        opacity 1s ease,
        transform 6s ease;

    pointer-events: none;
}

.featured-slide.active {
    opacity: 1;

    transform: scale(1);

    pointer-events: auto;
}

.featured-slide img {
    width: 100%;
    height: 100%;

    display: block;

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

/* ========================================
   SLIDER COUNTER
======================================== */

.featured-slider-counter {
    position: absolute;

    top: 25px;
    right: 25px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 14px;

    background: rgba(43, 23, 32, 0.45);

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

    border: 1px solid rgba(255, 255, 255, 0.25);

    color: var(--white);

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.1em;
}

.counter-line {
    width: 28px;
    height: 1px;

    background: rgba(255, 255, 255, 0.6);
}


/* ========================================
   IMAGE TAG
======================================== */

.featured-image-tag {
    position: absolute;

    left: 25px;
    bottom: 25px;

    padding: 18px 22px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    background: rgba(247, 206, 224, 0.88);

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

    color: var(--primary);
}

.featured-image-tag span {
    font-size: 0.6rem;

    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    opacity: 0.7;
}

.featured-image-tag strong {
    font-family: var(--font-heading);

    font-size: 1.35rem;
    font-weight: 500;
}


/* ========================================
   FEATURED CONTENT
======================================== */

.featured-content {
    max-width: 470px;
    transition: transform 0.4s ease;
}

.featured-number {
    display: block;

    margin-bottom: 25px;

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.18em;

    color: var(--gold);
}

.featured-content h3 {
    margin-bottom: 25px;

    font-family: var(--font-heading);

    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 500;

    line-height: 0.95;

    letter-spacing: -0.04em;

    color: var(--primary);
}

.featured-content h3 span {
    display: block;

    font-style: italic;
}

.featured-content p {
    margin-bottom: 35px;

    font-size: 0.95rem;

    line-height: 1.9;

    color: var(--text-light);
}

.featured-card:hover .featured-content {
    transform: translateY(-5px);
}