/* ══════════════════════════════════════
   Akshara Jalakam — Homepage Section (Concept A: "Reading Room")
   Spotlight + index list, matching the Moments / Vaikathukaran rhythm.
   ══════════════════════════════════════ */

.aj-section {
    margin: 44px 0;
    /* This section shares its row with a fixed 320px sidebar on desktop
       (.home-layout-with-sidebar), so its real rendered width is often only
       ~650–820px even on a wide screen — well under the viewport width. A
       viewport media query can't see that; a container query can. */
    container-type: inline-size;
    container-name: aj-section;
}

/* ── Section head: reuses the site's .section-head shape, new accent ── */
.section-head.aj-head {
    border-bottom-color: #7A2331;
}
.section-head.aj-head h2 {
    color: #7A2331;
    display: flex;
    align-items: center;
    gap: 9px;
}
.section-head.aj-head .see-all {
    color: #7A2331 !important;
}
.section-head.aj-head::after {
    background: #7A2331;
}
.aj-kicker {
    font-family: Lora, Georgia, Times, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 12.5px;
    color: #A9782F;
    margin-left: 2px;
}

/* ── Layout: spotlight (left) + index list (right) ── */
.aj-reading-room {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 28px;
    align-items: start;
}

/* ── Spotlight card ── */
.aj-feature {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: #1a2138;
    box-shadow: 0 10px 26px -14px rgba(28, 23, 18, .4);
    transition: transform .2s ease, box-shadow .2s ease;
}
.aj-feature:hover {
    /* Ghost's base theme sets a global, unscoped a:hover{opacity:.8} — left
       alone it would dim this card at the same time it lifts, muddying the
       effect. Neutralize it here so the lift+shadow reads cleanly. */
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -14px rgba(28, 23, 18, .5);
}
.aj-feature-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.aj-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 54px 22px 20px;
    background: linear-gradient(0deg, rgba(10, 8, 6, .92) 0%, rgba(10, 8, 6, .58) 48%, transparent 100%);
}
.aj-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.35;
    text-wrap: balance;
}
.aj-excerpt {
    color: rgba(255, 255, 255, .82);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 12px;
    max-width: 52ch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.aj-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: rgba(255, 255, 255, .68);
}
.aj-meta .aj-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    flex-shrink: 0;
}

/* ── Genre badge (built, hidden — see home.hbs guard comments) ── */
.aj-chip {
    display: inline-flex;
    align-items: center;
    font-family: Lora, Georgia, Times, serif;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .03em;
    color: #fff;
    padding: 3px 9px 3px 8px;
    border-radius: 3px 8px 8px 3px;
    margin-bottom: 10px;
}
.aj-chip.katha { background: #7A2331; }
.aj-chip.kavitha { background: #A9782F; }
.aj-chip.small {
    transform: scale(.9);
    transform-origin: left center;
    margin-bottom: 6px;
}

/* ── Index list (previous issues) ── */
.aj-index-head {
    font-family: Lora, Georgia, Times, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 12.5px;
    color: #A9782F;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid #E4D9C4;
}
.aj-item {
    display: flex;
    gap: 13px;
    padding: 14px 0;
    border-bottom: 1px solid #E4D9C4;
    text-decoration: none;
    color: inherit;
}
.aj-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.aj-item:hover {
    opacity: 1; /* same global a:hover dim, same fix */
}
.aj-item:hover .aj-item-title {
    color: #7A2331;
}
.aj-thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    flex-shrink: 0;
    overflow: hidden;
    background: #1a2138;
}
.aj-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.aj-item-body {
    min-width: 0;
}
.aj-item-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 5px;
    line-height: 1.4;
    color: #1C1712;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transition: color .2s ease;
}
.aj-item-date {
    font-size: 11.5px;
    color: #8a7f68;
    font-family: Lora, Georgia, Times, serif;
}

/* ── Narrow column (mobile, OR the desktop sidebar squeeze): stack ──
   Keyed to this section's own rendered width via a container query, not
   the viewport — see the note on .aj-section above. */
@container aj-section (max-width: 840px) {
    .aj-reading-room {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .aj-overlay {
        padding: 44px 16px 16px;
    }
    .aj-title {
        font-size: 19px;
    }
}
@media (max-width: 600px) {
    .aj-section {
        margin: 32px 0;
    }
    .aj-excerpt {
        display: none; /* keep the mobile card compact — title + meta is enough */
    }
    .aj-overlay {
        padding: 34px 14px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aj-feature,
    .aj-item-title {
        transition: none;
    }
}