/* Base navbar styles */
.navbar {
    /* Use CSS variables for responsive design */
    height: var(--navbar-height);
    padding: var(--navbar-padding-y) 0;
    transition: var(--transition-duration);
}

/* Navbar variants for different contexts */

/* Standalone navbar (no header parent) - needs its own horizontal padding */
.navbar.standalone {
    padding: var(--navbar-padding-y) var(--navbar-padding-x);
}

/* Navbar within header - inherits header padding, no additional padding needed (The default) */
.navbar.with-header {
    padding: var(--navbar-padding-y) 0;
}


/* Settings variant - has its own padding rules */
.navbar.settings {
    height: auto;
    padding: var(--navbar-padding-y) var(--navbar-padding-x);
}


.navbar__logo-img,
.navbar__logo-image {
    /* Use CSS variables for responsive design */
    width: var(--logo-width);
    height: var(--logo-height);
    object-fit: contain;
    transition: var(--transition-duration);
}
.navbar__logo-img-small {
    height: var(--logo-height);
    width: auto;
}

/* Theme-paired gallery logos (mirrors theme-logo-boot critical CSS). */
.navbar__logo .theme-logo--light {
    display: none;
}
html[data-theme="light"] .navbar__logo .theme-logo--dark {
    display: none;
}
html[data-theme="light"] .navbar__logo .theme-logo--light {
    display: block;
}

/* Search bar */
.navbar__search-input {
    padding-left: 48px !important;
}

.navbar__search-input-icon {
    left: 16px;
    right: auto;
}

.navbar__search-input {
    background: rgba(var(--color-secondary), 0.5) !important;   /* Transparent : 50 % */
    backdrop-filter: blur(8px);
}

.navbar__hamburger-menu-image {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.navbar__icon {
    width: 24px;
    height: 24px;
}
.navbar__icon.navbar__icon--purchase {
    width: 19px;
}

.navbar__profile--mobile-image,
.navbar__profile-image,
.navbar__profile-thumbnail,
.navbar__profile-guest {
    object-fit: cover;
}

.navbar__profile--settings,
.navbar__profile {
    width: var(--profile-width);
    height: var(--profile-width);
    flex-shrink: 0;
    border-radius: 50%;
}

.navbar__profile-image,
.navbar__profile-initials,
.navbar__profile-guest {
    width: 100%;
    height: 100%;
}

.navbar__profile-initials {
    line-height: 1;
    text-align: center;
}

.navbar__profile-guest {
    border: 0;
    color: var(--color-secondary-alt);
}

.navbar__profile-guest svg {
    width: 100%;
    height: 100%;
    display: block;
}

.navbar__profile-thumbnail,
.navbar__profile-thumbnail-initials {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    overflow: hidden;
}

.navbar__menu-item,
.navbar__links {
    height: inherit;
}

/* Profile dropdown */
.navbar__profile-dropdown {
    position: absolute;
    right: 0;
    top: calc(var(--profile-width) + var(--navbar-padding-y)); /* height of the profile */
    width: 402px;
    z-index: 3;
}

.navbar__profile-info {
    position: relative;
    padding: 25px 30px;
    border-radius: 10px 10px 0px 0px;
    --navbar-profile-banner-image: none;
    background: var(--navbar-profile-info-gradient, linear-gradient(135deg, rgba(1, 107, 255, 0.30) 0%, var(--overlay-scrim-80) 100%));
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.30);
}

.navbar__profile-info.has-banner-image {
    background: var(--navbar-profile-banner-image) 50% / cover no-repeat var(--color-secondary);
}

.navbar__profile-info::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px 10px 0px 0px;
    background: var(--navbar-profile-info-overlay, var(--overlay-scrim-30));
    backdrop-filter: blur(5px);
    z-index: 1;
}

.navbar__profile-info > *:not(.navbar__profile-bg) {
    position: relative;
    z-index: 2;
}

.navbar__profile-option {
    padding: 11.5px 20px;
}

/* Change text, icon color on hover */
.navbar__profile-option:hover strong,
.navbar__profile-option:hover .navbar__profile-link {
    color: var(--color-primary) !important;
}
.navbar__profile-option:hover svg path {
    fill: var(--color-primary);
}

/* Banner header */
.banner,
.large-banner {
    position: relative;
    width: 100%;
    height: 500px;
    padding: 0;
}

.large-banner {
    height: 760px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: var(--spacing-5xl) !important;
}

.banner__empty,
.banner__image {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.banner__image {
    object-fit: cover;
}

.banner__empty {
    background:
        radial-gradient(circle at 50% 38%, rgba(234, 241, 255, 0.08), transparent 34%),
        var(--color-secondary);
}

.banner__camera-icon {
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    bottom: 30px;
    right: calc(30px + 30px); /* 30px of pasding of parent and 30px pour spacing in right */
    border: none;
    border-radius: 50%;
}

/* header */
.header {
    position: relative;
    z-index: 2;
    padding: 0 var(--spacing-6xl);
    isolation: isolate;
    /* overflow: hidden; */
}

.header > .banner {
    width: calc(100% - (var(--spacing-3xl) * 2));
    margin: 0 auto;
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 96%; /* not 100% to give the design a vibe of connection */
    z-index: -1;
    background: linear-gradient(0deg, var(--color-secondary) 0%, var(--overlay-scrim-00) 100%), var(--header-before-image, url("../../assets/img/artist profiles/Rectangle 1098.jpg"));
    filter: blur(42.5px);
    background-color: var(--color-background-dark);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    /* background: linear-gradient(0deg, #0E1118 0%, rgba(14, 17, 24, 0.00) 100%); */ /* New ACCount */
}

/* Profile banners use a real empty state instead of the shared static header image. */
.profile-header {
    --profile-header-banner-overlay: linear-gradient(
        0deg,
        var(--color-secondary) 0%,
        var(--overlay-scrim-00) 100%
    );
    --profile-header-banner-image: none;
}

.profile-header::before {
    background: var(--profile-header-banner-overlay);
    background-color: var(--color-secondary);
}

.profile-header.has-banner-image::before {
    background: var(--profile-header-banner-overlay), var(--profile-header-banner-image);
    background-color: var(--color-secondary);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.header.large-banner::before {
    width: 100%;
    height: 100%;
    filter: none;
    border-radius: 0 0 10px 10px;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), image-set(
        url("../../assets/img/home/hero-1-1920.webp") type("image/webp") 1x,
        url("../../assets/img/home/hero-1-2560.webp") type("image/webp") 2x
    );
    background-color: var(--color-background-dark);
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.header.large-banner[data-dynamic-hero="true"]::before {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), var(--dynamic-hero-image, none);
    background-color: var(--color-background-dark);
}

/* Profile part banner */
.large-banner__content {
    margin: 0;
    margin-inline: 30px;
    background: var(--overlay-scrim-60);
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(25px);
}
.large-banner__photo {
    width: 183px;
    height: 210px;
    max-width: 183px;
    max-height: 210px;
    object-fit: cover;
    flex-shrink: 0;
}

.large-banner__photo-wrapper {
    width: 183px;
    height: 210px;
    max-width: 183px;
    max-height: 210px;
    flex-shrink: 0;
    overflow: hidden;
}

.large-banner__bio {
    color: var(--color-accent-alt);
    max-width: 650px;
}

.large-banner__actions {
    flex-wrap: wrap;
}

.large-banner__actions .filter-container {
    z-index: 2;
}

.large-banner__actions .artist-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    flex: 0 0 auto;
}

.large-banner__actions .artist-action-btn:active {
    transform: scale(0.97);
}

.large-banner__actions .artist-action-input:checked + .artist-action-btn {
    transform: none;
}

.large-banner__actions .artist-card__btn.artist-card__btn--follow {
    padding: 14px;
    overflow: hidden;
    color: #EAF1FF;
}

.large-banner__actions .artist-card__btn.artist-card__btn--follow .artist-action-text {
    color: #EAF1FF !important;
}

.large-banner__actions .artist-card__btn.artist-card__btn--follow .icon-normal {
    transition: transform 0.3s ease, fill 0.3s ease;
    min-width: 14px;
}

.large-banner__actions .artist-card__btn.artist-card__btn--follow .artist-action-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.4s ease, opacity 0.3s ease;
}

.large-banner__actions .artist-card__btn.artist-card__btn--follow:hover {
    background: var(--color-primary);
    color: var(--color-secondary-alt);
    flex: 1;
}

.large-banner__actions .artist-card__btn.artist-card__btn--follow:hover .icon-normal {
    transform: scale(1.1) rotate(90deg);
}

.large-banner__actions .artist-card__btn.artist-card__btn--follow:hover .icon-normal path {
    fill: var(--color-secondary-alt);
}

.large-banner__actions .artist-card__btn.artist-card__btn--follow:hover .artist-action-text {
    max-width: -webkit-fill-available;
    opacity: 1;
    flex: 1;
}

.large-banner__actions .artist-action-btn .icon-normal {
    display: block;
}

.large-banner__actions .artist-action-btn .icon-active {
    display: none;
}

.large-banner__actions .artist-action-text--active {
    display: none;
}

.large-banner__actions .artist-action-input:checked + .artist-card__btn--notify {
    background-color: var(--color-primary);
}

.large-banner__actions .artist-action-input:checked + .artist-card__btn--notify .icon-normal {
    display: none !important;
}

.large-banner__actions .artist-action-input:checked + .artist-card__btn--notify .icon-active {
    display: block !important;
}

.large-banner__actions .artist-action-input:checked + .artist-card__btn--follow {
    background: var(--color-primary);
    color: var(--color-secondary-alt);
}

.large-banner__actions .artist-action-input:checked + .artist-card__btn--follow .icon-normal {
    display: none !important;
}

.large-banner__actions .artist-action-input:checked + .artist-card__btn--follow .icon-active {
    display: block !important;
}

.large-banner__actions .artist-action-input:checked + .artist-card__btn--follow svg path,
.large-banner__actions .artist-action-input:checked + .artist-card__btn--follow:hover .icon-normal path {
    fill: var(--color-secondary-alt);
}

.large-banner__actions .artist-action-input:checked + .artist-card__btn--follow .artist-action-text--default {
    display: none;
}

.large-banner__actions .artist-action-input:checked + .artist-card__btn--follow .artist-action-text--active {
    display: inline-flex;
    justify-content: center;
    max-width: 0;
    opacity: 0;
    flex: 0;
}

.large-banner__actions .artist-action-input:checked + .artist-card__btn--follow:hover .artist-action-text--active {
    max-width: -webkit-fill-available;
    opacity: 1;
    flex: 1;
}

.banner__text {
    position: absolute;
    display: block !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* =================================== */
/*    Responsive Adjustments           */
/* =================================== */

@media (min-width: 1921px) {
    .header .banner {
        max-width: 1920px;
        padding: 0;
        margin: 0 auto;
    }

    .large-banner__content {
        max-width: 1920px;
        margin: 0 auto;
        width: 100%;
    }

    /* Match page content to the capped header edge (TCK-280).
       Search keeps its own 1920 max-width + horizontal padding (TCK-387). */
    .gallery-main-container,
    .explore-artworks-main-container,
    .explore-artists-main-container,
    .explore-collections-main-container,
    .collection-main-container,
    .artist-profile-main-container,
    .artwork-main-container,
    .favorites-list-main-container,
    .profile-main-container,
    .company-main-container,
    .guidance-article-main-container,
    .basket-main-container,
    .tracking-map-main-container,
    .traking-map-main-container,
    .dashboard-main-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Smaller screen adjustments for dropdown positions */
@media (max-width: 414px) {
    /* Adjust dropdown positions for smaller navbar height */
    .navbar__profile-dropdown{
        top: calc(38px + 15px); /* Based on profile height at this size */
        width: 330px; /* Narrower dropdown for small screens */
    }

    .navbar__icon svg {
        width: 18px;
        /* height: auto; */
    }
}

/* Banner header */
.banner {
    position: relative;
    width: 100%;
    height: 500px;
    padding: 0;
}

/* ================================= */
/*  Existing Responsive Breakpoints  */
/* ================================= */

@media (max-width: 1200px) {
    .banner{
        height: 450px;
        transition: height 0.6s ease;
    }

    .navbar__links {
        gap: var(--spacing-xl) !important;
    }
    .navbar__actions {
        gap: var(--spacing-xl) !important;
    }
}

@media (max-width: 1050px) {
    .header {
        padding-inline: var(--spacing-5xl);
    }

    .header > .banner {
        width: 100%;
    }
}

/* Responsive styling for Tablet devices */
@media (max-width: 1080px) {
    .banner {
        height: 400px;
    }

    .navbar__links a {
        font-size: 18px !important;
    }
}

/* Medium tablet breakpoint - Show hamburger menu */
@media (max-width: 1000px) {
    /* Hide navbar icons */
    .navbar__icon--favourite,
    .navbar__icon--purchase {
        display: none !important;
    }

    /* Show hamburger menu */
    .navbar__hamburger-menu-image {
        display: flex !important;
    }

    .navbar__links {
        display: none !important;
    }

    .navbar__actions {
        gap: var(--spacing-3xl) !important;
        min-width: 0;
    }

    .navbar__search-input-container {
        min-width: 0;
    }
}

@media (max-width: 800px) {
    .banner {
        height: 350px;
    }
}

/* Responsive styling for mobile devices */
@media (max-width: 700px) {
    .banner {
        display: none !important;
    }
    .header.gallery-banner .banner {
        display: block !important;
    }

    .navbar.classic .navbar__actions .close-button {
        width: auto !important;
        height: auto !important;
    }
}

@media (max-width: 520px) {
    .header {
        padding-inline: var(--spacing-4xl);
    }

    /* Keep the shared controls on the first row and move expanded search below. */
    .navbar.navbar--search-expanded {
        height: auto;
        flex-wrap: wrap;
        row-gap: var(--spacing-sm) !important;
    }

    .navbar.navbar--search-expanded .navbar__actions {
        display: contents !important;
    }

    .navbar.navbar--search-expanded .navbar__search-input-container {
        order: 2;
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 1160px) {
    .large-banner__content {
        margin-inline: -10px;
    }
}

@media (max-width: 1024px) {
    .large-banner__content {
        margin-inline: 0;
    }
}

@media (max-width: 768px) {
    /* 100vh/dvh shrink (or stay huge) when the keyboard opens → bio + actions crush
       over the nav search. Use stable svh as a floor and let height follow content. */
    .large-banner.artist-banner {
        height: auto;
        min-height: 100svh;
    }
}

    .large-banner__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-3xl);
    }

    .large-banner__photo-wrapper {
        width: 160px;
        height: 160px;
        max-width: 160px;
        max-height: 160px;
    }

    .large-banner__photo {
        width: 160px;
        height: 160px;
        max-width: 160px;
        max-height: 160px;
        border-radius: 50%;
    }

    .large-banner__info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
        text-align: center;
    }

    .large-banner__bio {
        max-width: 100%;
    }

    .large-banner__actions {
        justify-content: center;
        width: 100%;
    }

    .large-banner__btn--more {
        display: none !important;
    }
}