/* =========================================
   SAHKOAPPI.FI – ARTIKELKOMPONENTER
   Bevarer original opbygning, spacing, cards, dark,
   tabeller, datakort, steps og kildeangivelser.
   Farverne arver fra din globale :root-paletten.
   ========================================= */

/* =========================================================
   SAHKOAPPI.FI – ARTIKELKOMPONENTER
   Baseret på de originale eSIM-artikelklasser, med SähköAppi-farver
   ========================================================= */


/* =========================================================
   FÆLLES VARIABLER
   ========================================================= */

.entry-content {
    --esg-ink: #0f172a;
    --esg-text: #334155;
    --esg-muted: #64748b;
    --esg-line: #dfe7ee;
    --esg-blue: var(--brand, #095BD3);
    --esg-teal: var(--brand, #095BD3);
    --esg-navy: var(--brand-dark, #0649AA);
    --esg-navy-light: var(--brand-dark, #0649AA);
    --esg-accent: var(--accent, #FFC400);

    /*
     * Hvor langt den mørke sektion går ud over
     * den normale tekstbredde.
     */
    --esg-bleed: 24px;
}


/* =========================================================
   1. CLEAN CARDS
   Class: esg-cards

   Sættes på Gutenberg Columns.
   ========================================================= */

.entry-content .esg-cards {
    gap: 18px;
    margin: 28px 0 42px;
}

.entry-content .esg-cards > .wp-block-column {
    padding: 25px 24px;

    border: 1px solid var(--esg-line);
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.055);
}

.entry-content .esg-cards h3,
.entry-content .esg-cards h4 {
    margin-top: 0;
    margin-bottom: 8px;

    color: var(--esg-ink);

    font-size: 19px;
    line-height: 1.3;
}

.entry-content .esg-cards p {
    margin-top: 0;
    color: var(--esg-muted);
}

.entry-content .esg-cards > .wp-block-column > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   2. DATABOKSE / METRICS
   Class: esg-data

   Sættes på en Gutenberg Group.
   Kompatibel med både nyere Gutenberg-markup og ældre/
   temaafhængig .wp-block-group__inner-container-wrapper.
   ========================================================= */

.entry-content .esg-data {
    margin: 48px 0;
}

/* Lille label / eyebrow – direkte child eller via Gutenberg-wrapper */
.entry-content .esg-data > p:first-child,
.entry-content .esg-data > .wp-block-group__inner-container > p:first-child {
    margin: 0 0 9px;
    color: var(--esg-teal);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Overskrifter */
.entry-content .esg-data > h2,
.entry-content .esg-data > h3,
.entry-content .esg-data > .wp-block-group__inner-container > h2,
.entry-content .esg-data > .wp-block-group__inner-container > h3 {
    margin-top: 0;
}

/* Metrics som Gutenberg Columns.
   Descendant selector er bevidst: den virker både med og uden
   .wp-block-group__inner-container. */
.entry-content .esg-data .wp-block-columns {
    gap: 16px;
    margin: 25px 0;
}

.entry-content .esg-data .wp-block-columns > .wp-block-column {
    padding: 21px 20px;
    border: 1px solid var(--esg-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}

/* Metric label */
.entry-content .esg-data .wp-block-columns > .wp-block-column > p:first-child {
    margin: 0 0 8px;
    color: var(--esg-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Stort metric-resultat */
.entry-content .esg-data .wp-block-columns > .wp-block-column > p:nth-child(2) {
    margin: 0 0 6px;
    color: var(--esg-ink);
    font-size: 27px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

/* Metric-forklaring */
.entry-content .esg-data .wp-block-columns > .wp-block-column > p:last-child {
    margin-bottom: 0;
    color: #526273;
    font-size: 14px;
}

/* =========================================================
   3. CLEAN TABEL
   Class: esg-table

   Sættes direkte på Gutenberg Table-blokken.
   ========================================================= */

.entry-content .esg-table {
    margin: 27px 0;

    overflow-x: auto;

    border: 0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.055);
}

.entry-content .esg-table table {
    width: 100%;
    margin: 0;

    border: 0;
    border-collapse: collapse;
}

.entry-content .esg-table th,
.entry-content .esg-table td {
    padding: 14px 17px;

    border: 0;
    border-bottom: 1px solid #e6edf2;

    text-align: left;
    vertical-align: top;
}

.entry-content .esg-table thead th {
    color: #ffffff;
    background: var(--esg-navy-light);

    font-size: 13px;
    font-weight: 700;
}

.entry-content .esg-table tbody tr:nth-child(even) {
    background: #f8fbfd;
}

.entry-content .esg-table tbody tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   4. MØRK FAGLIG SEKTION
   Class: esg-dark

   Sættes på Gutenberg Group.

   Bruges til én vigtig pointe, forklaring eller
   sammenligning og fungerer som visuelt break.
   ========================================================= */

.entry-content .esg-dark {
    margin-top: 52px;
    margin-right: calc(var(--esg-bleed) * -1);
    margin-bottom: 52px;
    margin-left: calc(var(--esg-bleed) * -1);

    /*
     * Bevidst strammere i bunden.
     */
    padding:
        36px
        calc(var(--esg-bleed) + 6px)
        30px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(255, 196, 0, 0.12),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            var(--esg-navy),
            #07377F
        );
}


/* Lille label øverst */

.entry-content .esg-dark > p:first-child {
    margin: 0 0 8px;

    color: var(--esg-accent);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* Overskrifter */

.entry-content .esg-dark h2,
.entry-content .esg-dark h3,
.entry-content .esg-dark h4 {
    margin-top: 0;
    margin-bottom: 10px;

    color: #ffffff;
}

.entry-content .esg-dark h2 {
    max-width: 760px;

    font-size: clamp(25px, 3vw, 33px);
}


/* Brødtekst */

.entry-content .esg-dark p {
    max-width: 780px;

    margin-top: 0;
    margin-bottom: 14px;

    color: rgba(255, 255, 255, 0.76);
}

.entry-content .esg-dark > :last-child {
    margin-bottom: 0;
}


/* Links */

.entry-content .esg-dark a {
    color: #ffffff;

    font-weight: 600;

    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 2px;
}


/* Tabel inde i mørk sektion */

.entry-content .esg-dark .wp-block-table {
    margin: 24px 0 0;

    overflow-x: auto;

    border: 0;
    border-radius: 13px;

    background: #ffffff;
}

.entry-content .esg-dark .wp-block-table table {
    width: 100%;
    margin: 0;

    border: 0;
    border-collapse: collapse;
}

.entry-content .esg-dark .wp-block-table th,
.entry-content .esg-dark .wp-block-table td {
    padding: 13px 16px;

    border: 0;
    border-bottom: 1px solid #e4ebef;

    text-align: left;
    vertical-align: top;
}

.entry-content .esg-dark .wp-block-table thead th {
    color: var(--esg-navy);
    background: #eaf2f6;

    font-size: 13px;
    font-weight: 700;
}

.entry-content .esg-dark .wp-block-table td {
    color: #334155;
    background: #ffffff;
}

.entry-content .esg-dark .wp-block-table tbody tr:nth-child(even) td {
    background: #f8fbfd;
}

.entry-content .esg-dark .wp-block-table tbody tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   5. TRE TRIN
   Class: esg-steps

   Sættes på Gutenberg Columns.
   Hver Column = ét trin.
   ========================================================= */

.entry-content .esg-steps {
    gap: 24px;
    margin: 28px 0 46px;
}

.entry-content .esg-steps > .wp-block-column {
    padding-top: 20px;

    border-top: 3px solid var(--esg-blue);
}


/* Første paragraph bruges som trin-nummer */

.entry-content .esg-steps > .wp-block-column p:first-child {
    margin: 0 0 16px;

    color: var(--esg-blue);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.entry-content .esg-steps h3,
.entry-content .esg-steps h4 {
    margin-top: 0;
    margin-bottom: 7px;

    color: var(--esg-ink);
}

.entry-content .esg-steps p {
    color: var(--esg-muted);
}

.entry-content .esg-steps > .wp-block-column > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   6. DISKRET KILDEANGIVELSE
   Class: esg-source

   Sættes på Gutenberg Paragraph.
   ========================================================= */

.entry-content .esg-source {
    margin: 10px 0 30px;

    color: #7a8796;

    font-size: 12px;
    line-height: 1.55;
}

.entry-content .esg-source a {
    color: var(--esg-blue);

    font-weight: 600;

    text-decoration: none;
}

.entry-content .esg-source a:hover {
    text-decoration: underline;
}


/* =========================================================
   RESPONSIVE – TABLET / MOBIL
   ========================================================= */

@media (max-width: 768px) {

    .entry-content {
        --esg-bleed: 16px;
    }


    /* -------------------------
       Cards
       ------------------------- */

    .entry-content .esg-cards {
        gap: 13px;

        margin: 25px 0 34px;
    }

    .entry-content .esg-cards > .wp-block-column {
        padding: 20px;

        border-radius: 13px;
    }


    /* -------------------------
       Data / metrics
       ------------------------- */

    .entry-content .esg-data {
        margin: 38px 0;
    }

    .entry-content .esg-data .wp-block-columns {
        gap: 12px;

        margin: 21px 0;
    }

    .entry-content .esg-data .wp-block-columns > .wp-block-column {
        padding: 18px;

        border-radius: 12px;
    }

    .entry-content .esg-data .wp-block-columns > .wp-block-column p:nth-child(2) {
        font-size: 24px;
    }


    /* -------------------------
       Tables
       ------------------------- */

    .entry-content .esg-table {
        border-radius: 9px;
    }

    .entry-content .esg-table table,
    .entry-content .esg-dark .wp-block-table table {
        min-width: 620px;
    }

    .entry-content .esg-table th,
    .entry-content .esg-table td,
    .entry-content .esg-dark .wp-block-table th,
    .entry-content .esg-dark .wp-block-table td {
        padding: 11px 13px;
    }


    /* -------------------------
       Dark section
       ------------------------- */

    .entry-content .esg-dark {
        margin-top: 42px;
        margin-bottom: 42px;

        /*
         * Også strammet på mobil.
         */
        padding:
            30px
            calc(var(--esg-bleed) + 6px)
            24px;
    }

    .entry-content .esg-dark h2 {
        font-size: 25px;
    }


    /* -------------------------
       Steps
       ------------------------- */

    .entry-content .esg-steps {
        gap: 18px;

        margin-bottom: 38px;
    }

/* -------------------------
       Source
       ------------------------- */

    .entry-content .esg-source {
        margin-bottom: 26px;
    }
}


/* =========================================================
   SMÅ MOBILER

   Sikrer at Gutenberg Columns stacker korrekt, selv hvis
   temaets egne Gutenberg-regler ikke gør det.
   ========================================================= */

@media (max-width: 600px) {

    .entry-content .esg-cards.wp-block-columns,
    .entry-content .esg-data .wp-block-columns,
    .entry-content .esg-steps.wp-block-columns {
        display: grid;

        grid-template-columns: 1fr;
    }

}


/* =========================================================
   7. ILLUSTRATION
   Class: esg-infographic; bruges af billedgenereringen.
   ========================================================= */
.entry-content .esg-infographic {
    margin: 30px auto;
    text-align: center;
}
.entry-content .esg-infographic img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Produktfeed: diskret dokumentationsforbehold ved betalingsevne. */
.entry-content .sahko-cs-feed-note { margin: 0 0 28px; font-size: 0.9rem; line-height: 1.5; color: #526273; }