/* ─────────────────────────────────────────────
   Layout 07 · Magazine — Standalone Skeleton
───────────────────────────────────────────────── */

:root {
    --bg:         #F4F6FB;
    --surface:    #FFFFFF;
    --text:       #1A1A2E;
    --text-muted: #7E7E9A;
    --border:     #E8E6F0;

    --c-header: #484FFF;   /* indigo */
    --c-nav:    #F59E0B;   /* amber  */
    --c-left:   #16A34A;   /* green  */
    --c-main:   #9333EA;   /* purple */
    --c-right:  #0EA5E9;   /* sky    */
    --c-footer: #E11D48;   /* rose   */

    --sh-mix:    26%;
    --sh-dim:    12%;
    --sh-border: 45%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ══════════════════════════════════════
   LAYOUT (fills viewport)
   ══════════════════════════════════════ */
.layout-wrap {
    width: 100vw;
    height: 100vh;
    padding: 1.25rem;
    overflow-y: auto;
}

.layout {
    width: 100%;
    display: grid;
    gap: 0.75rem;

    /* base: mobile stack — main first, rails below, page scrolls */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
        'header'
        'nav'
        'main'
        'left'
        'right'
        'footer';
}

/* ≥ 640px — 3-col magazine with rails flanking main, locked to viewport */
@media (min-width: 640px) {
    .layout {
        height: 100%;
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            'header header header'
            'nav    nav    nav'
            'left   main   right'
            'footer footer footer';
    }
    .sk--hero { flex: 1; }
}

.region { min-height: 0; min-width: 0; }

/* ══════════════════════════════════════
   REGIONS
   ══════════════════════════════════════ */
.region {
    --hue: var(--c-main);
    position: relative;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--hue) 6%, var(--surface)) 0%,
            var(--surface) 100%);
    border: 1px dashed color-mix(in srgb, var(--hue) var(--sh-border), transparent);
    border-radius: 0.8rem;
    padding: 1.6rem 0.9rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.region__tag {
    position: absolute;
    top: -0.6rem;
    left: 0.9rem;
    z-index: 1;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #fff;
    background: var(--hue);
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--hue) 35%, transparent);
    line-height: 1;
}

.region--header { grid-area: header; --hue: var(--c-header); flex-direction: row; align-items: center; gap: 0.6rem; padding: 1.2rem 1rem 0.7rem; }
.region--nav    { grid-area: nav;    --hue: var(--c-nav);    flex-direction: row; align-items: center; gap: 0.6rem; padding: 1.2rem 1rem 0.7rem; }
.region--left   { grid-area: left;   --hue: var(--c-left); }
.region--main   { grid-area: main;   --hue: var(--c-main); }
.region--right  { grid-area: right;  --hue: var(--c-right); }
.region--footer { grid-area: footer; --hue: var(--c-footer); flex-direction: row; align-items: center; gap: 0.6rem; padding: 1.2rem 1rem 0.7rem; }

/* ══════════════════════════════════════
   MAIN — featured + popular posts
   ══════════════════════════════════════ */
.region--main {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.75rem;
    padding: 1.6rem 0.9rem 0.9rem;
}

@media (min-width: 640px) {
    .region--main { grid-template-rows: 1fr auto; }
}

.feature,
.popular {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0.7rem 0.7rem;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--hue) 5%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--hue) 32%, transparent);
    min-height: 0;
    min-width: 0;
}

.feat__tag {
    position: absolute;
    top: -0.5rem;
    left: 0.7rem;
    z-index: 1;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--hue);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--hue) 35%, transparent);
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    line-height: 1;
}
.feat__tag--alt {
    color: #fff;
    background: color-mix(in srgb, var(--hue) 70%, transparent);
    border-color: transparent;
}

.pop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    min-height: 0;
}


.pop-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem;
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--hue) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--hue) 22%, transparent);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* ══════════════════════════════════════
   ARTICLES (left / right rails)
   ══════════════════════════════════════ */
.article {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--hue) 5%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--hue) 22%, transparent);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

@media (min-width: 640px) {
    .article {
        flex: 1;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        padding: 0.6rem 0.5rem 0.7rem;
    }
}

/* ══════════════════════════════════════
   SKELETON PRIMITIVES
   ══════════════════════════════════════ */
.sk {
    display: block;
    background: color-mix(in srgb, var(--hue) var(--sh-mix), transparent);
    border-radius: 999px;
}
.sk--dim { background: color-mix(in srgb, var(--hue) var(--sh-dim), transparent); }

.sk--hero {
    min-height: 6rem;
    border-radius: 0.5rem;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--hue) 22%, transparent),
            color-mix(in srgb, var(--hue) 10%, transparent) 70%);
    border: 1px solid color-mix(in srgb, var(--hue) 28%, transparent);
}

.sk--bar    { height: 0.65rem; width: 5rem; border-radius: 4px; }
.sk--w-40   { width: 40%; }
.sk--w-50   { width: 50%; }
.sk--w-60   { width: 60%; }
.sk--grow   { flex: 1; }

.sk--dot    { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hue); flex-shrink: 0; }
.sk--dot-lg { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: color-mix(in srgb, var(--hue) var(--sh-mix), transparent); flex-shrink: 0; }
.sk--sq     { width: 0.85rem; height: 0.85rem; border-radius: 4px; flex-shrink: 0; }
.sk--pill   { width: 3.2rem; height: 1.1rem; border-radius: 999px; }

.sk--search {
    flex: 1;
    height: 1.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hue) 10%, transparent);
    border: 1px dashed color-mix(in srgb, var(--hue) var(--sh-border), transparent);
}

.sk--spacer { flex: 1; background: transparent; }

.sk--block {
    height: 2.2rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--hue) 14%, transparent);
    border: 1px dashed color-mix(in srgb, var(--hue) var(--sh-border), transparent);
}

.sk--card {
    height: 3rem;
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--hue) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--hue) 28%, transparent);
}

/* thumbnail rectangle for article list items */
.sk--thumb {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 0.35rem;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--hue) 20%, transparent),
            color-mix(in srgb, var(--hue) 9%, transparent) 70%);
    border: 1px solid color-mix(in srgb, var(--hue) 25%, transparent);
}

@media (min-width: 640px) {
    .sk--thumb {
        width: 100%;
        height: auto;
        flex-shrink: 1;
        flex: 1;
        aspect-ratio: 16 / 9;
        border-radius: 0.4rem;
        min-height: 0;
    }
}

/* square thumb for popular-post cards */
.sk--sq-lg {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0.4rem;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--hue) 22%, transparent),
            color-mix(in srgb, var(--hue) 10%, transparent) 70%);
    border: 1px solid color-mix(in srgb, var(--hue) 25%, transparent);
    min-height: 0;
}

.sk--chart {
    flex: 1;
    min-height: 4rem;
    border-radius: 0.5rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--hue) 18%, transparent), transparent 80%),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 0.9rem,
            color-mix(in srgb, var(--hue) 14%, transparent) 0.9rem,
            color-mix(in srgb, var(--hue) 14%, transparent) calc(0.9rem + 1px)
        );
    border: 1px solid color-mix(in srgb, var(--hue) 28%, transparent);
}

.sk-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.sk-row--between { justify-content: space-between; }