/**
 * SensFlow - Thème Galerie, mise en page PC (>= 1100 px)
 *
 * Inspirée des pages établissement Fresha : titre (note, avis, adresse) au-dessus
 * des photos, grande photo + 2 vignettes (2 colonnes de 2 à partir de 5 photos),
 * puis deux colonnes 45 / 55.
 * À gauche, tout ce qui concerne la praticienne, dans l'ordre du mobile
 * (photo de profil, adresses, À propos / Parcours / FAQ, infos pratiques).
 * À droite, la prise de rendez-vous sous un titre.
 *
 * Règle : rien ne change en dessous de 1100 px. Les blocs ajoutés (.gx-*) sont
 * masqués par défaut, tout le reste est dans la media query. Le style de base du
 * check doré (tous thèmes, mobile compris) est dans book/index.php.
 * Préfixe body.theme-galerie : passe devant les <style> de book/index.php.
 */

.gx-aside {
    display: contents;
}

.gx-titlebar,
.gx-gallery-all,
.gx-booking-title,
.gx-reviews {
    display: none;
}

/* Le check du titre ne sert que sur PC sans photo de cabinet (sinon il est dans l'en-tête) */
.gx-title .gx-member-check {
    display: none;
}

@media (min-width: 1100px) {

    body.theme-galerie {
        background: #fff;
    }

    /* --- Titre au-dessus des photos --- */
    body.theme-galerie .gx-titlebar {
        display: block;
        max-width: 1160px;
        margin: 0 auto;
        padding: 32px 24px 20px;
    }

    body.theme-galerie .gx-title {
        font-size: 34px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: var(--sf-ink);
        margin: 0 0 10px;
    }

    body.theme-galerie .gx-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 0;
        font-size: 15px;
        color: var(--sf-ink);
    }

    body.theme-galerie .gx-meta > * + *::before {
        content: '·';
        margin: 0 10px;
        color: var(--sf-muted);
    }

    body.theme-galerie .gx-meta-rating {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        color: inherit;
        cursor: pointer;
    }

    body.theme-galerie .gx-meta-link {
        color: #6f8a68;
        font-weight: 500;
    }

    body.theme-galerie .gx-meta-rating:hover .gx-meta-link,
    body.theme-galerie .gx-meta-address:hover {
        text-decoration: underline;
    }

    body.theme-galerie .gx-meta-item {
        color: var(--sf-muted);
        text-decoration: none;
    }

    body.theme-galerie .gx-meta-badge {
        color: #8a7442;
    }

    body.theme-galerie .gx-stars {
        display: inline-flex;
        align-items: center;
        gap: 1px;
    }

    body.theme-galerie .gx-stars svg {
        width: 15px;
        height: 15px;
    }

    /* Étoiles dorées, comme sur mobile et dans la section Avis */
    body.theme-galerie .gx-stars .star {
        font-size: 15px;
        color: #d1d5db;
    }

    body.theme-galerie .gx-stars .star.full,
    body.theme-galerie .gx-stars .star.half {
        color: #fbbf24;
    }

    /* --- Photos : grande + 2 vignettes --- */
    body.theme-galerie .hero-gallery {
        max-width: 1160px;
        padding: 0 24px;
        margin: 0 auto;
    }

    body.theme-galerie .hero-gallery-grid {
        position: relative;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 8px;
        height: 440px;
        border-radius: 14px;
    }

    body.theme-galerie .hero-gallery-grid-item:nth-child(n+4) {
        display: none;
    }

    body.theme-galerie .hero-gallery-grid-item:first-child {
        grid-row: span 2;
    }

    /* 5 photos et plus : la grande + deux colonnes de deux vignettes */
    body.theme-galerie .hero-gallery-grid[data-count="5"] {
        grid-template-columns: 2fr 1fr 1fr;
    }

    body.theme-galerie .hero-gallery-grid[data-count="5"] .hero-gallery-grid-item:nth-child(n+4) {
        display: block;
    }

    body.theme-galerie .hero-gallery-grid[data-count="1"] {
        grid-template-columns: 1fr;
    }

    body.theme-galerie .hero-gallery-grid[data-count="2"] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    body.theme-galerie .hero-gallery-grid[data-count="2"] .hero-gallery-grid-item:first-child {
        grid-row: auto;
    }

    /* Le « +N » de la 5e vignette n'existe plus : remplacé par le bouton */
    body.theme-galerie .hero-gallery-grid-item.has-more::before,
    body.theme-galerie .hero-gallery-grid-item.has-more::after {
        content: none;
    }

    body.theme-galerie .gx-gallery-all {
        display: inline-flex;
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 2;
        padding: 9px 16px;
        background: #fff;
        color: var(--sf-ink);
        border: 1px solid rgba(31, 41, 55, .12);
        border-radius: 999px;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(31, 41, 55, .12);
    }

    body.theme-galerie .gx-gallery-all:hover {
        background: var(--sf-linen);
    }

    /* --- Sans photo de cabinet : mise en page « profil » ---
       Bandeau de couverture SensFlow (le même que sur mobile), avatar en grand qui en
       déborde en bas à gauche, nom et note à côté. Le bandeau passe avant le titre. */
    body.theme-galerie .public-main:has(.hero-gallery-fallback) {
        display: flex;
        flex-direction: column;
    }

    body.theme-galerie .public-main:has(.hero-gallery-fallback) > .hero-gallery {
        order: -1;
        width: 100%;
        box-sizing: border-box;
        margin-top: 32px;
        overflow: visible;
    }

    body.theme-galerie .hero-gallery-fallback {
        position: relative;
        display: block;
        height: 200px;
        border-radius: 16px;
    }

    body.theme-galerie .hero-gallery-fallback-photo,
    body.theme-galerie .hero-gallery-fallback-initials {
        position: absolute;
        left: 32px;
        bottom: -56px;
        width: 132px;
        height: 132px;
    }

    body.theme-galerie .public-main:has(.hero-gallery-fallback) > .gx-titlebar {
        width: 100%;
        box-sizing: border-box;
        min-height: 92px;
        padding: 18px 24px 0 212px;
    }

    /* Avatar, nom et spécialité sont déjà sur le bandeau et dans le titre : l'en-tête
       de gauche ferait doublon. Le check doré passe à côté du grand nom. */
    body.theme-galerie .public-main:has(.hero-gallery-fallback) .gx-aside > .galerie-header {
        display: none;
    }

    body.theme-galerie .public-main:has(.hero-gallery-fallback) .gx-title .gx-member-check {
        display: inline-flex;
        width: 24px;
        height: 24px;
        margin-left: 8px;
        vertical-align: -2px;
    }

    /* --- Deux colonnes 45 / 55 : praticienne à gauche, rendez-vous à droite --- */
    body.theme-galerie .content-card {
        display: grid;
        grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
        column-gap: 48px;
        align-items: start;
        max-width: 1160px;
        margin: 0 auto;
        padding: 40px 24px 80px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        top: 0;
    }

    body.theme-galerie .content-card > * {
        grid-column: 1;
    }

    /* En-tête mobile (photo, nom, spécialité, badges), en version sobre */
    body.theme-galerie .gx-aside > .galerie-header {
        align-items: center;
        gap: 18px;
        margin: 0;
        padding: 0 0 24px;
        border-bottom: 1px solid var(--sf-border);
    }

    body.theme-galerie .gx-aside > .galerie-header .galerie-avatar-img,
    body.theme-galerie .gx-aside > .galerie-header .galerie-avatar-initials {
        width: 76px;
        height: 76px;
        font-size: 28px;
    }

    body.theme-galerie .gx-aside > .galerie-header .galerie-name {
        font-size: 18px;
    }

    body.theme-galerie .gx-aside > .galerie-header .galerie-specialty {
        font-size: 14px;
        margin: 0;
    }

    body.theme-galerie .gx-aside > .galerie-header .gx-member-check {
        width: 19px;
        height: 19px;
        margin-left: 6px;
        vertical-align: -3px;
    }

    /* Note et badge sont déjà dans le titre du haut */
    body.theme-galerie .gx-aside > .galerie-header .galerie-inline-badges {
        display: none;
    }

    /* Le rendez-vous est déjà à côté : le bouton qui y menait n'a plus lieu d'être */
    body.theme-galerie .content-card .galerie-header-cta {
        display: none;
    }

    /* Le filet sous l'en-tête suffit : pas de second filet au-dessus des adresses */
    body.theme-galerie .gx-aside > .galerie-addresses-section {
        border-top: 0;
        margin-top: 8px;
    }

    /* Titre de la colonne de droite */
    body.theme-galerie #reserver .gx-booking-title {
        display: block;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--sf-ink);
        margin: 0 0 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--sf-border);
    }

    /* Titres des étapes en sous-titres : « Prendre rendez-vous » reste le titre du bloc */
    body.theme-galerie #reserver h2:not(.gx-booking-title) {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0;
    }

    /* Colonne praticienne collante : elle accompagne la prise de rendez-vous quand
       celle-ci est longue (beaucoup de prestations), au lieu de laisser un grand vide.
       Si elle dépasse l'écran, le script de book/index.php ajuste --gx-aside-top pour
       qu'elle se colle par le bas : rien n'est jamais hors de portée. */
    body.theme-galerie .gx-aside {
        display: block;
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: var(--gx-aside-top, 24px);
        align-self: start;
    }

    body.theme-galerie .content-card > #reserver {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        max-width: none;
        margin: 0;
        padding: 24px;
        border: 1px solid #DDDDDD;
        border-radius: var(--sf-radius-lg);
        /* Ombre légère façon Airbnb : la carte se détache sans cadre appuyé */
        box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
        background: #fff;
    }

    body.theme-galerie .content-card > #reserver .card {
        border-top: 0;
        padding-top: 0;
    }

    /* Calendrier puis créneaux l'un sous l'autre : côte à côte, ils ne tiennent pas
       dans la colonne (mêmes règles que la version mobile) */
    body.theme-galerie #reserver .calendar-slots-wrapper {
        flex-direction: column;
        gap: 24px;
    }

    body.theme-galerie #reserver .calendar-section {
        width: 100%;
        box-sizing: border-box;
    }

    body.theme-galerie #reserver .calendar-grid {
        justify-content: center;
    }

    body.theme-galerie #reserver .slots-section {
        width: 100%;
        padding-left: 0;
        border-left: none;
        margin-left: 0;
        padding-top: 24px;
        border-top: 1px solid var(--sf-border);
    }

    /* 44 px : la hauteur que suppose le repli « 4 lignes » de book/index.php */
    body.theme-galerie #reserver .slots-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 44px;
    }

    /* La barre d'action mobile n'a pas lieu d'être à côté de la prise de rendez-vous */
    body.theme-galerie .sticky-footer {
        display: none !important;
    }

    /* --- Avis Google en pleine largeur, sous les deux colonnes --- */
    body.theme-galerie .gx-reviews {
        display: block;
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 24px 80px;
    }

    /* La section suit : la marge basse de la grille passe sous les avis */
    body.theme-galerie .content-card:has(+ .gx-reviews) {
        padding-bottom: 48px;
    }

    body.theme-galerie .gx-reviews-head {
        padding-top: 40px;
        border-top: 1px solid var(--sf-border);
        margin-bottom: 24px;
    }

    body.theme-galerie .gx-reviews-title {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--sf-ink);
        margin: 0 0 8px;
    }

    body.theme-galerie .gx-reviews-summary {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body.theme-galerie .gx-reviews-score {
        font-size: 40px;
        font-weight: 700;
        line-height: 1;
        color: var(--sf-ink);
    }

    body.theme-galerie .gx-reviews-stars .star,
    body.theme-galerie .gx-review-stars .star {
        color: #d1d5db;
    }

    body.theme-galerie .gx-reviews-stars .star { font-size: 22px; }

    body.theme-galerie .gx-reviews-stars .star.full,
    body.theme-galerie .gx-reviews-stars .star.half,
    body.theme-galerie .gx-review-stars .star.full,
    body.theme-galerie .gx-review-stars .star.half {
        color: #fbbf24;
    }

    body.theme-galerie .gx-reviews-count {
        font-size: 15px;
        color: var(--sf-muted);
    }

    body.theme-galerie .gx-reviews-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    body.theme-galerie .gx-review {
        display: flex;
        flex-direction: column;
        padding: 20px;
        border: 1px solid var(--sf-border);
        border-radius: var(--sf-radius-lg);
        background: #fff;
    }

    body.theme-galerie .gx-review-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    body.theme-galerie .gx-review-avatar {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 600;
        font-size: 16px;
    }

    body.theme-galerie .gx-review-author {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: var(--sf-ink);
    }

    body.theme-galerie .gx-review-date {
        margin: 2px 0 0;
        font-size: 13px;
        color: var(--sf-muted);
    }

    body.theme-galerie .gx-review-stars {
        display: flex;
        gap: 1px;
        margin-bottom: 8px;
    }

    body.theme-galerie .gx-review-stars .star { font-size: 15px; }

    body.theme-galerie .gx-review-text {
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
        color: var(--sf-ink);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.theme-galerie .gx-review.is-open .gx-review-text {
        -webkit-line-clamp: unset;
        display: block;
    }

    body.theme-galerie .gx-review-more {
        align-self: flex-start;
        margin-top: 8px;
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        color: var(--sf-ink);
        text-decoration: underline;
        cursor: pointer;
    }

    body.theme-galerie .gx-review-more[hidden] {
        display: none;
    }

    body.theme-galerie .gx-reviews-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 24px;
        padding: 10px 18px;
        border: 1px solid var(--sf-border);
        border-radius: 9999px;
        font-size: 14px;
        font-weight: 600;
        color: var(--sf-ink);
        text-decoration: none;
    }

    body.theme-galerie .gx-reviews-link:hover {
        background: var(--sf-linen);
    }
}