/* =====================================================================
   Article detail — page-specific styles, loaded ONLY on the article
   detail view (articles/article/index.volt, via its block headStyles).
   The shared two-column shell (hero-section banner, .detail-page-header
   identity, .detail-content__body card, lift) lives in
   article-aside-layout.css, and the aside panel chrome now comes from the
   shared partials/detail-aside-panel (.contact-section-* hooks). This file
   adds only: the compact author byline pill, the lead image of the body, and
   the "Latest Articles" list cards that fill the panel body. Colours are
   explicit (dark on the always-white cards) so they read in dark mode too.
   ===================================================================== */

/* Shorter hero band for articles — the brand-color strip (variant 'band') is
   60vh by default (matches the full image hero). Articles have no banner photo,
   so shrink it: a lower band bottom edge pulls the lifted title/byline up with
   it, trimming the empty brand-color space above the title. 45vh is near the
   floor — the article column lifts -29rem, so going shorter pulls the title's
   top up into the breadcrumb band. Scoped to the article via the
   hero-section--compact modifier (extraClass) so the listing/project empty-state
   band keeps 60vh.

   DESKTOP ONLY: on mobile the article column lifts a much larger -25rem and
   titles wrap to several lines, so a 45vh band crowds the title against the
   breadcrumb. Mobile keeps the base 60vh band (the original, comfortable height). */
@media (min-width: 1024px) {
    /* Override the shared --hero-band-h on the band element; its __inner
       descendant inherits it (var defined in article-aside-layout.css :root). */
    .hero-section--compact {
        --hero-band-h: 45vh;
    }
}

/* Author byline — compact pill that hugs its content (avatar + name + date),
   left-aligned under the page header. NOT full-width. */
.article-byline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: auto;
    max-width: 100%;
    margin-top: 1rem;
    padding: .5rem 1rem;
    background: rgba(255, 255, 255, .95);
    color: #1a1a1a;
    border-radius: 9999px;
    font-size: .875rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.article-byline__avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
}
.article-byline__author { font-weight: 600; color: var(--brand-primary, var(--primaryColor, #c28563)); }
.article-byline__sep    { color: #9ca3af; }
.article-byline__date   { color: #6b7280; }

/* Mobile: pull the byline up under the subtitle. The article's space-y-8 (2rem)
   stacks on the header's 1.25rem bottom padding, leaving a big empty brand-color
   gap on the tall 60vh mobile band. The id-child selector out-specifies the
   space-y-8 utility. Desktop keeps its spacing. */
@media (max-width: 1023px) {
    #detail-content > .article-byline {
        margin-top: 0;
    }
}

/* Lead image of the article body — moved out of the hero background. */
.article-featured-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .5rem;
    margin-bottom: 1.5rem;
}

.article-aside-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.article-aside-card {
    display: flex;
    gap: .75rem;
    align-items: center;
}
.article-aside-card__thumb {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    border-radius: .5rem;
    overflow: hidden;
}
.article-aside-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-aside-card__title {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-aside-card:hover .article-aside-card__title { color: var(--brand-primary, var(--primaryColor, #c28563)); }
.article-aside-card__date {
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: #6b7280;
}

/* Programmatic author card + disclaimer (article footer). Markup: shared
   common/articles/author-card partial. */
.author-card-wrap { margin-top: 2rem; }
.author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.author-card__avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 9999px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}
.author-card__body { min-width: 0; }
.author-card__name { margin: 0; font-weight: 600; color: var(--color-neutral-900, #111827); }
.author-card__title { margin: 0; font-size: .875rem; color: var(--brand-primary, var(--primaryColor, #c28563)); }
.author-card__agency { margin: .25rem 0 0; font-size: .875rem; color: #4b5563; }
.author-card__meta { margin: .125rem 0 0; font-size: .75rem; color: #9ca3af; }
.article-disclaimer {
    margin-top: 1.25rem;
    font-size: .75rem;
    line-height: 1.6;
    color: #9ca3af;
}
.article-disclaimer strong { color: #6b7280; font-weight: 600; }