/* ==========================================================
   HOSTING MAGAZINE
   EDITORIAL ARCHIVE V1

   Composition only.
   Shared editorial cards live in 20-hm-components.css.
   ========================================================== */


/* ==========================================================
   THEME LEGACY SUPPRESSION
   ========================================================== */

body.hm-editorial-archive-active .archive-top{
    display:none!important;
}

body.hm-editorial-archive-active #content{
    padding-top:0!important;
}

body.hm-editorial-archive-active .content-wrap{
    margin-top:0!important;
    padding-top:0!important;
}


/* ==========================================================
   PAGE ROOT
   ========================================================== */

.hm-editorial-archive{
    min-height:60vh;

    background:var(--hm-bg);
}


/* ==========================================================
   HERO
   ========================================================== */

.hm-editorial-hero{
    position:relative;

    overflow:hidden;

    padding:76px 0 72px;

    background:
        radial-gradient(
            circle at 83% 22%,
            rgba(37,99,235,.26),
            transparent 31%
        ),
        radial-gradient(
            circle at 68% 100%,
            rgba(5,150,105,.10),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            var(--hm-navy-950) 0%,
            var(--hm-navy-900) 58%,
            #172554 100%
        );

    color:#cbd5e1;
}

.hm-editorial-hero::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.10;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size:58px 58px;
}

.hm-editorial-hero__inner{
    position:relative;
    z-index:2;

    max-width:820px;
}

.hm-editorial-hero__eyebrow{
    margin-bottom:13px;

    color:#93c5fd;

    font-size:10px;
    line-height:1;
    font-weight:900;

    letter-spacing:.11em;
    text-transform:uppercase;
}

.hm-editorial-hero__title{
    max-width:820px;

    margin:0 0 18px!important;

    color:#fff!important;

    font-size:48px!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
}

.hm-editorial-hero__intro{
    max-width:720px;

    margin:0!important;

    color:#cbd5e1;

    font-size:16px;
    line-height:1.72;
}

.hm-editorial-hero__meta{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:25px;
}

.hm-editorial-hero__meta span{
    display:inline-flex;
    align-items:center;

    min-height:32px;

    padding:7px 10px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;

    background:rgba(255,255,255,.055);

    color:#e2e8f0;

    font-size:10.5px;
    line-height:1;
    font-weight:750;
}


/* ==========================================================
   CONTENT
   ========================================================== */

.hm-editorial-content{
    padding:70px 0 82px;
}


/* ==========================================================
   TOOLBAR
   ========================================================== */

.hm-editorial-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-bottom:28px;
}

.hm-editorial-toolbar__eyebrow{
    margin-bottom:8px;

    color:var(--hm-blue-600);

    font-size:10px;
    line-height:1;
    font-weight:900;

    letter-spacing:.10em;
    text-transform:uppercase;
}

.hm-editorial-toolbar__title{
    margin:0!important;

    color:var(--hm-text-900);

    font-size:32px!important;
    line-height:1.12!important;
    letter-spacing:-.025em!important;
}


/* ==========================================================
   GRID
   ========================================================== */

.hm-editorial-grid{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:24px;
}


/* ==========================================================
   EMPTY
   ========================================================== */

.hm-editorial-empty{
    max-width:720px;

    margin:0 auto;

    padding:44px;

    border:1px solid var(--hm-border);
    border-radius:var(--hm-radius-lg);

    background:#fff;

    text-align:center;

    box-shadow:var(--hm-shadow-sm);
}

.hm-editorial-empty__eyebrow{
    margin-bottom:10px;

    color:var(--hm-blue-600);

    font-size:10px;
    font-weight:900;

    letter-spacing:.09em;
    text-transform:uppercase;
}

.hm-editorial-empty h2{
    margin-bottom:10px!important;

    font-size:28px!important;
}

.hm-editorial-empty p{
    margin-bottom:22px!important;

    color:var(--hm-text-500);

    font-size:14px;
    line-height:1.7;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:950px){

    .hm-editorial-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:650px){

    .hm-editorial-hero{
        padding:58px 0 60px;
    }

    .hm-editorial-hero__title{
        font-size:38px!important;
    }

    .hm-editorial-hero__intro{
        font-size:15px;
    }

    .hm-editorial-content{
        padding:52px 0 62px;
    }

    .hm-editorial-grid{
        grid-template-columns:1fr;

        gap:18px;
    }

    .hm-editorial-toolbar__title{
        font-size:27px!important;
    }

}


/* ==========================================================
   VERY SMALL
   ========================================================== */

@media(max-width:430px){

    .hm-editorial-hero__title{
        font-size:34px!important;
    }

}


/* ==========================================================
   EDITORIAL A03.3 — ARTICLE COVER RATIO

   Visual-only refinement:
   - keeps archive layout unchanged
   - keeps hm-shell unchanged
   - keeps hero unchanged
   - makes article covers more panoramic
   ========================================================== */

.hm2026-editorial-archive .hm-editorial-card__media{
    aspect-ratio:2 / 1;
}

.hm2026-editorial-archive .hm-editorial-card__image{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* MOBILE */

@media(max-width:650px){

    .hm2026-editorial-archive .hm-editorial-card__media{
        aspect-ratio:16 / 9;
    }

}


/* ==========================================================
   EDITORIAL A03.4 — HERO CONTENT WIDTH
   ========================================================== */

.hm2026-editorial-archive .hm-editorial-hero__inner{
    max-width:980px;
}

.hm2026-editorial-archive .hm-editorial-hero__title{
    max-width:980px;
}

.hm2026-editorial-archive .hm-editorial-hero__intro{
    max-width:900px;
}


/* TABLET */

@media(max-width:950px){

    .hm2026-editorial-archive .hm-editorial-hero__inner,
    .hm2026-editorial-archive .hm-editorial-hero__title,
    .hm2026-editorial-archive .hm-editorial-hero__intro{
        max-width:100%;
    }

}


/* ==========================================================
   EDITORIAL A04 — FINAL ARCHIVE REMEDIATION

   Scope:
   - preserve hm-shell / archive routing
   - preserve 3-column grid
   - no parent-theme edits
   - no shared component base rewrite
   ========================================================== */


/* ----------------------------------------------------------
   HERO TYPOGRAPHY ONLY
   No positioning / width / page-layout override here.
   ---------------------------------------------------------- */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero__eyebrow{
    color:#93c5fd!important;

    font-size:10px!important;
    line-height:1.2!important;
    font-weight:900!important;

    opacity:1!important;
}

body.hm-editorial-archive-active
.hm2026-editorial-archive
h1.hm-editorial-hero__title{
    color:#fff!important;

    font-size:46px!important;
    line-height:1.06!important;
    font-weight:800!important;
    letter-spacing:-.035em!important;

    -webkit-text-fill-color:#fff!important;
    text-shadow:none!important;
}


/* ----------------------------------------------------------
   COVER

   Images may contain embedded text.
   Never crop them.
   ---------------------------------------------------------- */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-card__media{
    display:flex;

    align-items:center;
    justify-content:center;

    aspect-ratio:16 / 9!important;

    overflow:hidden;

    background:#eef3f8;
}

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-card__image{
    display:block;

    width:100%!important;
    height:100%!important;

    object-fit:contain!important;
    object-position:center!important;

    transform:none!important;
}

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-card:hover
.hm-editorial-card__image{
    transform:none!important;
}


/* ----------------------------------------------------------
   CARD BODY
   ---------------------------------------------------------- */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-card__body{
    padding:20px 21px 22px;
}


/* ----------------------------------------------------------
   CARD META
   ---------------------------------------------------------- */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-card__meta{
    gap:8px;

    margin-bottom:13px;

    font-size:10.5px!important;
}


/* ----------------------------------------------------------
   CARD TITLE

   Explicit selector is intentional:
   Azera still has aggressive heading typography.
   ---------------------------------------------------------- */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-card
h2.hm-editorial-card__title{
    display:block!important;

    margin:0 0 11px!important;

    color:var(--hm-text-900)!important;

    font-size:22px!important;
    line-height:1.22!important;
    font-weight:800!important;

    letter-spacing:-.02em!important;
    text-transform:none!important;

    -webkit-text-fill-color:var(--hm-text-900)!important;

    word-break:normal!important;
    overflow-wrap:normal!important;
}

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-card
h2.hm-editorial-card__title a{
    color:inherit!important;

    font:inherit!important;
    line-height:inherit!important;

    text-transform:none!important;
}


/* ----------------------------------------------------------
   EXCERPT

   Server side already limits to 24 words.
   CSS adds a final visual guard.
   ---------------------------------------------------------- */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-card__excerpt{
    display:-webkit-box;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;

    margin:0 0 18px!important;

    color:var(--hm-text-500)!important;

    font-size:13px!important;
    line-height:1.65!important;

    word-break:normal!important;
    overflow-wrap:normal!important;
}


/* ----------------------------------------------------------
   READ LINK
   ---------------------------------------------------------- */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-card__link{
    margin-top:auto;

    font-size:12px!important;
    line-height:1.2!important;
    font-weight:850!important;
}


/* ----------------------------------------------------------
   GRID RHYTHM
   ---------------------------------------------------------- */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-grid{
    align-items:stretch;

    gap:22px;
}

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-card{
    height:100%;
}


/* ----------------------------------------------------------
   ARCHIVE SECTION RHYTHM
   ---------------------------------------------------------- */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-content{
    padding-bottom:68px;
}


/* ----------------------------------------------------------
   REMOVE EMPTY SPACE AFTER FOOTER

   Scoped only to editorial archives.
   The archive itself keeps its white background.
   ---------------------------------------------------------- */

body.hm-editorial-archive-active{
    margin-bottom:0!important;
    padding-bottom:0!important;

    background:var(--hm-navy-950)!important;
}

body.hm-editorial-archive-active #page,
body.hm-editorial-archive-active .site{
    margin-bottom:0!important;
    padding-bottom:0!important;

    background:var(--hm-navy-950)!important;
}

body.hm-editorial-archive-active
.hm-editorial-archive{
    background:var(--hm-bg)!important;
}

body.hm-editorial-archive-active footer{
    margin-bottom:0!important;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:950px){

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-card
    h2.hm-editorial-card__title{
        font-size:21px!important;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:650px){

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    h1.hm-editorial-hero__title{
        font-size:37px!important;
    }

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-card__body{
        padding:18px;
    }

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-card
    h2.hm-editorial-card__title{
        font-size:20px!important;
    }

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-card__excerpt{
        font-size:13px!important;

        -webkit-line-clamp:4;
    }

}


/* ==========================================================
   EDITORIAL A05 — HERO SPACING + BOTTOM BACKGROUND

   Only:
   - vertical breathing room inside archive hero
   - document background after footer

   No card/grid/footer-content changes.
   ========================================================== */


/* ----------------------------------------------------------
   HERO VERTICAL RHYTHM

   Strong selector only for padding.
   No width / position / page wrapper changes.
   ---------------------------------------------------------- */

body.hm-editorial-archive-active
.hm2026-editorial-archive
> .hm-editorial-hero{
    padding-top:62px!important;
    padding-bottom:66px!important;
}


/* Keep internal rhythm clean */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero__title{
    margin-bottom:17px!important;
}

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero__intro{
    margin-bottom:0!important;
}

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero__meta{
    margin-top:24px!important;
}


/* ----------------------------------------------------------
   DOCUMENT BOTTOM

   editorial-archive.css is loaded only in editorial archive
   contexts, so setting html background here does not affect
   Home / Methodology / Guide / single posts.
   ---------------------------------------------------------- */

html{
    background:var(--hm-navy-950)!important;
}

body.hm-editorial-archive-active{
    min-height:100vh;

    margin-bottom:0!important;
    padding-bottom:0!important;

    background:var(--hm-navy-950)!important;
}

body.hm-editorial-archive-active #page,
body.hm-editorial-archive-active .site{
    min-height:100vh;

    margin-bottom:0!important;
    padding-bottom:0!important;

    background:var(--hm-navy-950)!important;
}


/*
 * White remains only where the actual archive content exists.
 */

body.hm-editorial-archive-active
.hm2026-editorial-archive{
    background:var(--hm-bg)!important;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:950px){

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    > .hm-editorial-hero{
        padding-top:56px!important;
        padding-bottom:60px!important;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:650px){

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    > .hm-editorial-hero{
        padding-top:46px!important;
        padding-bottom:50px!important;
    }

}


/* ==========================================================
   EDITORIAL A06 — FINAL HERO SPACING

   Global archive hero spacing.
   Applies to Tutorial, Recensioni Hosting and future
   editorial archive contexts.
   ========================================================== */


/* DESKTOP */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero{
    padding-top:92px!important;
    padding-bottom:78px!important;
}


/*
 * Internal rhythm.
 */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero__title{
    margin-top:0!important;
    margin-bottom:18px!important;
}

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero__intro{
    margin-top:0!important;
    margin-bottom:0!important;
}

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero__meta{
    margin-top:26px!important;
}


/* TABLET */

@media(max-width:950px){

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-hero{
        padding-top:72px!important;
        padding-bottom:68px!important;
    }

}


/* MOBILE */

@media(max-width:650px){

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-hero{
        padding-top:54px!important;
        padding-bottom:56px!important;
    }

}


/* ==========================================================
   EDITORIAL A07 — HERO FINAL BALANCE

   Final archive hero refinement:
   - slightly more vertical breathing room
   - inner content centered inside the main shell
   - text remains left aligned
   ========================================================== */


/* DESKTOP */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero{
    padding-top:104px!important;
    padding-bottom:88px!important;
}


/*
 * Center the editorial block itself without centering
 * typography or changing the global hm-shell.
 */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero__inner{
    width:100%;
    max-width:1080px!important;

    margin-left:auto!important;
    margin-right:auto!important;
}


/*
 * Keep readable line lengths inside the wider centered block.
 */

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero__title{
    max-width:1000px!important;
}

body.hm-editorial-archive-active
.hm2026-editorial-archive
.hm-editorial-hero__intro{
    max-width:920px!important;
}


/* TABLET */

@media(max-width:950px){

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-hero{
        padding-top:78px!important;
        padding-bottom:72px!important;
    }

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-hero__inner{
        max-width:100%!important;
    }

}


/* MOBILE */

@media(max-width:650px){

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-hero{
        padding-top:58px!important;
        padding-bottom:60px!important;
    }

    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-hero__title,
    body.hm-editorial-archive-active
    .hm2026-editorial-archive
    .hm-editorial-hero__intro{
        max-width:100%!important;
    }

}