/* =========================
   TAG
========================= */
.c-tag {
    font-family: var(--tag-font, var(--font-body));
    color: var(--color-tag);
}

/* =========================
   PROMO
========================= */
.c-promo--elle-latest .c-promo__title {
    font-weight: var(--font-weight-display);
    font-size: var(--font-size-20);
}

/* =========================
   PROMO LINK
========================= */
.c-promo--link-small .c-promo__title {
    color: var(--color-text);
}

/* =========================
   ELLE HOME / HERO
========================= */

.c-promo--elle-home-hero .c-promo__media {
    margin-bottom: var(--space-16);
}

.c-promo--elle-home-hero .c-promo__image {
    display: block;
    width: 100%;
    height: auto;
}

.c-promo--elle-home-hero .c-promo__title {
    font-weight: 500;
    margin: 0;
}

.c-promo--elle-home-hero .c-promo__title a {
    color: inherit;
    text-decoration: none;
}

.c-promo--elle-home-hero .c-promo__excerpt {
    margin-top: var(--space-12);
    color: var(--color-muted);
}


/* =========================
   ELLE HOME / LATEST RAIL
========================= */

.c-elle-home-rail__title {
    margin: 0 0 var(--space-16);
    padding-block: var(--space-4);
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--font-size-12);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.c-elle-home-rail__list {
    display: grid;
}

.c-promo--elle-latest {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--space-12);
    padding-block: var(--space-12);
    border-bottom: 1px solid var(--color-border-soft);
}

.c-promo--elle-latest .c-promo__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.c-promo--elle-latest .c-promo__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-20);
    line-height: 1.2;
}

.c-promo--elle-latest .c-promo__title a {
    color: inherit;
    text-decoration: none;
}


/* =========================
   ELLE HOME / TOP
========================= */

.c-elle-home-top {
    margin-top: var(--space-48);
}

.c-elle-home-top__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.c-elle-home-top__viewport::-webkit-scrollbar {
    display: none;
}

.c-elle-home-top__track {
    display: flex;
    align-items: flex-start;
    gap: var(--space-24);
}

.c-elle-home-top__track>.c-promo--list {
    flex: 0 0 82%;
    scroll-snap-align: start;
}

@media (min-width: 1024px) {
    .c-elle-home-top__viewport {
        overflow: visible;
        scroll-snap-type: none;
    }

    .c-elle-home-top__track {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: start;
        gap: var(--space-24);
    }

    .c-elle-home-top__track>.c-promo--list {
        flex: initial;
        scroll-snap-align: none;
    }
}

/* =========================
   ELLE HOME / TITLE
========================= */

.c-elle-home-section-heading {
    margin-bottom: var(--elle-home-section-heading-gap);
}

.c-elle-home-section-heading__title {
    display: inline-flex;
    align-items: baseline;
    gap: var(--elle-home-section-title-plus-gap);

    margin: 0;
    font-family: var(--elle-home-section-title-font);
    font-size: var(--elle-home-section-title-size);
    font-weight: var(--elle-home-section-title-weight);
    line-height: var(--elle-home-section-title-line-height);
    letter-spacing: var(--elle-home-section-title-tracking);
    text-transform: var(--elle-home-section-title-transform);
    color: var(--elle-home-section-title-color);
}

.c-elle-home-section-heading__title::before {
    content: "+";
    color: var(--elle-home-section-title-plus-color);
}


/* =========================
   TOP LIST
========================= */
.c-promo--list .c-promo__title {
  font-weight: var(--font-weight-display);
}

/* =========================
   PROMO BASIC 
========================= */

.c-promo--basic .c-promo__title {
  font-weight: var(--font-weight-display);
}

/* =========================
   PROMO LARGE 
========================= */
.c-promo--large .c-promo__title {
    font-weight: var(--font-weight-medium);
}

.c-promo--large .c-promo__excerpt {
    line-height: var(--lh-meta);
}

/* =========================
   PROMO SQUARE SPLIT 
========================= */

.c-promo--square-split .t-title {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-2xl);
}

.c-promo--square-split .c-promo__excerpt {
    line-height: var(--lh-meta);
}

/* =========================
   PROMO LANDSCAPE SPLIT 
========================= */

.c-promo--landscape-split .c-promo__title {
  font-weight: var(--font-weight-medium);
}

.c-promo--landscape-split .c-promo__excerpt {
    line-height: var(--lh-meta);
}

/* =========================
   SLIDER TRACK 
========================= */

.c-elle-home-slider__track .c-promo__title {
    font-weight: var(--font-weight-medium);
}

/* =========================
   HOME ADS
========================= */

.c-home-ad {
    margin-block: var(--space-40);
}

.c-home-ad .c-ad {
    margin-block: 0;
}

.c-home-ad--after-top {
    margin-block: var(--space-40) var(--space-48);
}

.c-ad--home-after-top .c-ad__inner {
    min-height: 120px;
}

/* =========================
   ELLE HOME / SLIDER
========================= */

.c-elle-home-slider {
    margin-top: var(--space-48);
}

.c-elle-home-slider__body {
    position: relative;
}

.c-elle-home-slider__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.c-elle-home-slider__viewport::-webkit-scrollbar {
    display: none;
}

.c-elle-home-slider__track {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
}

.c-elle-home-slider__track>.c-promo {
    flex: 0 0 82%;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .c-elle-home-slider__track>.c-promo {
        flex-basis: calc((100% - (var(--space-16) * 2)) / 3);
    }
}

.c-elle-home-slider__button {
    display: none;
}

@media (min-width: 1024px) {
    .c-elle-home-slider__button {
        position: absolute;
        top: 50%;
        z-index: 3;

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

        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-text);
        font-family: var(--font-body);
        font-size: var(--font-size-40);
        line-height: 1;
        cursor: pointer;

        transform: translateY(-50%);
    }

    .c-elle-home-slider__button--prev {
        left: -20px;
        transform: translate(-50%, -50%);
    }

    .c-elle-home-slider__button--next {
        right: -20px;
        transform: translate(50%, -50%);
    }

    .skin-elle .c-elle-home-slider__button,
    .skin-elle .c-elle-home-slider__button:hover,
    .skin-elle .c-elle-home-slider__button:active,
    .skin-elle .c-elle-home-slider__button:focus {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        background: transparent;
        background-color: transparent;
        color: var(--color-text);
        box-shadow: none;
        outline: none;
    }

    .skin-elle .c-elle-home-slider__button:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }

    .skin-elle .c-elle-home-slider__button:focus-visible {
        outline: 1px solid var(--color-accent);
        outline-offset: 4px;
    }

    .c-elle-home-slider__button[disabled] {
        opacity: .25;
        cursor: default;
        pointer-events: none;
    }
}