/* Import global styles */
/* main.css loaded via gallery-core-css + gallery-deferred-css — do not re-import */

body {
    background-color: var(--color-background-dark);
}

button, a{
    font-family: var(--font-family-base);
    cursor: pointer;
}

/* Reuse the feedback modal presentation for profile reports. */
#report-profile-modal .file-upload {
    padding: 16px;
    border: 1px solid var(--color-accent);
}

#report-profile-modal .file-icon {
    width: 19px;
    height: 19px;
}

@media (min-width: 1920px) {
    .artist-profile-main-container {
        max-width: 1920px;
        margin: 0 auto;
        transition: .6s all;
        width: auto;
    }
}

/*  */
.artist-profile-main-container {
    margin-bottom: 100px;
    padding: 40px 80px 0 !important;
    gap: var(--spacing-9xl);
    display: flex;
    flex-direction: column;
    /* Full-bleed gallery uses negative margins — clip so the PAGE doesn't grow sideways.
       Do NOT set max-width:100% here — it would override the 1920 cage (source order). */
    overflow-x: clip;
    min-width: 0;
}

.artist-banner.artist-banner--fallback::before {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
    background-color: var(--color-background-dark);
}

.artist-profile-avatar--fallback,
.artist-profile-card-avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background:
        radial-gradient(circle at 50% 35%, rgba(234, 241, 255, 0.14), transparent 42%),
        #1A202D;
    border: 1px solid rgba(234, 241, 255, 0.14);
    color: rgba(234, 241, 255, 0.84);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0;
}

.large-banner__photo.artist-profile-avatar--fallback,
.about-artist__profile--img.artist-profile-avatar--fallback {
    font-size: clamp(42px, 7vw, 86px);
}

.artist-profile-card-avatar--fallback {
    font-size: var(--font-size-b-12);
}

.artist-profile-media--fallback {
    background:
        radial-gradient(circle at 50% 38%, rgba(234, 241, 255, 0.10), transparent 34%),
        linear-gradient(145deg, rgba(234, 241, 255, 0.08), rgba(234, 241, 255, 0.03)),
        var(--color-secondary);
}


/* Artist Profile Navigation Styles */
.artist-profile-nav {
    z-index: 1;
}

/* Above .header (z-index: 2) so the open search field isn't covered by banner actions */
.artist-profile-nav--search-open {
    z-index: 5;
    position: relative;
    border-color: var(--color-primary);
}

.artist-artworks__body {
    min-width: 0;
}

.artist-artworks__body > .filter.active {
    flex: 0 0 380px;
    width: 380px;
    max-width: 100%;
}

/* Wider columns than Explore. Cap the media box, not the metadata row.
   1.35× the card width still fits a normal portrait; taller files shrink
   inside the box and stay fully visible. */
.artist-artworks__results .discover-view__grid {
    --artwork-media-max-ratio: 1.35;
}

.artist-artworks__results .discover-view__grid .discover-view__image-wrap {
    width: min(100%, 34rem);
    min-width: 0;
    max-width: min(100%, 34rem);
}

.artist-artworks__results {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.artwork-filters-summary__badges {
    background-color: var(--color-deep-sapphire-blue);
}

.artist-artworks__body .filter__section:not(.d-none):not(:has(~ .filter__section:not(.d-none))) {
    padding-bottom: 0;
    border-bottom: 0;
}

.artist-profile-nav {
    --artist-profile-nav-tab-pad-x: var(--spacing-5xl);
    position: relative;
    min-height: 0;
    height: auto;
    border: 1px solid transparent;
    /* Quiet baseline so the active indicator feels connected to the bar */
    /* box-shadow: inset 0 -1px 0 var(--color-accent); */
}

.artist-profile-nav__container {
    min-height: var(--spacing-9xl);
    height: auto;
    align-items: stretch; /* tabs fill bar height → indicator sits on nav bottom */
    gap: var(--spacing-md);
    min-width: 0;
}

.artist-profile-nav__tabs {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    align-self: stretch;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.artist-profile-nav__tabs::-webkit-scrollbar {
    display: none;
}

.artist-profile-nav__search {
    flex: 0 0 auto;
    align-self: center;
    width: auto !important;
    min-width: 0;
}

.artist-profile-nav--search-open .artist-profile-nav__search {
    flex: 1 1 auto;
    width: 100% !important;
}

.artist-profile-nav--search-open .artist-profile-nav__search-form {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.artist-profile-nav--search-open .artist-profile-nav__search-field {
    width: 100%;
    min-width: 0;
    gap: var(--spacing-sm);
}

.artist-profile-nav__search-icon {
    flex: 0 0 auto;
    color: var(--color-secondary-alt);
    pointer-events: none;
}

.artist-profile-nav--search-open .artist-profile-nav__search-field .input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.artist-profile-nav__tab {
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding-left: var(--artist-profile-nav-tab-pad-x);
    padding-right: var(--artist-profile-nav-tab-pad-x);
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.3s ease;
    position: relative;
    min-height: 0;
    height: auto;
    align-self: stretch;
    flex: 0 0 auto;
    border: none;
}

.artist-profile-nav__tab-label {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.artist-profile-nav__tab-text {
    display: block;
    line-height: 1.2;
}

.artist-profile-nav__tab:hover {
    color: var(--color-white);
}

.artist-profile-nav__tab--active {
    color: var(--color-primary);
}

.artist-profile-nav__tab--active .artist-profile-nav__tab-text {
    color: var(--color-primary);
    font-weight: 600;
}

/* Full width of .artist-profile-nav__tab, flush to bottom of the nav */
.artist-profile-nav__tab-indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
    pointer-events: none;
}

.artist-profile-nav__search-btn {
    border: none;
    border-radius: 50%;
    color: #909090;
    transition: all 0.3s ease;
}

.artist-profile-nav__search-btn svg path {
    fill: currentColor;
    transition: fill 0.3s ease;
}

.artist-profile-nav__search-close {
    flex: 0 0 auto;
}

/* artist-artworks list (legacy) */
.artist-artworks__list {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/*
 * Overview "Dernières œuvres ajoutées"
 * - Same discover-view__card markup as /artists/{id}/artworks
 * - Plain grid stack (NO discover-view__grid masonry)
 *   Masonry + hidden section measured 0-height → cards overlapped About.
 */
.latest-artworks__list {
    --artwork-media-max-ratio: 1.35;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.latest-artworks__list.is-1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
}

.latest-artworks__list.is-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.latest-artworks__list > .discover-view__card {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: auto;
    container-type: inline-size;
}

/* Same media treatment as artworks-tab discover-view__grid cards */
.latest-artworks__list .discover-view__image-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: min(100%, 34rem);
    min-width: 0;
    max-width: min(100%, 34rem);
    aspect-ratio: auto;
    height: auto;
    min-height: min-content;
    flex-shrink: 0;
    margin-inline: auto;
    overflow: visible;
}

.latest-artworks__list .discover-view__image-wrap > picture,
.latest-artworks__list .discover-view__image-wrap > .artwork-progressive--ratio {
    display: block;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: calc(100cqi * var(--artwork-media-max-ratio));
    height: auto !important;
    flex: 0 0 auto;
    align-self: stretch;
    margin-inline: auto;
}

/*
 * Beat `.artist-profile-artwork-media .artwork-progressive { aspect-ratio: auto !important }`
 * which collapses progressive media when the wrap is height:auto (non-masonry stack).
 */
.latest-artworks__list .discover-view__image-wrap.artist-profile-artwork-media > .artwork-progressive.artwork-progressive--ratio {
    height: auto !important;
    aspect-ratio: var(--artwork-ratio, auto) !important;
    max-height: calc(100cqi * var(--artwork-media-max-ratio));
}

.latest-artworks__list .discover-view__image-wrap > img,
.latest-artworks__list .discover-view__image-wrap > picture > img,
.latest-artworks__list .discover-view__image,
.latest-artworks__list .discover-view__image-wrap .artwork-progressive__media {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: calc(100cqi * var(--artwork-media-max-ratio));
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    object-position: center;
}

.latest-artworks__list .discover-view__desc,
.latest-artworks__list .discover-view__price,
.latest-artworks__list .discover-view__status {
    height: auto;
    min-height: 0;
}

/* Legacy square wraps (search / old markup) */
.artist-artworks__image-wrap,
.latest-artworks__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: inherit;
    flex-shrink: 0;
}

.latest-artworks__card {
    min-height: 0;
    height: auto;
}

.latest-artworks__desc {
    min-height: 0;
    flex: 0 0 auto;
}

.latest-artworks__price,
.latest-artworks__status {
    height: auto !important;
    min-height: 0;
    gap: 2px;
}

.artist-artworks__image-wrap > picture,
.latest-artworks__image-wrap > picture,
.artist-profile-artwork-media > picture {
    display: block;
    width: 100%;
    height: 100%;
}

.discover-view__image-wrap > .availability-status-artwork,
.artist-artworks__image-wrap > .availability-status-artwork,
.latest-artworks__image-wrap > .availability-status-artwork {
    right: 2px;
    bottom: 2px;
    z-index: 3;
}

.artist-artworks__image,
.latest-artworks__image,
.artist-artworks__image-wrap > picture > img,
.latest-artworks__image-wrap > picture > img,
.artist-profile-artwork-media > picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artist-profile-artwork-media--fallback {
    aspect-ratio: 1 / 1;
}

.artist-profile-artwork-media--fallback .artist-profile-artwork-media__fallback-mark {
    display: flex;
}

.artist-profile-artwork-media__fallback-mark {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: rgba(234, 241, 255, 0.34);
    font-family: var(--font-family-base);
    font-size: clamp(48px, 9vw, 108px);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0;
    pointer-events: none;
}

.artist-profile-artwork-media > img,
.artist-profile-artwork-media > .availability-status-artwork {
    position: relative;
    z-index: 1;
}

.artist-profile-artwork-media > .latest-artworks__hover--container,
.artist-profile-artwork-media > .discover-view__hover--container {
    z-index: 2;
}

.artist-artworks__hover--container,
.latest-artworks__hover--container {
    position: absolute;
    inset: 0;
    padding: var(--spacing-md);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border-radius: inherit;
    pointer-events: none;
}

.artist-artworks__card:hover .artist-artworks__hover--container,
.latest-artworks__card:hover .latest-artworks__hover--container {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.artist-artworks__artist-image,
.latest-artworks__artist-image {
    width: 30px !important;
    height: 30px !important;
    object-fit: cover;
}

.fav-artwork__favorite {
    width: 30px;
    height: 30px;
    background: var(--overlay-scrim-80);
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 30px 0px #0000004D;
    border-radius: 50%;
}

.fav-artwork__favorite input {
    display: none;
}

.fav-artwork__favorite input:checked + .fav-artwork__heart svg {
    fill: #BB003E;
    stroke: #BB003E;
    animation: heartButton 0.6s;
}

.fav-artwork__favorite[data-favorited="true"] .fav-artwork__icon,
.fav-artwork__heart[data-favorited="true"] .fav-artwork__icon,
button.fav-artwork__heart[data-favorited="true"] .fav-artwork__icon {
    fill: #BB003E;
    stroke: #BB003E;
}

.fav-artwork__favorite[data-favorited="false"] .fav-artwork__icon,
.fav-artwork__heart[data-favorited="false"] .fav-artwork__icon,
button.fav-artwork__heart[data-favorited="false"] .fav-artwork__icon {
    fill: #EAF1FF;
    stroke: transparent;
}

@keyframes heartButton {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.artist-artworks__title,
.latest-artworks__title {
    gap: 3px;
}

.artist-artworks__divider,
.latest-artworks__divider {
    width: 100%;
    height: 1px;
    background: var(--color-accent);
}

.artist-artworks__price,
.latest-artworks__price {
    gap: 2px;
}

.artist-artworks__cta,
.latest-artworks__cta {
    width: 40px;
    height: 40px;
}

/* Collection Cards */
.collection-items__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-xl); /* 20px */
    transition: transform 0.5s ease-in-out; /* Smooth sliding */
}

.collection-items__list.more {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.collection-items__list.two-or-less {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* >3 collections: horizontal scroll, 3 cards visible at a time */
.collection-items__list.is-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (2 * var(--spacing-xl))) / 3);
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #016BFF var(--color-accent);
    padding-bottom: 8px;
}

.collection-items__list.is-scroll::-webkit-scrollbar {
    height: 2px;
}

.collection-items__list.is-scroll::-webkit-scrollbar-thumb {
    background: #016BFF;
    border-radius: 1px;
}

.collection-items__list.is-scroll::-webkit-scrollbar-track {
    background: var(--color-accent);
    border-radius: 1px;
}

.collection-items__list.is-scroll > * {
    min-width: 0;
}

.collection-items__list.artist-profile-empty-list {
    grid-template-columns: 1fr;
}

.collection-items__list.artist-profile-empty-list,
.collection-items__list.artist-profile-state-list {
    grid-template-columns: 1fr;
}

/* Masonry artworks grid uses fixed 8px auto-rows and only spans
   .discover-view__card children. Empty/error state cards must escape
   that track sizing or the message collapses to a few pixels. */
.artist-artworks__results .discover-view__grid:has(> .artist-profile-state-card),
.artist-artworks__results .discover-view__list:has(> .artist-profile-state-card) {
    display: block;
    grid-template-columns: none;
    grid-auto-rows: auto;
}

.artist-profile-state-card {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(220px, 26vw, 320px);
    padding: clamp(48px, 6vw, 96px) clamp(24px, 10vw, 180px);
    text-align: center;
}

.artist-profile-state-card__title {
    margin: 0 0 var(--spacing-md);
}

.artist-profile-state-card__description {
    max-width: 850px;
    margin: 0;
}

.artist-profile-state-card__retry {
    margin-top: var(--spacing-3xl);
}

.collection-item {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 35%, rgba(234, 241, 255, 0.10), transparent 32%),
        linear-gradient(145deg, rgba(234, 241, 255, 0.08), rgba(234, 241, 255, 0.03)),
        var(--color-secondary);
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;

    padding: 20px;
    height: 380px;
}

.collection-item__background {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.collection-item__fallback-mark {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(234, 241, 255, 0.34);
    font-family: var(--font-family-base);
    font-size: clamp(56px, 10vw, 120px);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0;
    pointer-events: none;
}

.collection-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--color-secondary) 4D;
    pointer-events: none;
}

.collection-item__label--txt {
    background: var(--overlay-scrim-80);
    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.30));
    backdrop-filter: blur(15px);
}

.collection-item__content {
    z-index: 2;
}

.collection-item__label,
.collection-item__details,
.collection-item__card-link {
    position: relative;
    z-index: 2;
}

.collection-item__image {
    width: 80px;
    height: 60px;

    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.30));
    object-fit: cover;
}

/* About Artist Content */
.about-artist__profile--img,
.about-artist__quote {
    width: 425px;
}

.about-artist__text {
    flex: 1;
}

/* Profile */
.about-artist__profile {
    position: relative;
    display: flex;
}

.about-artist__profile--img {
    position: relative;
    z-index: 1;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
}

/* Photo */
.about-artist__photo {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
}

/* Gallery */
.about-artist__gallery-wrapper {
    width: 100%;
}

.separator-artist__gallery {
    display: block;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
}

/* Full-bleed clip: hides iOS/Safari native overlay scrollbar while keeping swipe.
   Custom blue `.company-photo-archive__scrollbar` stays outside this clip. */
.about-artist__gallery-clip {
    overflow: hidden;
    width: calc(100% + 160px);
    margin-left: -80px;
}

.about-artist__gallery {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* pan-x so mobile can swipe the track; pan-y was blocking horizontal scroll */
    touch-action: pan-x pinch-zoom;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; /* Hide scrollbar on IE and Edge */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    width: 100%;
    margin-left: 0;
    /* Push native scrollbar into the clipped gutter (Safari/iOS overlay) */
    padding-bottom: 28px;
    margin-bottom: -28px;
}

.about-artist__gallery.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.about-artist__gallery.is-dragging img {
    pointer-events: none;
}

.about-artist__gallery-track {
    display: flex;
    gap: var(--spacing-xl);
    min-width: max-content;
}

.about-artist__gallery-track--centered {
    justify-content: center;
    min-width: 100%;
    width: 100%;
}

.about-artist__gallery-item {
    flex: 0 0 auto;
    width: 680px;
    height: 450px;
    border-radius: var(--border-radius-md);
}

.about-artist__gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
    border-radius: inherit;
}

.about-artist__gallery::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none;
}

.about-artist__gallery::-webkit-scrollbar-thumb,
.about-artist__gallery::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
}

/* Company Photo Archive Styles (for custom scrollbar) */
.company-photo-archive .about-artist__gallery-wrapper {
    width: 100%;
}

.filter-options .separator,
.company-photo-archive .separator-artist__gallery {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-accent);
    border-radius: 6px;
}

.company-photo-archive .about-artist__gallery-clip {
    /* Match .artist-profile-main-container horizontal padding (80px), not
       responsive --spacing-9xl, so the strip bleeds edge-to-edge. */
    width: calc(100% + 160px);
    margin-left: -80px;
}

.company-photo-archive .about-artist__gallery {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pinch-zoom;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
    margin-left: 0;
    padding-bottom: 28px;
    margin-bottom: -28px;
}

.company-photo-archive .about-artist__gallery-track {
    display: flex;
    gap: var(--spacing-xl);
    min-width: max-content;
}

.company-photo-archive .about-artist__gallery-track--centered {
    justify-content: center;
    min-width: 100%;
    width: 100%;
}

.company-photo-archive .about-artist__gallery-item {
    flex: 0 0 auto;
    width: 680px;
    height: 450px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.company-photo-archive .about-artist__gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
    border-radius: inherit;
}

.company-photo-archive .about-artist__gallery::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none;
}

.company-photo-archive .about-artist__gallery::-webkit-scrollbar-thumb,
.company-photo-archive .about-artist__gallery::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
}

/* Custom Scrollbar Container */
.company-photo-archive__scrollbar-container {
    width: 100%;
}

.company-photo-archive__scrollbar {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: 2px;
    cursor: pointer;
}

.company-photo-archive__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.company-photo-archive__scrollbar:hover .company-photo-archive__scrollbar-thumb {
    background-color: var(--color-primary-hover);
}

@media (max-width: 1400px) {
    .about-artist__gallery-item {
        width: 520px;
        height: 360px;
    }

    .company-photo-archive {
        margin-bottom: 60px;
    }

    .company-photo-archive .about-artist__gallery-item {
        width: 520px;
        height: 360px;
    }
}

@media (max-width: 900px) {
    .about-artist__gallery-item {
        width: min(90vw, 420px);
        height: 300px;
    }

    .company-photo-archive {
        margin-bottom: 40px;
    }

    .company-photo-archive .about-artist__gallery-item {
        width: min(90vw, 420px);
        height: 300px;
    }
}

@media (max-width: 600px) {
    .about-artist__gallery-item {
        width: 85vw;
        height: 240px;
    }

    .company-photo-archive .about-artist__gallery-item {
        width: 85vw;
        height: 240px;
    }
}

/* Timeline */
.about-artist__timeline-list {
    width: 100%;
}

.about-artist__timeline-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
    border-right: 2px solid var(--color-accent);
    height: auto;
}

.about-artist__timeline-item:last-child {
    border-right: none;
}

.about-artist__timeline-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}

.about-artist__timeline-icon svg,
.about-artist__timeline-icon img {
    display: block;
    width: 58px;
    height: 58px;
}

.about-artist__timeline-birthday,
.about-artist__timeline-logo {
    object-fit: contain;
}

.about-artist__timeline-heading,
.about-artist__timeline-desc {
    max-width: 260px;
    margin: 0 auto;
}

/* Career */
.about-artist__career-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-xl);
}

.about-artist__career-list[data-career-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-artist__career-list[data-career-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-artist__career-list[data-career-columns="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.career-card {
    background: var(--overlay-scrim-80);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    height: min-content;
}

[data-theme="light"] .career-card {
    background: var(--color-secondary);
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--color-secondary-alt) 12%, var(--color-accent));
}

[data-theme="light"] .career-card__item {
    border-top-color: color-mix(in srgb, var(--color-secondary-alt) 16%, transparent);
}

.career-card__header {
    width: 100%;
    gap: var(--spacing-lg);
    min-width: 0;
}

.career-card__title {
    text-align: left;
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.career-card .toggle-btn {
    flex-shrink: 0;
}

.career-card .arrow-icon {
    transition: transform 0.3s ease;
}

.career-card .arrow-icon {
    transform: rotate(-45deg);
}
.career-card.collapsed .arrow-icon {
    transform: rotate(0deg);
}

.about-artist__career .toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    transition: transform 0.2s ease;
}

.career-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.career-card.collapsed .career-card__content {
    display: none;
}

.career-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.career-card__item {
    display: flex;
    gap: var(--spacing-3xl);
    padding: 10px 0;
    border-top: 1px solid var(--color-accent);
}

.career-card__year {
    min-width: 40px;
}

/* Filter Dropdown */
.filter-options {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 326px;
    padding: 10px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    z-index: 9999;
}

/* Media Query */
@media (min-width: 721px) {
    .about-artist__career .toggle-btn {
        display: inline-flex !important;
    }
}

@media (max-width: 1400px) {
    .about-artist__career-list,
    .about-artist__career-list[data-career-columns],
    .about-artist__career-list[data-career-columns="2"],
    .about-artist__career-list[data-career-columns="3"],
    .about-artist__career-list[data-career-columns="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    /* Attribute selectors beat the plain rule — force stack on phones */
    .about-artist__career-list,
    .about-artist__career-list[data-career-columns],
    .about-artist__career-list[data-career-columns="1"],
    .about-artist__career-list[data-career-columns="2"],
    .about-artist__career-list[data-career-columns="3"],
    .about-artist__career-list[data-career-columns="4"] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-lg);
    }

    .career-card {
        padding: var(--spacing-lg);
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .career-card__header {
        gap: var(--spacing-md);
    }

    .career-card__title {
        font-size: clamp(16px, 4.5vw, 22px);
        line-height: 1.25;
    }
}

/* Responsive Styles */
@media (max-width: 1500px) {
    .about-artist__content-item {
        flex-wrap: wrap;
    }
    .about-artist__content-item > :nth-child(1),
    .about-artist__content-item > :nth-child(2) {
        flex: 1 1 48%;
        min-width: 300px;
        max-width: 50%;
        min-height: 200px;
    }
    .about-artist__content-item > :nth-child(3) {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        order: 3;
    }
    .about-artist__profile--img {
        flex: 1;
        height: 200px;
        width: -webkit-fill-available;
        height: auto;
    }
}

@media (max-width: 1200px) {
    .artist-artworks__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .latest-artworks__list,
    .latest-artworks__list.is-2,
    .latest-artworks__list.is-3plus {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
    .collection-items__list:not(.is-scroll):not(.artist-profile-state-list):not(.artist-profile-empty-list) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1160px) {

    .artist-profile-main-container {
        flex-direction: column !important;
        padding-left: var(--spacing-5xl) !important;
        padding-right: var(--spacing-5xl) !important;
    }

    .about-artist__gallery-clip,
    .company-photo-archive .about-artist__gallery-clip {
        width: calc(100% + (var(--spacing-5xl) * 2)) !important;
        margin-left: calc(-1 * var(--spacing-5xl)) !important;
    }

    .about-artist__gallery,
    .company-photo-archive .about-artist__gallery {
        width: 100% !important;
        margin-left: 0 !important;
    }

}

@media (max-width: 900px) {
    /* Touch: always show artwork action overlays; no hover on mobile */
    .discover-view__hover--container,
    .artist-artworks__hover--container,
    .latest-artworks__hover--container {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .discover-view__hover--container-bottom {
        display: none !important;
    }

    .artist-artworks__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .latest-artworks__list,
    .latest-artworks__list.is-1,
    .latest-artworks__list.is-2,
    .latest-artworks__list.is-3plus {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .collection-items__list:not(.is-scroll):not(.artist-profile-state-list):not(.artist-profile-empty-list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collection-items__list.is-scroll {
        grid-auto-columns: calc((100% - var(--spacing-xl)) / 2);
    }

    .artist-profile-state-card {
        padding: 50px;
    }

    .about-artist__timeline-list {
        flex-direction: column;
        gap: var(--spacing-2xl);
        align-items: stretch;
        height: auto;
    }
    .about-artist__timeline-item {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 2px solid var(--color-accent);
        padding-bottom: var(--spacing-xl);
        height: auto;
    }
    .about-artist__timeline-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .about-artist__timeline-icon {
        width: 48px;
        height: 48px;
    }
    .about-artist__timeline-icon svg,
    .about-artist__timeline-icon img {
        width: 48px;
        height: 48px;
        max-width: 48px;
        max-height: 48px;
        object-fit: contain;
    }

    .collection-item__label--txt {
        height: 32px;
        padding: var(--spacing-xs-5) var(--spacing-md);
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .collection-items__list:not(.is-scroll):not(.artist-profile-state-list):not(.artist-profile-empty-list) {
        grid-template-columns: minmax(0, 1fr);
    }

    .collection-items__list.is-scroll {
        grid-auto-columns: minmax(0, 100%);
    }

    .about-artist__content-item > :nth-child(1),
    .about-artist__content-item > :nth-child(2) {
        min-width: 0; /* was 250px — forced sideways squeeze on narrow phones */
        min-height: 150px;
    }

    .artist-profile-nav {
        --artist-profile-nav-tab-pad-x: var(--spacing-md);
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .artist-profile-nav__container {
        min-height: 52px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .artist-profile-nav__tabs {
        gap: 0 !important;
    }

    .artist-profile-nav__tab {
        min-height: 52px;
        font-size: 15px;
    }

    .artist-profile-nav__tab-indicator {
        height: 2px;
        bottom: 0;
    }

    .input#artist-profile-nav-search-input {
        padding-left: 0;
    }

    .latest-artworks__card {
        padding: var(--spacing-lg) !important;
        gap: var(--spacing-lg) !important;
    }

    /* Keep square media. Card height comes from removing h-we-fi-av, not max-height. */
    .latest-artworks__image-wrap {
        aspect-ratio: 1 / 1;
        max-height: none;
        width: 100%;
        flex-shrink: 0;
    }

    .about-artist__gallery,
    .company-photo-archive .about-artist__gallery {
        touch-action: pan-x pinch-zoom;
        overscroll-behavior-x: contain;
    }

    .about-artist__gallery-track {
        gap: var(--spacing-lg);
        padding-inline: var(--spacing-lg);
    }
}

@media (max-width: 630px) {
    .about-artist__content-item {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .about-artist__content-item > * {
        width: 100%;
        max-width: 100% !important;
        order: initial !important;
    }
    .artist-artworks__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .artist-profile-nav__tab {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
        font-size: 14px;
    }
}

@media (max-width: 520px) {
    .artist-profile-state-card {
        padding: 30px;
    }

    .collection-items__list:not(.is-scroll):not(.artist-profile-state-list):not(.artist-profile-empty-list) {
        grid-template-columns: minmax(0, 1fr);
    }
    .collection-item {
        height: 300px;
    }
    .collection-item__image {
        width: 70px;
        height: 50px;
    }
}

@media (max-width: 485px) {
    .collection-items__list:not(.is-scroll):not(.artist-profile-state-list):not(.artist-profile-empty-list) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .collection-item {
        height: 280px;
    }
}

/* Below-fold paint deferral.
   Keep .about-artist out: content-visibility paint containment clips the
   full-bleed about-artist__gallery negative margins. */
.artist-profile__content .collection-items,
[data-artist-profile-artworks-section],
[data-artist-profile-collections-section] {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}