/**
 * Homepage "É Golo PLACAR" — layout + components.
 * Spec: design handoff (É Golo PLACAR.dc.html / É Golo PLACAR Mobile.dc.html).
 *
 * Mobile-first: <768px single column with horizontal games scroller;
 * 768–1023px feed + rail grid; ≥1024px 300px | 1fr | 340px grid.
 *
 * @package SuperPortistas
 */

.eg-home {
    --eg-display: 'Archivo Black', 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --eg-card-dark: #1b1b19;
    --eg-card-dark-hover: #242422;
    --eg-live: #00e06b;
    --eg-accent: #ffd400;
    --eg-losing: #8a887f;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f4f3ef;
}

/* ------------------------------------------------------------------
 * Games rail (dark)
 * ------------------------------------------------------------------ */
.eg-jogos-rail {
    background: #0d0d0c;
    color: #fff;
}

.eg-jogos-rail__scroller {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.eg-jogos-rail__title {
    font-family: var(--eg-display);
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    align-self: center;
    writing-mode: horizontal-tb;
}

.eg-match-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: none;
    width: 160px;
    background: var(--eg-card-dark);
    border-top: 3px solid transparent;
    padding: 12px;
    color: #fff;
    text-decoration: none;
    min-height: 44px;
    transition: background 0.15s ease;
}

.eg-match-card:hover,
.eg-match-card:focus-visible {
    background: var(--eg-card-dark-hover);
    color: #fff;
}

.eg-match-card:focus-visible {
    outline: 2px solid var(--eg-live);
    outline-offset: 2px;
}

.eg-match-card--liga {
    border-top-color: #00a24a;
}

.eg-match-card--outra {
    border-top-color: var(--eg-accent);
}

.eg-match-card__status {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--eg-live);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eg-match-card--outra .eg-match-card__status {
    color: var(--eg-accent);
}

.eg-match-card__status--muted,
.eg-match-card--outra .eg-match-card__status--muted {
    color: var(--eg-losing);
}

.eg-match-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
    color: #fff;
}

.eg-match-card__row--losing {
    color: var(--eg-losing);
}

.eg-match-card__team {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eg-jogos-rail__all {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    color: var(--eg-live);
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.eg-jogos-rail__all:hover,
.eg-jogos-rail__all:focus-visible {
    color: #fff;
}

/* ------------------------------------------------------------------
 * Feed (hero + manchetes)
 * ------------------------------------------------------------------ */
.eg-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    min-width: 0;
}

.eg-feed__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eg-feed__empty {
    text-align: center;
    padding: 48px 0;
    color: #6b6963;
    font-weight: 600;
}

/* Hero */
.eg-hero {
    position: relative;
    height: 320px;
    color: #fff;
    background: #0d0d0c;
}

.eg-hero__link {
    position: absolute;
    inset: 0;
    display: block;
    color: inherit;
    text-decoration: none;
}

.eg-hero__link:hover,
.eg-hero__link:focus-visible {
    color: inherit;
}

.eg-hero__link:focus-visible {
    outline: 3px solid #00a24a;
    outline-offset: 2px;
}

.eg-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eg-hero__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 70px 16px 16px;
    background: linear-gradient(transparent, rgba(13, 13, 12, 0.9) 70%);
}

.eg-hero__chip {
    display: inline-block;
    background: #00a24a;
    color: #fff;
    font-family: var(--eg-display);
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    padding: 3px 8px;
}

.eg-hero__title {
    display: block;
    font-family: var(--eg-display);
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.02;
    letter-spacing: -0.5px;
    margin-top: 8px;
    text-wrap: pretty;
    color: #fff;
}

.eg-hero__dot {
    color: var(--eg-live, #00e06b);
}

.eg-hero__lead {
    display: none;
    font-size: 15px;
    font-weight: 600;
    margin-top: 8px;
    opacity: 0.85;
    color: #fff;
}

/* Section head — MANCHETES. */
.eg-section-head {
    align-items: baseline;
    margin-top: 4px;
}

.eg-section-head__text {
    font-family: var(--eg-display) !important;
    font-style: italic;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.1;
    letter-spacing: 0;
    margin: 0;
}

/* Headline cards */
.eg-headline {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #dbd9d2;
    padding-bottom: 14px;
}

.eg-headline:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.eg-headline__media {
    position: relative;
    height: 76px;
    overflow: hidden;
    border-radius: 4px;
    background: #efeee8;
}

.eg-headline__media a {
    display: block;
    height: 100%;
}

.eg-headline__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eg-headline__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 13, 12, 0.35);
    color: #fff;
}

.eg-headline__play svg {
    width: 28px;
    height: 28px;
    background: #00a24a;
    border-radius: 9999px;
    padding: 5px;
}

.eg-headline__duration {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(13, 13, 12, 0.8);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
}

.eg-headline__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.eg-headline__kicker {
    font-size: 11px;
    font-weight: 800;
    color: #00a24a;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.eg-headline__title {
    font-family: var(--eg-display);
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.12;
    letter-spacing: 0;
    margin: 0;
}

.eg-headline__title a {
    color: #0d0d0c;
    text-decoration: none;
}

.eg-headline__title a:hover,
.eg-headline__title a:focus-visible {
    color: #00a24a;
}

.eg-headline__meta {
    font-size: 12px;
    color: #6b6963;
    font-weight: 600;
}

/* ------------------------------------------------------------------
 * Ad slots (dashed placeholder, mandatory "Publicidade" label)
 * ------------------------------------------------------------------ */
.eg-ad-slot {
    background: #efeee8;
    border: 1px dashed #b5b3ac;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    text-align: center;
}

.eg-ad-slot__label {
    font-size: 10px;
    font-weight: 700;
    color: #8a887f;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.eg-ad-slot__format {
    font-size: 12px;
    font-weight: 600;
    color: #b5b3ac;
}

.eg-ad-slot__unit {
    width: 100%;
}

.eg-ad-slot--mpu {
    background: #f4f3ef;
    min-height: 250px;
}

/* ------------------------------------------------------------------
 * Right rail (#EFEEE8)
 * ------------------------------------------------------------------ */
.eg-side-rail {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px;
    background: #efeee8;
}

.eg-side-rail__title {
    font-family: var(--eg-display);
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #0d0d0c;
    margin: 0 0 12px;
}

.eg-side-rail__more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 2px;
    font-weight: 800;
    font-size: 13px;
    color: #00a24a;
    text-decoration: none;
}

.eg-side-rail__more:hover,
.eg-side-rail__more:focus-visible {
    color: #0d0d0c;
}

/* Previsões */
.eg-predictions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eg-prediction {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #0d0d0c;
    text-decoration: none;
    min-height: 44px;
    justify-content: center;
}

.eg-prediction:hover .eg-prediction__label,
.eg-prediction:focus-visible .eg-prediction__label {
    color: #00a24a;
}

.eg-prediction__head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.eg-prediction__label {
    min-width: 0;
}

.eg-prediction__pct--green {
    color: #00a24a;
}

.eg-prediction__pct--yellow {
    color: #b08d00;
}

.eg-prediction__bar {
    display: block;
    height: 8px;
    background: #dbd9d2;
}

.eg-prediction__fill {
    display: block;
    height: 100%;
}

.eg-prediction__fill--green {
    background: #00a24a;
}

.eg-prediction__fill--yellow {
    background: #ffd400;
}

/* Classificação */
.eg-standings {
    display: flex;
    flex-direction: column;
    background: #f4f3ef;
    font-size: 14px;
    font-weight: 600;
    color: #0d0d0c;
}

.eg-standings__row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 40px 36px;
    align-items: baseline;
    padding: 9px 10px;
    border-bottom: 1px solid #dbd9d2;
}

.eg-standings__row:last-child {
    border-bottom: 0;
}

.eg-standings__row--leader {
    background: #00a24a;
    color: #fff;
    border-bottom: 0;
}

.eg-standings__team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eg-standings__points {
    text-align: right;
    font-weight: 800;
}

/* Número do dia */
.eg-numero {
    border: 2px solid #0d0d0c;
    padding: 18px;
    text-align: center;
    background: #f4f3ef;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eg-numero__value {
    font-family: var(--eg-display);
    font-style: italic;
    font-weight: 400;
    font-size: 56px;
    line-height: 1;
    color: #00a24a;
}

.eg-numero__caption {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: #0d0d0c;
}

/* Mais lidas */
.eg-top-reads {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eg-top-reads__item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.eg-top-reads__rank {
    font-family: var(--eg-display);
    font-style: italic;
    font-weight: 400;
    color: #00a24a;
    font-size: 15px;
    line-height: 1.25;
}

.eg-top-reads__link {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    color: #0d0d0c;
    text-decoration: none;
    display: inline-block;
    padding: 2px 0;
}

.eg-top-reads__link:hover,
.eg-top-reads__link:focus-visible {
    color: #00a24a;
}

/* ------------------------------------------------------------------
 * Tablet (768–1023px): feed + rail side by side, games rail horizontal
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .eg-home {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        align-items: start;
    }

    .eg-jogos-rail {
        grid-column: 1 / -1;
    }

    .eg-feed {
        padding: 24px;
        gap: 18px;
        border-right: 1px solid #dbd9d2;
    }

    .eg-feed__list {
        gap: 18px;
    }

    .eg-hero {
        height: 360px;
    }

    .eg-hero__overlay {
        padding: 90px 24px 22px;
    }

    .eg-hero__chip {
        font-size: 12px;
    }

    .eg-hero__title {
        font-size: 34px;
        line-height: 1;
        letter-spacing: -1px;
    }

    .eg-hero__lead {
        display: block;
    }

    .eg-section-head__text {
        font-size: 20px !important;
    }

    .eg-headline {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 18px;
        padding-bottom: 18px;
    }

    .eg-headline__media {
        height: 110px;
    }

    .eg-headline__body {
        gap: 6px;
    }

    .eg-headline__kicker {
        font-size: 12px;
    }

    .eg-headline__title {
        font-size: 21px;
        line-height: 1.1;
    }

    .eg-headline__meta {
        font-size: 13px;
    }

    .eg-ad-slot {
        min-height: 110px;
    }

    .eg-side-rail {
        min-height: 100%;
        padding: 28px 24px;
    }
}

/* ------------------------------------------------------------------
 * Desktop (≥1024px): 300px games rail | feed | 340px right rail
 * ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .eg-home {
        grid-template-columns: 300px minmax(0, 1fr) 340px;
    }

    .eg-jogos-rail {
        grid-column: auto;
        min-height: 100%;
    }

    .eg-jogos-rail__scroller {
        position: sticky;
        top: calc(var(--sp-site-header-offset, 70px) + 0px);
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 24px 20px;
        overflow-x: visible;
        max-height: calc(100vh - var(--sp-site-header-offset, 70px));
        overflow-y: auto;
    }

    .eg-jogos-rail__title {
        align-self: auto;
    }

    .eg-jogos-rail__title--next {
        margin-top: 10px;
    }

    .eg-match-card {
        width: auto;
        padding: 14px;
        gap: 8px;
        border-top: 0;
        border-left: 3px solid transparent;
    }

    .eg-match-card--liga {
        border-left-color: #00a24a;
    }

    .eg-match-card--outra {
        border-left-color: var(--eg-accent);
    }

    .eg-match-card__status {
        font-size: 11px;
    }

    .eg-match-card__row {
        font-size: 15px;
    }

    .eg-jogos-rail__all {
        margin-top: 10px;
        align-self: flex-start;
        padding: 0;
    }

    .eg-feed {
        padding: 28px 32px;
        gap: 20px;
    }

    .eg-feed__list {
        gap: 20px;
    }

    .eg-hero {
        height: 380px;
    }

    .eg-hero__title {
        font-size: 38px;
    }
}

/* ------------------------------------------------------------------
 * "O TEU CLUBE" — favorite-club card at the top of the right rail
 * (logged-in users with a favorite club only).
 * ------------------------------------------------------------------ */
.eg-club-card {
    position: relative;
    background: #fff;
    border: 1px solid #dbd9d2;
    border-top: 3px solid var(--sp-porto, #00a24a);
    padding: 16px 16px 14px;
}

.eg-club-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding-right: 44px;
}

.eg-club-card__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sp-porto, #00a24a);
}

.eg-club-card__crest {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
}

.eg-club-card__match {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: #efeee8;
    text-decoration: none;
    color: #0d0d0c;
}

.eg-club-card__match:hover .eg-club-card__teams,
.eg-club-card__match:focus-visible .eg-club-card__teams {
    color: var(--sp-porto, #00a24a);
}

.eg-club-card__match:focus-visible {
    outline: 2px solid var(--sp-porto, #00a24a);
    outline-offset: 2px;
}

.eg-club-card__kicker {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b6963;
}

.eg-club-card__teams {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    transition: color 0.15s ease;
}

.eg-club-card__meta {
    font-size: 12px;
    font-weight: 600;
    color: #6b6963;
}

.eg-club-card__empty {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b6963;
}