/* ==========================================================
   AS.PAGE.ART.1.3 — Art / EON Hero Image Fit + Readability Refinement
   REPLACE /art-page.css WITH THIS FILE
   ========================================================== */

/* --------------------------
   HERO
   -------------------------- */

.art-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 56px;
    align-items: center;
}

.art-hero__visual {
    aspect-ratio: 4 / 3;
    min-height: 0;
    overflow: hidden;
}

/* Make the resolved Visual CMS image fully occupy the slot */
.art-hero__visual picture {
    display: block;
    width: 100%;
    height: 100%;
}

.art-hero__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Prevent the striped placeholder background from showing around a live image */
.art-hero__visual:has(picture),
.art-hero__visual:has(img) {
    background: none !important;
    border: 0 !important;
}


/* --------------------------
   HIP HOP CUBISM / DARK AREA
   -------------------------- */

section.dark-section,
.dark-section {
    background: #0d0d0d !important;
    color: #f2f2f0 !important;
}

.dark-section .container,
.dark-section .split,
.dark-section .prose,
.dark-section .art-hhc {
    color: #f2f2f0 !important;
}

/* Headings */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section .page-title,
.dark-section .prose h1,
.dark-section .prose h2,
.dark-section .prose h3 {
    color: #ffffff !important;
}

/* Kicker / eyebrow */
.dark-section .kicker,
.dark-section .prose .kicker {
    color: #d8d4cc !important;
}

/* Body text — intentionally explicit to defeat global prose rules */
.dark-section p,
.dark-section .prose p,
.dark-section .container p,
.dark-section .split p,
section.dark-section p {
    color: #d9d9d6 !important;
    opacity: 1 !important;
}

/* Emphasis */
.dark-section strong,
.dark-section b,
.dark-section em {
    color: #ffffff !important;
}

/* Links */
.dark-section a {
    color: #ffffff !important;
}

.dark-section a:hover,
.dark-section a:focus {
    color: #d8d4cc !important;
}

/* Dark fallback placeholder */
.dark-section .placeholder,
.dark-section .placeholder.dark {
    background: #181818 !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #d9d9d6 !important;
}

.dark-section .placeholder span,
.dark-section .placeholder p,
.dark-section .placeholder strong,
.dark-section .placeholder.dark span,
.dark-section .placeholder.dark p,
.dark-section .placeholder.dark strong {
    color: #f1f1ef !important;
    opacity: 1 !important;
}

.art-hhc {
    align-items: center;
}


/* --------------------------
   GALLERY
   -------------------------- */

.art-gallery-section {
    background: #f3f0ea;
}

.art-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 22px;
}

.art-gallery-card {
    margin: 0;
    min-width: 0;
}

.art-gallery-card__visual {
    aspect-ratio: 4 / 3;
    min-height: 0;
    overflow: hidden;
}

.art-gallery-card__visual picture,
.art-gallery-card__visual img {
    display: block;
    width: 100%;
    height: 100%;
}

.art-gallery-card__visual img {
    object-fit: cover;
}

.art-gallery-card figcaption {
    padding-top: 12px;
    font-size: 14px;
    line-height: 1.45;
}

.art-gallery-card figcaption strong,
.art-gallery-card figcaption span {
    display: block;
}

.art-gallery-card figcaption span {
    margin-top: 3px;
    color: #707070;
}


/* --------------------------
   RESPONSIVE
   -------------------------- */

@media (max-width: 980px) {
    .art-hero__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .art-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .art-gallery-grid {
        grid-template-columns: 1fr;
    }

    .art-hero__visual {
        aspect-ratio: 4 / 5;
    }
}