/* FILE: public/css/feed_moreof.css — FULL FILE
   Self-contained “More Of” styles – hero tile copied from dashboard large-tile,
   but namespaced for this component. No external dashboard CSS is required.
*/

/* Section wrapper */
.moreof-hf {
    margin-bottom: 32px
}

/* Rail shell: 300px side list + stage (desktop) */
.moreof-hf__grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 10px;
    align-items: start;
}

/* === Stage (flex row): [ HERO | RIGHT COLUMN ] ========================== */
/* === Stage (flex row): [ HERO | RIGHT COLUMN ] ========================== */
/* === Stage (flex row): [ HERO | RIGHT COLUMN ] ========================== */
.moreof-hf__stageFlex {
    display: flex;
    align-items: stretch;
    gap: clamp(10px, -0.9091px + 1.8182vw, 20px);
    min-width: 0;
    height: clamp(380px, 271.1111px + 15.5556vw, 450px); /*1150 to 700 */
}


/* ---- HERO (copied/translated from dashboard large tile) ---------------- */
.moreof-hero__wrap {
    flex: 0 1 65%;
    min-width: 0;
    display: flex;
}

.moreof-hero__card {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--section-darkest-background-color);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    text-decoration: none;
    color: var(--white-color-1);
}

/* media fills container */
.moreof-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.moreof-hf__sideCard .pinned-tag,
.moreof-hf__sideCard .editors-choice-badge,
.moreof-hero__card .pinned-tag,
.moreof-hero__card .editors-choice-badge {
    display: none;
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 10;
}

/* REPLACE THIS BLOCK (hero overlay) */
.moreof-hero__overlay {
    position: absolute;
    inset: 0;
    /* stronger bottom gradient for readability, clipped by card radius */
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 10%,
            rgba(0, 0, 0, .375) 55%,
            rgba(0, 0, 0, .85) 85%,
            rgba(0, 0, 0, .92) 100%);
    pointer-events: none;
    z-index: 1;
    /* over image, under content */
}

/* ENSURE CONTENT SITS ABOVE THE OVERLAY */
.moreof-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(85%, 980px);
    z-index: 2;
    /* text above gradient */
}

.moreof-hero__tag {
    font-weight: var(--font-weight7);
    font-size: var(--ft-14-12);
    text-transform: uppercase
}

.moreof-hero__title {
    margin: .0;
    font-family: var(--identity-font);
    font-weight: var(--font-weight8);
    letter-spacing: -.5px;
    line-height: 1.15;
    font-size: var(--ft-28-21);
    color: var(--white-color-1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Underline the large hero title when the whole card is hovered or focused */
.moreof-hero__card:hover .moreof-hero__title,
.moreof-hero__card:focus .moreof-hero__title,
.moreof-hero__card:focus-visible .moreof-hero__title {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: from-font;
  text-decoration-skip-ink: auto;
}

.moreof-hero__desc {
    margin: .15rem 0 0 0;
    color: var(--grey-color-3);
    font-family: var(--identity-font);
    font-weight: var(--font-weight4);
    line-height: 1.45;
    font-size: var(--font-size-16px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

.moreof-hero__date {
    display: none;
    margin: 0;
    color: var(--grey-color-3)
}

/* ---- RIGHT COLUMN (two rows) ------------------------------------------ */

.moreof-hf__rightCol {
    flex: 0 1 35%;
    max-width: 420px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: clamp(10px, -0.9091px + 1.8182vw, 20px);
    align-items: stretch;
    height: 100%;
}


.eg-hf__img_rc {
    position: absolute;
    height: 100%;
    width: 100%;
    background: var(--section-darkestdark-background-color);
}

.moreof-hf__sideCard {
    position: relative;
}

.moreof-hf__rightCol>.moreof-hf__sideCard.eg-hf__card {
    position: relative;
    display: grid !important;
    grid-template-rows: 1fr;
    border-radius: 6px;
    overflow: hidden;
    background: var(--section-darkest-background-color);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    text-decoration: none;
    color: var(--white-color-1);
}

.moreof-hf__rightCol>.moreof-hf__sideCard.eg-hf__card .eg-hf__img {
    grid-row: 1;
    grid-column: 1;
    object-position: center;
    display: block;
    margin: 0 !important;
    flex: none !important;
}

.moreof-hf__rightCol>.moreof-hf__sideCard.eg-hf__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 10%,
            rgba(0, 0, 0, .375) 55%,
            rgba(0, 0, 0, .85) 85%,
            rgba(0, 0, 0, .92) 100%);
    pointer-events: none;
    z-index: 1;
}

.moreof-hf__rightCol>.moreof-hf__sideCard.eg-hf__card .eg-hf__content {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    position: relative;
    z-index: 2;
    padding: 1rem 1rem 1.1rem 1rem;
    margin: 0 !important;
    background: none;
}

.moreof-hf__sideTitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.moreof-hf__rightCol .eg-hf__tag {
    font-size: var(--ft-12-11);
}

.moreof-hf__rightCol>.moreof-hf__sideCard.eg-hf__card .eg-hf__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--grey-color-3);
    font-size: var(--font-size-14px);
}

.moreof-hf__rightCol>.moreof-hf__sideCard.eg-hf__card .eg-hf__date {
    display: none;
}


/* Narrow desktop / tablet: keep the right column proportional so HERO doesn’t collapse */
/* Narrow desktop / tablet: keep the 65/35 ratio; just relax the cap slightly */
/* Narrow desktop / tablet: keep the 65/35 ratio; just relax the cap slightly */
@media (max-width:1150px) {
    .moreof-hf__rightCol {
        max-width: 380px;
    }
}



/* Phone-specific sizing for the two stacked right tiles */
@media (max-width:600px) {
    .moreof-hf__rightCol {
        min-width: 0;
        max-width: none;
        width: 100%;
        grid-template-rows: auto auto;
    }
}

/* ---- Responsiveness ---------------------------------------------------- */
/* ---- Responsiveness ----------------------------------------------------
   Preserve your existing behavior at <=1150px (hide the left rail).
   The 65/35 split continues automatically; no custom property needed. */
@media (max-width:1150px) {
    .moreof-side {
        display: none !important;
    }

    .moreof-hf__grid {
        grid-template-columns: 1fr;
    }
}

/* PHONE/TABLET STACK ≤700px — FULL REPLACEMENT of prior ≤600px rules */
@media (max-width:700px) {
    .moreof-hf__stageFlex {
        flex-direction: column;
        gap: clamp(12px, 2.5vw, 16px);
        max-height: none;
        height: unset;
        /* prevent clipping/overlap into next section */
    }

    .moreof-hero__wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Full-width tile with fixed 5:3 ratio */
    .moreof-hero__card {
        width: 100%;
        aspect-ratio: 5 / 3;
        min-height: 0;
        /* override any earlier min-height clamps */
    }

    /* Right column becomes a simple vertical stack of full-width tiles */
    .moreof-hf__rightCol {
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 2.5vw, 16px);
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    /* Each side tile is also a 5:3 box */
    .moreof-hf__rightCol>.moreof-hf__sideCard.eg-hf__card {
        aspect-ratio: 5 / 3;
    }

    /* Ensure images fill the aspect-ratio boxes cleanly */
    .moreof-hf__rightCol>.moreof-hf__sideCard.eg-hf__card .eg-hf__img,
    .moreof-hero__image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .moreof-hero__content,
    .moreof-hf__rightCol>.moreof-hf__sideCard.eg-hf__card .eg-hf__content {
        padding: 1.25rem 1.5rem 1.5rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        width: unset
    }

    .moreof-hero__tag,
    .moreof-hf__rightCol .eg-hf__tag {
        font-size: var(--fm-12-11);
    }


    .moreof-hero__title,
    .moreof-hf__sideTitle {
        margin-top: 3px;
        font-size: var(--fm-24-18);
    }
}



/* Rail placement (MAIN + RIGHT span) */
.article-section.layout-grid>.moreof-hf {
    grid-column: 2 / -1
}

@media (max-width:1800px) {
    .article-section.layout-grid>.moreof-hf {
        grid-column: 1 / -1
    }
}

.article-section.layout-side>.moreof-hf {
    grid-column: 1 / -1
}