/*
 * Eatwell101 Roundup V2 v0.3.0
 * Editorial exploration stream + ad-safe legacy anchors.
 */

.custom .ew-roundup-v2 {
    width: min(100%, 780px);
    max-width: 780px !important;
    margin: 58px auto 0 !important;
}

/* Keep recipe cards deliberately narrower than the full editorial rail.
 * This retains a useful scroll/ad cadence instead of turning every 2:3 image
 * into a near-full-screen desktop panel.
 */
.custom .ew-roundup-v2 .ew-roundup-item {
    width: min(100%, 640px);
    max-width: 640px;
    margin: 0 auto 64px;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.custom .ew-roundup-v2 .ew-roundup-item__media {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--ew-border-soft, #efeee9);
    line-height: 0;
}

.custom .ew-roundup-v2 .ew-roundup-item__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0 !important;
    object-fit: cover;
}

.custom .ew-roundup-v2 .ew-roundup-item__body {
    width: 100%;
    padding: 20px 2px 0;
}

.custom .ew-roundup-v2 .ew-roundup-item__position {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--ew-green, #183a2a);
}

.custom .ew-roundup-v2 .ew-roundup-item__of {
    color: var(--ew-soft, #8b8d87);
    font-weight: 500;
    letter-spacing: .04em;
}

.custom .ew-roundup-v2 .ew-roundup-item__title {
    margin: 0 0 10px !important;
    font-size: clamp(25px, 3.2vw, 32px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em;
    text-transform: none !important;
    font-weight: 700;
}

.custom .ew-roundup-v2 .ew-roundup-item__title a {
    color: var(--ew-ink, #242521) !important;
    border: 0 !important;
    text-decoration: none !important;
}

.custom .ew-roundup-v2 .ew-roundup-item__title a:hover {
    color: var(--ew-green, #183a2a) !important;
}

.custom .ew-roundup-v2 .ew-roundup-item__dek,
.custom .ew-roundup-v2 .ew-roundup-item__dek p {
    margin: 0;
    font-family: inherit !important;
    font-size: 17px !important;
    line-height: 1.58 !important;
    color: var(--ew-muted, #6f726c);
}

.custom .ew-roundup-v2 .ew-roundup-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ew-border-soft, #efeee9);
    font-size: 14px;
    line-height: 1.3;
}

.custom .ew-roundup-v2 .ew-roundup-item__time {
    color: var(--ew-muted, #6f726c);
}

.custom .ew-roundup-v2 .ew-roundup-item__view,
.custom .ew-roundup-v2 .ew-roundup-item__save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ew-ink, #242521) !important;
    text-decoration: none !important;
    font-weight: 650;
}

.custom .ew-roundup-v2 .ew-roundup-item__view:hover,
.custom .ew-roundup-v2 .ew-roundup-item__save:hover {
    color: var(--ew-green, #183a2a) !important;
}

.custom .ew-roundup-v2 .ew-roundup-item__save {
    margin-left: auto !important;
}

.custom .ew-roundup-v2 .ew-roundup-item__save.is-saved {
    color: var(--ew-green, #183a2a) !important;
}

/* Editorial chapter / soft break. Wider than a recipe item to create a real
 * change of rhythm without becoming a boxed module.
 */
.custom .ew-roundup-v2 .ew-roundup-section {
    width: min(100%, 720px);
    margin: 86px auto 40px;
    padding: 28px 0 0;
    border-top: 1px solid var(--ew-border, #deddd8);
}

.custom .ew-roundup-v2 .ew-roundup-section:first-child {
    margin-top: 0;
}

.custom .ew-roundup-v2 .ew-roundup-section__eyebrow {
    margin-bottom: 9px;
    color: var(--ew-green, #183a2a);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.custom .ew-roundup-v2 .ew-roundup-section__title {
    margin: 0 0 9px !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(31px, 4vw, 42px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em;
    text-transform: none !important;
    color: var(--ew-ink, #242521);
}

.custom .ew-roundup-v2 .ew-roundup-section__text {
    max-width: 620px;
    margin: 0 !important;
    color: var(--ew-muted, #6f726c) !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
}

/* ---------------------------------------------------------------
 * Advertising integration
 * ---------------------------------------------------------------
 * We intentionally do NOT create, remove, refresh, or renumber any ad slots.
 * Existing roundup ad logic can continue counting/inserting around the legacy
 * .recipesnippet anchors. These rules only give injected units clean editorial
 * breathing room and preserve viewability-friendly vertical separation.
 */
.custom .ew-roundup-v2 > .ad-slot,
.custom .ew-roundup-v2 > .adsenseright,
.custom .ew-roundup-v2 > [id^="gpt_unit_"],
.custom .ew-roundup-v2 .ad-slot,
.custom .ew-roundup-v2 .adsenseright {
    clear: both;
    margin-top: 48px !important;
    margin-bottom: 48px !important;
}

/* If an ad is injected immediately before a chapter heading, avoid stacking
 * two large whitespace systems while still keeping the ad isolated.
 */
.custom .ew-roundup-v2 > .ad-slot + .ew-roundup-section,
.custom .ew-roundup-v2 > .adsenseright + .ew-roundup-section,
.custom .ew-roundup-v2 > [id^="gpt_unit_"] + .ew-roundup-section {
    margin-top: 52px;
}

@media (max-width: 728px) {
    .custom .ew-roundup-v2 {
        width: 100%;
        margin-top: 42px !important;
    }

    .custom .ew-roundup-v2 .ew-roundup-item {
        width: 100%;
        margin-bottom: 48px;
    }

    .custom .ew-roundup-v2 .ew-roundup-item__body {
        padding: 16px 3px 0;
    }

    .custom .ew-roundup-v2 .ew-roundup-item__title {
        font-size: 25px !important;
        line-height: 1.14 !important;
    }

    .custom .ew-roundup-v2 .ew-roundup-item__dek,
    .custom .ew-roundup-v2 .ew-roundup-item__dek p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .custom .ew-roundup-v2 .ew-roundup-item__save {
        margin-left: 0 !important;
    }

    .custom .ew-roundup-v2 .ew-roundup-section {
        width: 100%;
        margin-top: 66px;
        margin-bottom: 30px;
        padding-top: 22px;
    }

    .custom .ew-roundup-v2 .ew-roundup-section__title {
        font-size: 32px !important;
    }

    .custom .ew-roundup-v2 > .ad-slot,
    .custom .ew-roundup-v2 > .adsenseright,
    .custom .ew-roundup-v2 > [id^="gpt_unit_"],
    .custom .ew-roundup-v2 .ad-slot,
    .custom .ew-roundup-v2 .adsenseright {
        margin-top: 38px !important;
        margin-bottom: 38px !important;
    }
}


/* ---------------------------------------------------------------
 * Roundup masthead additions — v0.3.0
 * ---------------------------------------------------------------
 * Complements the accepted recipe masthead CSS; this is intentionally in
 * the SAME cumulative asset as the stream styles above.
 */
.ew-is-roundup .ew-recipe-masthead__eyebrow {
    color: var(--ew-green, #183a2a);
}

.ew-is-roundup .ew-roundup-masthead__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ew-muted, #6f726c);
    white-space: nowrap;
}

.ew-is-roundup .ew-roundup-masthead__count::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

/* PHP in new-saveur V2c.2 removes this CTA for roundups. This remains as a
 * defensive fallback if an older masthead copy is temporarily loaded. */
.ew-is-roundup .ew-recipe-masthead__action--plan {
    display: none !important;
}

/* Deliberately no rule for the later duplicate author/date row. That belongs
 * to the general editorial cleanup and is already hidden by the current site. */

@media (max-width: 767px) {
    .ew-is-roundup .ew-roundup-masthead__count {
        font-size: 12px;
    }
}

/* v0.3.0 legacy Pinterest composition helpers retained for tag/dropdown adapters. */
.custom .ew-roundup-v2__legacy-pin {
    width: min(100%, 640px);
    margin: 0 auto 50px;
}

.custom .ew-roundup-v2__legacy-pin--after {
    margin-top: 20px;
    margin-bottom: 0;
}

.custom .ew-roundup-v2__legacy-pin img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 !important;
}


/* v0.4.0 — optional media preserved from historical [roundup_block] groups. */
.ew-roundup-v2 .ew-roundup-section__image {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: 0 auto 30px;
}

.ew-roundup-v2 .ew-roundup-section__text > :first-child {
    margin-top: 0;
}

.ew-roundup-v2 .ew-roundup-section__text > :last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   v0.5.1 — Collection navigation & editorial section structure
   ========================================================================== */

.ew-roundup-v2 .ew-roundup-nav {
    width: min(720px, 100%);
    margin: 4px auto 62px;
    padding: 20px 0 22px;
    border-top: 1px solid var(--ew-border, #deddd8);
    border-bottom: 1px solid var(--ew-border-soft, #efeee9);
}

.ew-roundup-v2 .ew-roundup-nav__label {
    margin: 0 0 12px;
    color: var(--ew-muted, #6f726c);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ew-roundup-v2 .ew-roundup-nav__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.ew-roundup-v2 .ew-roundup-nav__link {
    color: var(--ew-ink, #242521);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
    text-underline-offset: 4px;
}

.ew-roundup-v2 .ew-roundup-nav__link:hover,
.ew-roundup-v2 .ew-roundup-nav__link:focus-visible {
    color: var(--ew-green, #183a2a);
    text-decoration: underline;
}

.ew-roundup-v2 .ew-roundup-section {
    scroll-margin-top: 120px;
}

.ew-roundup-v2 .ew-roundup-section__eyebrow {
    display: none;
}

.ew-roundup-v2 .ew-roundup-section__count {
    margin: 8px 0 0;
    color: var(--ew-soft, #8b8d87);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .ew-roundup-v2 .ew-roundup-nav {
        margin-bottom: 48px;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .ew-roundup-v2 .ew-roundup-nav__links {
        gap: 7px 16px;
    }

    .ew-roundup-v2 .ew-roundup-nav__link {
        font-size: 14px;
    }

    .ew-roundup-v2 .ew-roundup-section {
        scroll-margin-top: 96px;
    }
}


/* ==========================================================================
   v0.5.2 — Collection navigation visual refinement only
   No PHP / renderer / adapter / ad behavior changes.
   ========================================================================== */

/* Quieter editorial links: ink by default, green + underline only on interaction. */
.ew-roundup-v2 .ew-roundup-nav__link {
    color: var(--ew-ink, #242521);
    text-decoration: none;
    border-bottom: 0;
}

.ew-roundup-v2 .ew-roundup-nav__link:hover,
.ew-roundup-v2 .ew-roundup-nav__link:focus-visible {
    color: var(--ew-green, #183a2a);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Tighten transition from collection navigation to the first editorial section. */
.ew-roundup-v2 .ew-roundup-nav {
    margin-bottom: 38px;
}

/* Section heading should sit below the collection H1 in the hierarchy. */
.ew-roundup-v2 .ew-roundup-section__title {
    font-size: clamp(36px, 3.4vw, 46px);
    line-height: 1.04;
}

/* Keep the section count compact and informational. */
.ew-roundup-v2 .ew-roundup-section__count {
    margin-top: 7px;
}

/* Avoid compounding legacy soft-break top spacing immediately after nav. */
.ew-roundup-v2 .ew-roundup-nav + .ew-roundup-section {
    margin-top: 0;
}

@media (max-width: 767px) {
    .ew-roundup-v2 .ew-roundup-nav {
        margin-bottom: 32px;
    }

    .ew-roundup-v2 .ew-roundup-section__title {
        font-size: clamp(32px, 9vw, 40px);
        line-height: 1.08;
    }
}


/* ==========================================================================
   v0.5.3 — Mobile collection-navigation polish
   Desktop behavior remains unchanged.
   ========================================================================== */

@media (max-width: 767px) {

    .ew-roundup-v2 .ew-roundup-nav {
        padding: 16px 0 18px;
        margin-bottom: 26px;
    }

    .ew-roundup-v2 .ew-roundup-nav__label {
        margin-bottom: 14px;
        font-size: 10px;
        line-height: 1.3;
        letter-spacing: .08em;
    }

    /*
     * One editorial column is easier to scan than a compressed two-column
     * layout on narrow screens.
     */
    .ew-roundup-v2 .ew-roundup-nav__links {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .ew-roundup-v2 .ew-roundup-nav__link {
        display: block;
        width: 100%;
        font-size: 16px;
        line-height: 1.35;
        font-weight: 600;
    }

    /*
     * Avoid a visually heavy double separator when the first section follows
     * immediately after the collection navigation.
     */
    .ew-roundup-v2 .ew-roundup-nav + .ew-roundup-section {
        margin-top: 0;
        padding-top: 26px;
        border-top: 0;
    }

    .ew-roundup-v2 .ew-roundup-section__title {
        font-size: 34px;
        line-height: 1.06;
        letter-spacing: -0.02em;
    }

    .ew-roundup-v2 .ew-roundup-section__count {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.35;
    }

    .ew-roundup-v2 .ew-roundup-section__text {
        font-size: 18px;
        line-height: 1.5;
    }

    .ew-roundup-v2 .ew-roundup-section__text p {
        font-size: inherit;
        line-height: inherit;
    }
}


/* ==========================================================================
   v0.5.4 — Mobile horizontal Explore rail
   Desktop remains unchanged.
   ========================================================================== */

.ew-roundup-v2 .ew-roundup-nav__label-mobile {
    display: none;
}

@media (max-width: 767px) {

    .ew-roundup-v2 .ew-roundup-nav {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        margin: 0 0 28px;
        padding: 14px 0;
        overflow: hidden;
        border-top: 1px solid var(--ew-border, #deddd8);
        border-bottom: 1px solid var(--ew-border-soft, #efeee9);
    }

    .ew-roundup-v2 .ew-roundup-nav__label {
        flex: 0 0 auto;
        margin: 0;
        font-size: 10px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .ew-roundup-v2 .ew-roundup-nav__label-desktop {
        display: none;
    }

    .ew-roundup-v2 .ew-roundup-nav__label-mobile {
        display: inline;
    }

    .ew-roundup-v2 .ew-roundup-nav__links {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .ew-roundup-v2 .ew-roundup-nav__links::-webkit-scrollbar {
        display: none;
    }

    .ew-roundup-v2 .ew-roundup-nav__link {
        flex: 0 0 auto;
        width: auto;
        display: inline-block;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 600;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    /*
     * Keep the first editorial section close to the rail so navigation never
     * feels like an extra content block before the collection itself.
     */
    .ew-roundup-v2 .ew-roundup-nav + .ew-roundup-section {
        margin-top: 0;
        padding-top: 22px;
        border-top: 0;
    }
}


/* ==========================================================================
   v0.5.5 / v0.6.0 — Mobile swipe affordance
   ========================================================================== */

@media (max-width: 767px) {
    .ew-roundup-v2 .ew-roundup-nav {
        position: relative;
    }

    .ew-roundup-v2 .ew-roundup-nav::after {
        content: "";
        position: absolute;
        top: 1px;
        right: 0;
        bottom: 1px;
        width: 38px;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(
            to right,
            rgba(255,255,255,0),
            rgba(255,255,255,.92) 72%,
            rgba(255,255,255,1)
        );
    }
}

/* ==========================================================================
   v0.6.0 — Collection save state
   ========================================================================== */

.ew-is-roundup .ew-recipe-masthead__action--save.is-collection-saved {
    color: var(--ew-green, #183a2a);
}

.ew-is-roundup .ew-recipe-masthead__action--save.is-collection-saved i {
    font-weight: 900;
}

.ew-roundup-collection-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    max-width: min(340px, calc(100vw - 32px));
    padding: 13px 16px;
    border: 1px solid var(--ew-border, #deddd8);
    border-radius: 10px;
    background: var(--ew-white, #fff);
    color: var(--ew-ink, #242521);
    box-shadow: 0 8px 30px rgba(36,37,33,.10);
    font-size: 14px;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.ew-roundup-collection-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767px) {
    .ew-roundup-collection-toast {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
    }
}