/*
 * Yadaj homepage stylesheet: lead composition, index rail, shelves, consulted list and the section atlas.
 *
 * Developer: MexTech Limited
 * Licenced: Yadaj software is officially licenced and authorized to be used from MexTech Limited
 * Copyright: © 2026 All Rights Reserved, MexTech Limited (https://mextechltd.name.ng)
 */

.masthead {
    padding-top: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-2);
}

.masthead__tagline {
    max-width: 68ch;
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--ink-2);
}

.masthead__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.masthead__topics {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-top: 11px;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.masthead__topics::-webkit-scrollbar {
    display: none;
}

.chip-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    white-space: nowrap;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ink-2);
    transition: border-color .16s ease, color .16s ease;
}

.chip-link:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.chip-link__count {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--accent);
}

.lead {
    padding-top: 26px;
}

.lead__figure {
    display: block;
    margin: 0 calc(var(--gutter) * -1) 18px;
    aspect-ratio: 16 / 10;
    background: var(--paper-3);
    overflow: hidden;
}

.lead__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lead__figure-fallback {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding: 22px;
    font-family: var(--sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 11px, var(--stripe) 11px, var(--stripe) 12px);
}

.lead__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.lead__badge {
    padding: 3px 7px;
    background: var(--accent-bg);
    color: var(--on-accent);
    letter-spacing: .12em;
}

.lead__title {
    margin-top: 12px;
    font-family: var(--serif);
    font-size: clamp(1.7rem, 7.4vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: -.02em;
}

.lead__title a {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-size: 0 2px;
    background-position: 0 100%;
    transition: background-size .3s ease;
}

.lead__dek {
    margin-top: 14px;
    font-size: 1rem;
    line-height: 1.7;
}

.lead__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.lead__meta {
    display: flex;
    gap: 8px;
    font-size: .75rem;
    color: var(--ink-3);
}

.lead__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}

.lead__rail {
    margin-top: 32px;
    padding-top: 14px;
    border-top: 1px solid var(--ink);
}

.rail__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-2);
}

.rail__head h2 {
    font-family: var(--sans);
    font-size: .6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
}

.rail__count {
    color: var(--accent);
}

.index__link {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.index__title {
    display: block;
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.3;
}

.index__meta {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: var(--ink-3);
}

.rail__more {
    flex: none;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--accent);
    font-size: .6875rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ink);
}

.spread {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding-bottom: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.spread::-webkit-scrollbar {
    display: none;
}

.spread .card {
    flex: 0 0 80%;
    scroll-snap-align: start;
}

.card__figure {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--paper-3);
    overflow: hidden;
}

.card__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.card__kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: .5625rem;
}

.card__dot {
    color: var(--line-2);
}

.card__title {
    margin-top: 8px;
    font-family: var(--serif);
    font-size: 1.1875rem;
    line-height: 1.22;
    letter-spacing: -.01em;
}

.card__dek {
    margin-top: 8px;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ink-3);
}

.card__meta {
    margin-top: 10px;
    font-size: .5625rem;
}

.card__sep {
    margin: 0 7px;
    color: var(--line-2);
}

.card--textonly .card__text {
    border-top: 2px solid var(--accent);
    padding-top: 12px;
}

.shelves {
    display: grid;
    gap: 32px;
    margin-top: 38px;
}

.shelf {
    min-width: 0;
}

.shelf__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ink);
}

.shelf__title {
    font-family: var(--serif);
    font-size: 1.25rem;
    letter-spacing: -.018em;
}

.shelf__all {
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ink-3);
}

.shelf__all:hover {
    color: var(--accent);
}

.row__link {
    display: grid;
    grid-template-columns: 1fr 76px;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.row__title {
    display: block;
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.28;
}

.row__meta {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: var(--ink-3);
}

.row__thumb {
    width: 76px;
    height: 58px;
    background: var(--paper-3);
    overflow: hidden;
}

.row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.consulted {
    margin-top: 52px;
    padding-top: 28px;
    border-top: 1px solid var(--ink);
}

.consulted__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.consulted__title {
    font-family: var(--serif);
    font-size: 1.75rem;
    letter-spacing: -.02em;
}

.consulted__note {
    font-size: .5625rem;
}

.consulted__item a {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.consulted__name {
    display: block;
    font-family: var(--serif);
    font-size: 1.125rem;
    line-height: 1.25;
}

.consulted__meta {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: var(--ink-3);
}

.atlas {
    margin-top: 52px;
}

.atlas__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.atlas__title {
    font-family: var(--serif);
    font-size: 1.75rem;
    letter-spacing: -.02em;
}

.atlas__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.atlas__cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
    background: var(--paper);
    transition: background-color .18s ease;
}

.atlas__name {
    font-family: var(--serif);
    font-size: 1.0625rem;
}

.atlas__count {
    font-size: .5625rem;
    color: var(--accent);
}

.atlas__desc {
    font-size: .75rem;
    line-height: 1.5;
    color: var(--ink-3);
}

@media (min-width: 640px) {
    .home__mast {
        padding-top: 40px;
    }

    .home__h1 {
        font-size: clamp(3.6rem, 8.5vw, 4.6rem);
        letter-spacing: -.034em;
        text-wrap: balance;
    }

    .home__h1-sub {
        font-size: 1rem;
    }

    .lead {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 28px;
        padding-top: 34px;
    }

    .lead__figure {
        margin: 0 0 18px;
    }

    .lead__rail {
        margin-top: 0;
    }

    .spread {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px;
        overflow: visible;
    }

    .spread .card {
        flex: none;
    }

    .shelves {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 32px;
    }

    .atlas__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .atlas__cell {
        padding: 20px 18px;
    }
}

@media (min-width: 1024px) {
    .home__mast {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        grid-template-areas: "top top" "h1 bottom";
        gap: 14px 56px;
        align-items: end;
        padding-top: 56px;
        padding-bottom: 38px;
    }

    .home__mast-top {
        grid-area: top;
    }

    .home__edition {
        display: block;
    }

    .home__h1 {
        grid-area: h1;
        margin-top: 10px;
        font-size: clamp(4rem, 6.4vw, 5.6rem);
        letter-spacing: -.038em;
        text-wrap: balance;
    }

    .home__h1-sub {
        margin-top: 18px;
        max-width: 30ch;
        font-size: 1.0625rem;
    }

    .home__mast-bottom {
        grid-area: bottom;
        margin-top: 0;
        padding-bottom: 6px;
    }

    .home__note {
        font-size: 1rem;
    }

    .home__flags {
        flex-wrap: wrap;
        overflow: visible;
        margin-top: 24px;
    }

    .lead {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 48px;
        padding-top: 42px;
    }

    .lead__figure {
        aspect-ratio: 16 / 9;
    }

    .lead__title {
        font-size: clamp(2rem, 2.7vw, 2.7rem);
        letter-spacing: -.028em;
        text-wrap: balance;
    }

    .lead__rail {
        padding-left: 36px;
        border-top: 0;
        border-left: 1px solid var(--line);
        padding-top: 4px;
    }

    .index__link {
        grid-template-columns: 34px 1fr;
        padding: 15px 0;
    }

    .index__title {
        font-size: 1.125rem;
    }

    .spread {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }

    .shelves {
        gap: 52px 48px;
        margin-top: 56px;
    }

    .shelf__title {
        font-size: 1.75rem;
    }

    .row__link {
        grid-template-columns: 1fr 88px;
        gap: 14px;
        padding: 16px 0;
    }

    .row__thumb {
        width: 88px;
        height: 66px;
    }

    .row__title {
        font-size: 1.125rem;
    }

    .consulted {
        margin-top: 72px;
        padding-top: 34px;
    }

    .consulted__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 44px;
    }

    .consulted__title {
        font-size: 2.125rem;
    }

    .atlas {
        margin-top: 68px;
    }

    .atlas__title {
        font-size: 2.125rem;
    }

    .atlas__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .atlas__name {
        font-size: 1.1875rem;
    }

    .card__title {
        font-size: 1.3125rem;
    }
}

@media (min-width: 1500px) {
    .home__mast {
        gap: 20px 80px;
    }

    .home__h1 {
        font-size: clamp(5.2rem, 5.6vw, 6.6rem);
        letter-spacing: -.042em;
        text-wrap: balance;
    }

    .lead {
        grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
        gap: 72px;
    }

    .lead__title {
        font-size: clamp(2.4rem, 2.5vw, 3rem);
        letter-spacing: -.03em;
        text-wrap: balance;
    }

    .shelves {
        gap: 64px 80px;
    }

    .shelf__list .row__link {
        padding: 18px 0;
    }

    .atlas__desc {
        font-size: .8125rem;
    }
}

@media (hover: hover) {
    .lead__title a:hover,
    .lead__cta:hover {
        color: var(--accent);
        background-size: 100% 2px;
    }

    .card:hover .card__title,
    .shelf__all:hover,
    .rail__more:hover {
        color: var(--accent);
    }

    .flag:hover {
        border-color: var(--ink);
    }
}