/**
 * Boutique (experience CPT) styles — archive-experience.php + single-experience.php
 * and the shared template-parts/card-experience.php.
 *
 * Every design token is consumed as var(--token, fallback): the fallbacks are
 * the measured values from the source site, so these views render faithfully
 * even if the base stylesheet's :root block loads later or changes.
 *
 * Sections:
 *   1. Shared: hero band, ornament, curve divider, buttons
 *   2. Archive: grid section, cards, pagination, empty state, cross-sell
 *   3. Single: detail layout, gallery, meta chips, booking block
 *   4. Responsive (<900px, <767px)
 */

/* ------------------------------------------------------------------ */
/* 1. Shared: navy hero band with curved bottom edge                   */
/* ------------------------------------------------------------------ */

.boutique-hero {
    position:      relative;
    background:    var(--color-ink, #2c3a45);
    color:         var(--color-on-dark, #fbf8f6);

    /* Room for the fixed transparent header (~89px) + band presence. */
    padding:       calc(var(--header-h, 89px) + 4.5rem) 1.5rem 5.5rem;
    text-align:    center;
}

.boutique-hero__inner {
    max-width: var(--content-max, 1432px);
    margin:    0 auto;
}

.boutique-hero__back {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;

    margin-bottom:   2rem;
    color:           inherit;
    text-decoration: none;

    font-family:     var(--font-button, "Francesco", "Lexend", sans-serif);
    font-variant:    small-caps;
    font-size:       0.875rem;
    font-weight:     300;
    opacity:         0.85;
    transition:      opacity 0.2s ease;
}

.boutique-hero__back:hover,
.boutique-hero__back:focus-visible { opacity: 1; text-decoration: underline; }

.boutique-hero__title {
    margin:         0;
    font-family:    var(--font-heading, "Parnaso", "Cormorant Garamond", serif);
    font-weight:    var(--heading-weight, 200);
    font-size:      var(--text-section-title, clamp(2rem, 3.7vw, 3.35rem));
    line-height:    1.0;
    letter-spacing: var(--tracking-heading, -0.02em);
}

.boutique-hero__subtitle {
    margin:         1.1rem 0 0;
    font-family:    var(--font-body, "Lexend", sans-serif);
    font-weight:    var(--body-weight, 300);
    font-size:      0.95rem;
    letter-spacing: 0.04em;
    opacity:        0.9;
}

/* Signature ornament: thin line — solid diamond — thin line, diamond tips.  */
.ornament {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0;
    margin-top:      2.2rem;
    color:           var(--color-on-dark, #fbf8f6);
}

.ornament__line {
    width:      min(140px, 22vw);
    height:     1px;
    background: currentColor;
}

.ornament__diamond {
    width:      14px;
    height:     14px;
    margin:     0 14px;
    background: currentColor;
    transform:  rotate(45deg);
}

.ornament__tip {
    width:      6px;
    height:     6px;
    background: currentColor;
    transform:  rotate(45deg);
}

/* Convex curve sweeping the navy band into the cream section below.        */
.curve-divider {
    position:    absolute;
    left:        0;
    right:       0;
    bottom:      -1px; /* overlap to avoid sub-pixel seams */
    line-height: 0;
    color:       var(--color-bg, #fbf8f6); /* the curve is "cut" in the next section's color */
    pointer-events: none;
}

.curve-divider svg {
    display: block;
    width:   100%;
    height:  clamp(28px, 5.5vw, 80px);
}

/* ------------------------------------------------------------------ */
/* 1b. Buttons (Francesco small-caps, three site variants)             */
/* ------------------------------------------------------------------ */

.boutique-archive .btn,
.experience-single .btn,
.experience-card .btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.55rem;

    padding:         14px 22px;
    font-family:     var(--font-button, "Francesco", "Lexend", sans-serif);
    font-variant:    small-caps;
    font-size:       var(--text-button, 0.875rem);
    font-weight:     300;
    letter-spacing:  0.03em;
    line-height:     1;
    text-decoration: none;
    cursor:          pointer;
    transition:      opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Outline pill — the site's dominant CTA shape. */
.btn--outline {
    background:    transparent;
    border:        var(--btn-border, 0.8px solid currentColor);
    border-radius: var(--btn-radius-pill, 300px);
}

.btn--outline:hover,
.btn--outline:focus-visible { opacity: 0.65; }

/* Color keys for the outline pill. */
.btn--sage { color: var(--color-accent, #a3af97); }
.btn--ink  { color: var(--color-ink, #2c3a45); }

/* Solid sage rectangle (header "Réserver" style). */
.btn--solid-sage {
    background:    var(--color-accent, #a3af97);
    color:         var(--color-on-dark, #fbf8f6);
    border:        none;
    border-radius: var(--btn-radius-solid, 5.6px);
}

.btn--solid-sage:hover,
.btn--solid-sage:focus-visible { opacity: 0.85; }

/* ------------------------------------------------------------------ */
/* 2. Archive: cream grid section                                      */
/* ------------------------------------------------------------------ */

.boutique-grid-section {
    background: var(--color-bg, #fbf8f6);
    padding:    var(--section-pad-lg, 6.6vw) 1.5rem;
}

.boutique-grid-section__inner {
    max-width: 1300px;
    margin:    0 auto;
}

/* Source site uses a 2-column boutique grid with a wide ~55px gap. */
.boutique-grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   55px;
}

/* Related grid on the single view sits inside a narrower band. */
.boutique-grid--related { margin-top: 2.5rem; }

/* ---- Experience card (borderless listing card) -------------------- */

.experience-card {
    display:        flex;
    flex-direction: column;
    background:     transparent; /* borderless: bare image + stacked text */
}

.experience-card__media {
    display:      block;
    line-height:  0;
}

.experience-card__media img,
.experience-card__image {
    width:         100%;
    height:        auto;
    aspect-ratio:  8 / 7; /* near-square ~0.87 w/h measured on source products */
    object-fit:    cover;
    border-radius: var(--img-radius, 0); /* images are ALWAYS square-cornered */
    display:       block;
}

.experience-card__placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    aspect-ratio:    8 / 7;
    background:      var(--color-accent-wash, rgba(163, 175, 151, 0.49));
    color:           var(--color-ink, #2c3a45);
}

.experience-card__body {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    padding-top:    1.35rem;
}

.experience-card__title {
    margin:         0;
    font-family:    var(--font-blog, "Familjen Grotesk", sans-serif);
    font-weight:    400;
    font-size:      1.1rem; /* product names ~15.7-18px on source, scaled up slightly for the card grid */
    letter-spacing: -0.02em;
    line-height:    1.2;
}

.experience-card__title a {
    color:           var(--color-ink, #2c3a45);
    text-decoration: none;
    transition:      opacity 0.2s ease;
}

.experience-card__title a:hover,
.experience-card__title a:focus-visible { opacity: 0.65; }

.experience-card__meta {
    margin:      0.55rem 0 0;
    font-family: var(--font-body, "Lexend", sans-serif);
    font-weight: var(--body-weight, 300);
    font-size:   0.85rem;
    color:       var(--color-accent-2, #917a6e);
}

.experience-card__meta-sep { margin: 0 0.4rem; }

.experience-card__excerpt {
    margin:      0.8rem 0 0;
    font-family: var(--font-body, "Lexend", sans-serif);
    font-weight: var(--body-weight, 300);
    font-size:   var(--text-body, 0.77rem);
    line-height: 1.5;
    color:       var(--color-ink, #2c3a45);
    max-width:   55ch;
}

/* Thin rule in the current text color, like the source listing cards. */
.experience-card__rule {
    width:      100%;
    height:     0;
    margin:     1.1rem 0 1.2rem;
    border:     none;
    border-top: 0.8px solid var(--color-ink, #2c3a45);
    opacity:    0.35;
}

/* ---- Pagination / empty state ------------------------------------- */

.boutique-pagination {
    margin-top: 4rem;
    text-align: center;
    font-family: var(--font-body, "Lexend", sans-serif);
    font-weight: var(--body-weight, 300);
    font-size:   0.85rem;
}

.boutique-pagination .page-numbers {
    display:         inline-block;
    padding:         0.4rem 0.75rem;
    color:           var(--color-ink, #2c3a45);
    text-decoration: none;
}

.boutique-pagination .page-numbers.current {
    border-bottom: 1px solid var(--color-accent, #a3af97);
}

.boutique-empty {
    text-align: center;
    padding:    3rem 0;
    font-family: var(--font-body, "Lexend", sans-serif);
    font-weight: var(--body-weight, 300);
    color:       var(--color-ink, #2c3a45);
}

.boutique-empty p { margin: 0 0 1.6rem; }

/* ---- Cross-sell band (sage wash, like the site's soft bands) ------- */

.boutique-crosssell {
    background: var(--color-accent-wash, rgba(163, 175, 151, 0.49));
    padding:    var(--section-pad-md, 3.3vw) 1.5rem calc(var(--section-pad-md, 3.3vw) + 1.5rem);
    text-align: center;
}

.boutique-crosssell__inner {
    max-width: 720px;
    margin:    0 auto;
}

.boutique-crosssell__inner--wide { max-width: 1100px; }

.boutique-crosssell__title {
    margin:         0 0 1.1rem;
    font-family:    var(--font-heading, "Parnaso", "Cormorant Garamond", serif);
    font-weight:    var(--heading-weight, 200);
    font-size:      clamp(1.5rem, 2.4vw, 2.1rem);
    line-height:    1.0;
    letter-spacing: var(--tracking-heading, -0.02em);
    color:          var(--color-ink, #2c3a45);
}

.boutique-crosssell__text {
    margin:      0 auto 1.8rem;
    max-width:   55ch;
    font-family: var(--font-body, "Lexend", sans-serif);
    font-weight: var(--body-weight, 300);
    font-size:   var(--text-body, 0.77rem);
    line-height: 1.5;
    color:       var(--color-ink, #2c3a45);
}

/* Related cards sit on the sage wash: left-align their content. */
.boutique-crosssell--related { text-align: left; }
.boutique-crosssell--related .boutique-crosssell__title { text-align: center; }

/* ------------------------------------------------------------------ */
/* 3. Single: detail layout                                            */
/* ------------------------------------------------------------------ */

.experience-detail {
    background: var(--color-bg, #fbf8f6);
    padding:    var(--section-pad-lg, 6.6vw) 1.5rem;
}

.experience-detail__inner {
    display:               grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
    gap:                   clamp(2rem, 4.5vw, 4.5rem);
    max-width:             1300px;
    margin:                0 auto;
    align-items:           start;
}

/* ---- Gallery ------------------------------------------------------- */

.experience-gallery__stage {
    margin:      0;
    line-height: 0;
}

.experience-gallery__stage img {
    width:         100%;
    height:        auto;
    aspect-ratio:  8 / 7;
    object-fit:    cover;
    border-radius: var(--img-radius, 0);
    display:       block;
    transition:    opacity 0.25s ease; /* soft swap when JS changes the stage */
}

.experience-gallery__stage img.is-swapping { opacity: 0; }

.experience-gallery__thumbs {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap:                   10px;
    margin:                10px 0 0;
    padding:               0;
    list-style:            none;
}

.experience-gallery__thumb {
    display:     block;
    width:       100%;
    padding:     0;
    border:      none;
    background:  none;
    cursor:      pointer;
    line-height: 0;
}

.experience-gallery__thumb img {
    width:         100%;
    height:        auto;
    aspect-ratio:  1 / 1;
    object-fit:    cover;
    border-radius: var(--img-radius, 0);
    display:       block;
    opacity:       0.85;
    transition:    opacity 0.2s ease, outline-color 0.2s ease;
    outline:       2px solid transparent;
    outline-offset: 2px;
}

.experience-gallery__thumb:hover img,
.experience-gallery__thumb:focus-visible img { opacity: 1; }

.experience-gallery__thumb.is-active img {
    opacity: 1;
    outline-color: var(--color-accent, #a3af97);
}

/* ---- Meta chips ----------------------------------------------------- */

.experience-meta {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.7rem;
    margin:     0 0 1.8rem;
    padding:    0;
    list-style: none;
}

.experience-meta__chip {
    display:       inline-flex;
    align-items:   center;
    gap:           0.5rem;

    padding:       0.55rem 1rem;
    background:    var(--color-surface, #ffffff);
    color:         var(--color-ink, #2c3a45);
    border:        0.8px solid var(--color-accent, #a3af97);
    border-radius: var(--btn-radius-pill, 300px);

    font-family:   var(--font-body, "Lexend", sans-serif);
    font-weight:   var(--body-weight, 300);
    font-size:     0.82rem;
}

.experience-meta__chip svg { color: var(--color-accent, #a3af97); flex: none; }

/* ---- Description (the_content output) ------------------------------- */

.experience-description {
    font-family: var(--font-body, "Lexend", sans-serif);
    font-weight: var(--body-weight, 300);
    font-size:   0.85rem; /* slightly above the site's 12.3px for readability on long product copy */
    line-height: 1.6;
    color:       var(--color-ink, #2c3a45);
    max-width:   60ch;
}

.experience-description h2,
.experience-description h3 {
    font-family:    var(--font-heading, "Parnaso", "Cormorant Garamond", serif);
    font-weight:    var(--heading-weight, 200);
    letter-spacing: var(--tracking-heading, -0.02em);
    line-height:    1.1;
    margin:         2rem 0 0.8rem;
}

.experience-description h2 { font-size: 1.45rem; }
.experience-description h3 { font-size: 1.2rem; }

.experience-description p  { margin: 0 0 1em; }

.experience-description a {
    color: var(--color-accent-2, #917a6e);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.experience-description ul,
.experience-description ol { padding-left: 1.3em; margin: 0 0 1em; }

.experience-description img {
    max-width:     100%;
    height:        auto;
    border-radius: var(--img-radius, 0);
}

/* ---- Booking block --------------------------------------------------- */

.experience-booking {
    margin-top: 2.4rem;
    padding:    var(--card-pad, 25px 19px);
    background: var(--color-surface, #ffffff); /* white card, like the site's booking widget card */
}

.experience-booking__title {
    margin:         0 0 1.2rem;
    font-family:    var(--font-heading, "Parnaso", "Cormorant Garamond", serif);
    font-weight:    var(--heading-weight, 200);
    font-size:      1.35rem;
    letter-spacing: var(--tracking-heading, -0.02em);
    line-height:    1.1;
    color:          var(--color-ink, #2c3a45);
}

.experience-booking__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.8rem;
}

.experience-booking__note {
    margin:      1.1rem 0 0;
    font-family: var(--font-body, "Lexend", sans-serif);
    font-weight: var(--body-weight, 300);
    font-size:   0.75rem;
    line-height: 1.5;
    color:       var(--color-ink, #2c3a45);
    opacity:     0.75;
}

/* ------------------------------------------------------------------ */
/* 4. Responsive                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {

    /* Single detail stacks: gallery above content. */
    .experience-detail__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {

    /* Archive grid collapses to one full-width column, like the source. */
    .boutique-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }

    .boutique-hero { padding-bottom: 4rem; }

    /* Diamond ornament reads relatively larger on mobile, per source. */
    .ornament__diamond { width: 18px; height: 18px; }

    .experience-booking__actions .btn { width: 100%; }
}

/* Respect reduced-motion preferences: no fade transitions. */
@media (prefers-reduced-motion: reduce) {

    .experience-gallery__stage img,
    .experience-gallery__thumb img,
    .boutique-archive .btn,
    .experience-single .btn { transition: none; }
}