/*
 * Journal cards and long-form article typography.
 *
 * The articles are 5k–11k characters of real editorial, so the reading column
 * is measured for line length rather than filling the grid.
 */

/* ------------------------------------------------------------------ cards ---*/

.af-article-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.af-article-card {
    background: #fff;
    border: 1px solid var(--v2-line, #e0e6ef);
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(20, 35, 65, .07);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow var(--motion-shadow, 320ms) var(--ease-premium, ease),
                transform var(--motion-normal, 300ms) var(--ease-premium, ease);
}

.af-article-card:hover {
    box-shadow: 0 18px 38px rgba(20, 35, 65, .15);
    transform: translateY(-3px);
}

.af-article-card:focus-within {
    box-shadow: 0 0 0 3px rgba(42, 52, 132, .22), 0 16px 35px rgba(20, 35, 65, .12);
}

.af-article-card-media {
    background: #eef4fc;
    display: block;
    overflow: hidden;
    /* Fixed ratio so a mixed set of hero images produces an even grid. */
    aspect-ratio: 16 / 10;
}

.af-article-card-media img {
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-slow, 480ms) var(--ease-premium, ease);
    width: 100%;
}

.af-article-card:hover .af-article-card-media img {
    transform: scale(1.04);
}

.af-article-card-placeholder {
    align-items: center;
    color: var(--aleafiaa-blue, #2a3484);
    display: flex;
    font-size: 2rem;
    height: 100%;
    justify-content: center;
    opacity: .45;
}

.af-article-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.35rem;
}

.af-article-card-meta {
    color: var(--v2-muted, #5c6675);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 .55rem;
    text-transform: uppercase;
}

.af-article-card-meta span {
    margin: 0 .35rem;
    opacity: .55;
}

.af-article-card-title {
    font-size: 1.14rem;
    font-weight: 850;
    letter-spacing: -.025em;
    line-height: 1.3;
    margin: 0 0 .6rem;
}

.af-article-card-title a {
    color: var(--v2-ink, #121b31);
    text-decoration: none;
}

.af-article-card-title a:hover { text-decoration: underline; }

/* The whole card is clickable, but only the title is in the tab order — the
   media link is aria-hidden, so screen readers get one link per card. */
.af-article-card-title a::after {
    content: '';
    inset: 0;
    position: absolute;
}

.af-article-card { position: relative; }

.af-article-card-excerpt {
    color: var(--v2-muted, #5c6675);
    font-size: .87rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.af-article-card-cta {
    color: var(--aleafiaa-blue, #2a3484);
    font-size: .82rem;
    font-weight: 800;
    margin-top: auto;
}

.af-article-card-cta i {
    margin-left: .3rem;
    transition: transform var(--motion-fast, 220ms) var(--ease-premium, ease);
}

.af-article-card:hover .af-article-card-cta i { transform: translateX(3px); }

/* -------------------------------------------------------------- article ---*/

.af-article-page {
    background: #f7f9fd;
    padding: 3.5rem 0 5.5rem;
}

.af-article-header {
    margin: 0 auto 2rem;
    max-width: 46rem;
}

.af-article-meta {
    color: var(--v2-muted, #5c6675);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .03em;
    margin: 0 0 .8rem;
    text-transform: uppercase;
}

.af-article-title {
    color: var(--v2-ink, #121b31);
    font-size: clamp(2rem, 4.2vw, 3.3rem);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1.08;
    margin: 0 0 1rem;
}

.af-article-standfirst {
    color: #3d4759;
    font-size: 1.08rem;
    line-height: 1.7;
    margin: 0;
}

.af-article-hero {
    margin: 0 auto 2.5rem;
    max-width: 60rem;
}

.af-article-hero img {
    border-radius: 22px;
    height: auto;
    width: 100%;
}

.af-article-body {
    background: #fff;
    border: 1px solid var(--v2-line, #e0e6ef);
    border-radius: 24px;
    color: #333d4f;
    /* ~68 characters: comfortable for sustained reading. */
    font-size: 1.02rem;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 46rem;
    padding: 2.5rem;
}

.af-article-body > :first-child { margin-top: 0; }
.af-article-body > :last-child { margin-bottom: 0; }

.af-article-body p { margin: 0 0 1.15rem; }

.af-article-body :is(h2, h3, h4) {
    color: var(--v2-ink, #121b31);
    font-weight: 850;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.af-article-body h2 { font-size: 1.5rem; margin: 2.4rem 0 .9rem; }
.af-article-body h3 { font-size: 1.2rem; margin: 2rem 0 .7rem; }
.af-article-body h4 { font-size: 1.03rem; margin: 1.6rem 0 .6rem; }

.af-article-body :is(ul, ol) { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.af-article-body li { margin-bottom: .5rem; }
.af-article-body strong { color: var(--v2-ink, #121b31); font-weight: 750; }

.af-article-body a {
    color: var(--aleafiaa-blue, #2a3484);
    text-underline-offset: .16em;
}

.af-article-body img {
    border-radius: 14px;
    height: auto;
    margin: 1.6rem 0;
    max-width: 100%;
}

.af-article-body blockquote {
    border-left: 3px solid var(--aleafiaa-green, #0c705b);
    color: #2b3444;
    font-size: 1.05rem;
    margin: 1.8rem 0;
    padding: .25rem 0 .25rem 1.15rem;
}

.af-article-body table {
    display: block;
    font-size: .9rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    width: 100%;
}

.af-article-body :is(th, td) {
    border: 1px solid var(--v2-line, #e0e6ef);
    padding: .55rem .7rem;
    text-align: left;
}

.af-article-body th { background: #f6f8fc; font-weight: 800; }

.af-article-body hr {
    border: 0;
    border-top: 1px solid var(--v2-line, #e0e6ef);
    margin: 2.2rem 0;
}

/* -------------------------------------------------------------- related ---*/

.af-article-related {
    margin: 4rem auto 0;
    max-width: 72rem;
}

.af-article-related h2 {
    color: var(--v2-ink, #121b31);
    font-size: 1.4rem;
    font-weight: 850;
    letter-spacing: -.03em;
    margin: 0 0 1.4rem;
}

/* ----------------------------------------------------------- responsive ---*/

@media (max-width: 991.98px) {
    .af-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .af-article-grid { grid-template-columns: 1fr; gap: 1.15rem; }
    .af-article-page { padding: 2.5rem 0 3.5rem; }
    .af-article-body { border-radius: 18px; font-size: .98rem; padding: 1.4rem; }
    .af-article-body h2 { font-size: 1.3rem; }
    .af-article-hero img { border-radius: 16px; }
    .af-article-related { margin-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .af-article-card,
    .af-article-card-media img,
    .af-article-card-cta i { transition: none !important; }
    .af-article-card:hover,
    .af-article-card:hover .af-article-card-media img,
    .af-article-card:hover .af-article-card-cta i { transform: none !important; }
}