/* ================================================================
   Dolce Artists Manager — Frontend CSS v1.5
   Matches screenshot: full-bleed portrait, name bottom-left,
   no card body, square corners, blue circle arrows, small gaps.
   ================================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */
.dolce-artists-section {
    --dp-navy:  #273577;
    --dp-sky:   #0B71B2;
    --dp-white: #ffffff;
    --dp-gray:  #575A5F;
    --dp-gap:   10px;       /* gap between cards — matches screenshot */
    box-sizing: border-box;
    font-family: 'Titillium Web', sans-serif;
    width: 100%;
}
.dolce-artists-section *, .dolce-artists-section *::before, .dolce-artists-section *::after {
    box-sizing: inherit;
}

/* ================================================================
   THE CARD — same markup for slider + grid
   A card is ONLY the photo + name overlay. Nothing below.
   ================================================================ */
.dolce-card-photo {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0;              /* ← square corners, as in screenshot */
    background: #222;
    width: 100%;
    /* Height is set by the parent context (slick / grid) */
    text-decoration: none;
    color: inherit;
    cursor: default;
}

/* Clickable variant */
.dolce-card-link {
    cursor: pointer;
}

/* The photo fills the card completely */
.dolce-card-photo img.dolce-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.35s ease;
}
.dolce-card-link:hover img.dolce-photo {
    transform: scale(1.04);
}

/* No-image placeholder */
.dolce-card-photo .dolce-photo-placeholder {
    width: 100%;
    height: 100%;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #1e2a5e 0%, #0b3b6e 100%);
    color: rgba(255,255,255,0.18);
}
.dolce-card-photo .dolce-photo-placeholder svg {
    width: 56px; height: 56px;
}

/* ── Name overlay — absolute, bottom-left ─────────────────────── */
.dolce-card-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    /* Gradient: visible dark band at bottom, fades to transparent */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.30) 45%,
        transparent 100%
    );
    padding: 40px 12px 12px 12px;
    pointer-events: none;  /* let click-through to the card link */
    display: flex;
    justify-content: center;
}

.dolce-card-caption .dolce-artist-name {
    display: block;
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    font-weight: 700;
    /*letter-spacing: 0.10em;*/
    text-transform: uppercase;
    color: var(--dp-white);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0; padding: 0;
}

/* ── Featured badge ──────────────────────────────────────────── */
.dolce-featured-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--dp-sky);
    color: var(--dp-white);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 3;
}

/* ── Hover border for clickable ──────────────────────────────── */
.dolce-card-link::after {
    content: '';
    position: absolute; inset: 0;
    border: 3px solid transparent;
    transition: border-color 0.25s ease;
    pointer-events: none;
    z-index: 2;
}
.dolce-card-link:hover::after {
    border-color: var(--dp-sky);
}

/* ================================================================
   SLIDER LAYOUT
   ================================================================ */

/* Outer wrapper: adds horizontal padding so arrows don't clip */
.dolce-artists-section .dolce-slider {
    position: relative;
    padding: 0 0;      /* arrows are OUTSIDE the track */
    margin: 0;
}

.dolce-layout-slider .dolce-slide {
    padding: 0;   /* half-gap each side = full gap between cards */
}

/* Slick track: make all slides same height */
.dolce-layout-slider .slick-track {
    display: flex !important;
    gap: 10px;
}

.dolce-layout-slider .slick-slide {
    height: inherit !important;
    float: none !important;
    display: flex !important;
    flex-direction: column;
}
.dolce-layout-slider .slick-slide > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.dolce-layout-slider .dolce-slide {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* The card fills the slide vertically */
.dolce-layout-slider .dolce-card-photo {
    flex: 1;
    min-height: 450px;     /* minimum card height */
    border-radius: 0;
}

/* ── Arrows — circle, blue, overlapping sides ─────────────────── */
.dolce-layout-slider .slick-prev,
.dolce-layout-slider .slick-next {
    width: 42px;
    height: 42px;
    background: #273577;
    border-radius: 50%;
    z-index: 20;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 2px 10px rgba(11,113,178,0.45);
    transition: background 0.2s ease;
    border: none !important;
    outline: none;
}
.dolce-layout-slider .slick-prev { left: 10px; }
.dolce-layout-slider .slick-next { right: 10px; }

.dolce-layout-slider .slick-prev:hover,
.dolce-layout-slider .slick-next:hover {
    background: var(--dp-navy);
}

.dolce-layout-slider .slick-prev::before,
.dolce-layout-slider .slick-next::before {
    font-size: 18px;
    line-height: 42px;
    color: var(--dp-white);
    opacity: 1;
    display: none !important;
}

/* Dots — hidden by default (screenshot has no dots) */
.dolce-layout-slider .slick-dots { display: none !important; }

/* ================================================================
   GRID LAYOUT
   ================================================================ */
.dolce-layout-grid {
    display: grid;
    gap: var(--dp-gap);
}
.dolce-layout-grid.dolce-cols-2 { grid-template-columns: repeat(2, 1fr); }
.dolce-layout-grid.dolce-cols-3 { grid-template-columns: repeat(3, 1fr); }
.dolce-layout-grid.dolce-cols-4 { grid-template-columns: repeat(4, 1fr); }
.dolce-layout-grid.dolce-cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Grid cards: use aspect-ratio to maintain portrait shape */
.dolce-layout-grid .dolce-card-photo {
    aspect-ratio: 3 / 4;
}
.dolce-layout-grid .dolce-card-photo img.dolce-photo {
    height: 100%;
}

/* ================================================================
   LIST LAYOUT — richer card with bio/socials
   ================================================================ */
.dolce-layout-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dolce-list-card {
    display: block;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(39,53,119,0.08);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s, transform 0.25s;
}
.dolce-card-link.dolce-list-card:hover {
    box-shadow: 0 6px 22px rgba(39,53,119,0.16);
    transform: translateX(4px);
}

.dolce-list-inner { display: flex; align-items: stretch; }

.dolce-list-card .dolce-photo-wrap {
    width: 100px; min-width: 100px; flex-shrink: 0; overflow: hidden;
}
.dolce-list-card .dolce-photo {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.dolce-list-card .dolce-photo-placeholder {
    width: 100%; height: 110px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#e8ecf8,#c8d4ee);
    color: var(--dp-navy);
}

.dolce-list-card .dolce-card-body {
    flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px;
}
.dolce-list-top {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.dolce-list-card .dolce-artist-name {
    font-family: 'Titillium Web', sans-serif; font-size: 16px; font-weight: 700;
    color: var(--dp-navy); text-transform: none; margin: 0 0 2px; display: block;
    white-space: normal; letter-spacing: 0;
}
.dolce-artist-role {
    font-size: 11.5px; color: var(--dp-sky); font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; display: block; margin-bottom: 4px;
}
.dolce-artist-bio {
    font-size: 13px; color: var(--dp-gray); line-height: 1.6; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dolce-genres { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.dolce-genre-tag {
    font-size: 10.5px; background: rgba(39,53,119,.07); color: var(--dp-navy);
    border: 1px solid rgba(39,53,119,.15); border-radius: 20px; padding: 2px 8px; font-weight: 500;
}
.dolce-socials { display: flex; gap: 6px; flex-wrap: wrap; }
.dolce-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #dde3f0;
    color: var(--dp-gray); text-decoration: none; flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dolce-social svg { width: 14px; height: 14px; }
.dolce-social.dolce-spotify:hover   { background:#1DB954; border-color:#1DB954; color:#fff; }
.dolce-social.dolce-youtube:hover   { background:#FF0000; border-color:#FF0000; color:#fff; }
.dolce-social.dolce-facebook:hover  { background:#1877F2; border-color:#1877F2; color:#fff; }
.dolce-social.dolce-instagram:hover { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color:#dc2743; color:#fff; }
.dolce-social.dolce-tiktok:hover    { background:#000; border-color:#000; color:#fff; }

.dolce-btn-profile {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'Titillium Web', sans-serif; font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--dp-navy); text-decoration: none;
    border: 1.5px solid var(--dp-navy); border-radius: 3px;
    padding: 7px 14px; white-space: nowrap; flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.dolce-btn-profile:hover { background: var(--dp-navy); color: #fff; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
    .dolce-layout-grid.dolce-cols-5 { grid-template-columns: repeat(4,1fr); }
    .dolce-layout-grid.dolce-cols-4 { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
    .dolce-layout-grid.dolce-cols-5,
    .dolce-layout-grid.dolce-cols-4,
    .dolce-layout-grid.dolce-cols-3 { grid-template-columns: repeat(1,1fr); }
    .dolce-list-top { flex-direction: column; }
}
@media (max-width: 600px) {
    .dolce-layout-grid { grid-template-columns: repeat(1,1fr); }
    .dolce-layout-slider .slick-prev { left: -14px; }
    .dolce-layout-slider .slick-next { right: -14px; }
}
@media (max-width: 420px) {
    .dolce-layout-grid { grid-template-columns: 1fr; }
    .dolce-list-inner { flex-direction: column; }
    .dolce-list-card .dolce-photo-wrap { width: 100%; min-width: 0; }
}

/* ── Empty state ────────────────────────────────────────────── */
.dolce-empty { text-align:center; color:var(--dp-gray); padding:40px 20px; font-style:italic; }