/* ============================================
   News detail page, "article look"
   Used for every article except "For Sale" and "PromptShares" (see Detail.html).

   Order on the page:  framed artwork -> caption -> category + date -> venue -> title -> lead -> text
   The artwork is the first image of the article text. TYPO3 renders it inside the content element
   (after title and lead), so the wrappers around it are flattened with display: contents and the
   image is moved to the top with `order`. Nothing is hidden or duplicated.
   ============================================ */

.article-detail {
    --ad-purple: #9b59b6;
    --ad-text: #2c2c2c;
    --ad-muted: #6b6b6b;
    --ad-line: #eadff0;

    display: flex;
    flex-direction: column;
    max-width: 720px;
    margin: 0 auto 2rem;
}

/* ---- flatten the content element wrappers so the artwork can move to the top ---- */
.article-detail .article-body,
.article-detail .article-body > .frame,
.article-detail .article-body .ce-textpic,
.article-detail .article-body .ce-bodytext {
    display: contents;
}

/* ---- artwork ---- */
.article-detail .article-body .ce-textpic .ce-gallery {
    order: -2;
    float: none;
    width: min(100%, 460px);
    margin: 0 auto 0.75rem;
    overflow: visible;
}

.article-detail .article-body .ce-textpic .ce-row,
.article-detail .article-body .ce-textpic .ce-column {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.article-detail .article-body .ce-textpic .ce-gallery figure {
    margin: 0;
    padding: 0.6rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(155, 89, 182, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.article-detail .article-body .ce-textpic .ce-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.article-artwork-caption {
    order: -1;
    margin: 0 0 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--ad-muted);
}

/* the caption belongs to the artwork: no artwork, no caption */
.article-detail:not(:has(.ce-gallery)) .article-artwork-caption {
    display: none;
}

/* ---- category, date, venue ---- */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.9rem;
    margin: 0 0 0.35rem;
}

.article-date {
    font-size: 0.9rem;
    color: var(--ad-muted);
}

.article-venue {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem 0.9rem;
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    color: var(--ad-muted);
}

.article-venue span + span::before {
    content: "\00B7";
    margin-right: 0.9rem;
}

/* Category badge: same colours as the cards in the lists (updates_list.css) */
.article-detail .badge-category {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #78909c, #607d8b);
}

.article-detail .badge-category.updates {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.article-detail .badge-category.open-calls {
    background: linear-gradient(135deg, #4caf50, #45a049);
}

.article-detail .badge-category.nfts {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.article-detail .badge-category.shop {
    background: linear-gradient(135deg, #ef6c57, #e0533d);
}

/* ---- title and lead ---- */
.article-detail .header h1 {
    margin: 0.75rem 0 1rem;
    text-align: center;
    font-size: clamp(1.6rem, 3.2vw, 2.15rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ad-text);
}

.article-detail .article-lead {
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ad-line);
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #444;
}

.article-detail .article-lead p {
    margin: 0;
}

/* ---- text ---- */
.article-detail .article-body p,
.article-detail .article-body ul,
.article-detail .article-body ol,
.article-detail .article-body blockquote {
    font-size: 1.05rem;
    line-height: 1.75;
}

.article-detail .article-body blockquote {
    margin: 1.25rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--ad-purple);
}

/* embeds in the text (slideshows) use the full reading width */
.article-detail .article-body iframe {
    width: 100%;
    max-width: 100%;
}

/* ---- footer: tags, author, back link ---- */
.article-detail .footer,
.article-detail .news-backlink-wrap {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--ad-muted);
}