/* ==========================================================================
   Components: Swiper rails, cards, accordion, photo shots.
   ========================================================================== */

/* 1. RAIL (Swiper) --------------------------------------------------------- */
.bhf-slider { position: relative; }
.bhf-slider__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.bhf-slider__nav { display: none; gap: .5rem; flex: none; }
.bhf-slider__btn {
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.25rem;
    border: 1.5px solid var(--bhf-line-2); color: var(--bhf-ink);
    transition: background .2s var(--bhf-ease), color .2s var(--bhf-ease), border-color .2s var(--bhf-ease), opacity .2s;
}
.bhf-slider__btn:hover { background: var(--bhf-ink); border-color: var(--bhf-ink); color: #fff; }
.bhf-slider__btn.is-disabled { opacity: .35; pointer-events: none; }
.bhf-slider__btn.is-locked { display: none; }
.bhf-slider.is-light .bhf-slider__btn { border-color: var(--bhf-line-inv-2); color: #fff; }
.bhf-slider.is-light .bhf-slider__btn:hover { background: #fff; border-color: #fff; color: var(--bhf-ink); }
@media (min-width: 720px) { .bhf-slider__nav { display: flex; } }
.bhf-slider__nav:has(.is-locked + .is-locked) { display: none; }

/* Let cards peek past the container edge so a swipe is obvious. */
.bhf-slider .swiper {
    overflow: hidden;
    margin-inline: calc(var(--bhf-gutter) * -1);
    padding: .4rem var(--bhf-gutter) 1.25rem;
    margin-block: -.4rem 0;
}
.bhf-slider .swiper-wrapper { align-items: stretch; }
.bhf-slider .swiper-slide { height: auto; }

/* Before Swiper starts (or without JS) the rail is a native scroll-snap strip. */
.bhf-swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bhf-swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar { display: none; }
.bhf-swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 84%; width: auto; scroll-snap-align: start; }
@media (min-width: 640px) { .bhf-swiper:not(.swiper-initialized) .swiper-slide { flex-basis: 44%; } }
@media (min-width: 900px) { .bhf-swiper:not(.swiper-initialized) .swiper-slide { flex-basis: 31%; } }

/* Progress bar (Swiper scrollbar) */
.bhf-slider__bar.swiper-scrollbar {
    position: relative; inset: auto; width: auto; height: 4px; margin: .35rem 0 0;
    border-radius: 4px; background: var(--bhf-line);
}
.bhf-slider__bar .swiper-scrollbar-drag { background: var(--bhf-emerald); border-radius: 4px; }
.bhf-slider.is-light .bhf-slider__bar.swiper-scrollbar { background: var(--bhf-line-inv); }
.bhf-slider.is-light .bhf-slider__bar .swiper-scrollbar-drag { background: var(--bhf-gold); }
.bhf-slider__bar.is-locked, .bhf-slider__bar.swiper-scrollbar-lock { display: none; }
.bhf-slider:not(.is-ready) .bhf-slider__bar { display: none; }

/* Bleed rail: runs to both viewport edges (photo band). */
.bhf-slider.is-bleed .swiper {
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--bhf-gutter), calc((100vw - var(--bhf-wrap)) / 2));
}

/* 2. CARDS ------------------------------------------------------------------ */
.bhf-card { display: flex; flex-direction: column; height: 100%; background: var(--bhf-white); border-radius: var(--bhf-r-lg); border: 1px solid var(--bhf-line); overflow: hidden; }
.bhf-card__title { font-size: 1.28rem; line-height: 1.2; }
.bhf-card__text { margin: .55rem 0 0; color: var(--bhf-text-soft); font-size: .96rem; line-height: 1.6; }
.bhf-card__go {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: 1.1rem;
    font-size: .88rem; font-weight: 800; color: var(--bhf-emerald);
    transition: gap .2s var(--bhf-ease);
}
.bhf-card__go .ti { font-size: 1.1em; }
a.bhf-card:hover .bhf-card__go, .bhf-card__link:hover .bhf-card__go { gap: .7rem; }

/* Area card: typographic */
.bhf-card--area {
    padding: 1.5rem 1.4rem 1.35rem; min-height: 100%;
    transition: transform .25s var(--bhf-ease), box-shadow .25s var(--bhf-ease), border-color .25s var(--bhf-ease);
}
a.bhf-card--area:hover { transform: translateY(-4px); box-shadow: var(--bhf-shadow-m); border-color: var(--bhf-emerald); }
.bhf-card__num { font-family: var(--bhf-serif); font-style: italic; font-size: 2.1rem; line-height: 1; color: var(--bhf-gold); margin-bottom: 1rem; }
.bhf-card--area .bhf-card__title { font-size: 1.5rem; }
.bhf-card__meta { margin: 1rem 0 0; font-size: .88rem; font-weight: 700; color: var(--bhf-ink); display: grid; gap: .1rem; }
.bhf-card__meta span { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bhf-muted); }

/* Photo card */
.bhf-card--photo { transition: transform .25s var(--bhf-ease), box-shadow .25s var(--bhf-ease); }
a.bhf-card--photo:hover { transform: translateY(-4px); box-shadow: var(--bhf-shadow-m); }
.bhf-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bhf-sand); }
.bhf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--bhf-ease); }
a.bhf-card--photo:hover .bhf-card__media img, .bhf-card__link:hover .bhf-card__media img { transform: scale(1.05); }
.bhf-card__tag {
    position: absolute; left: .85rem; top: .85rem;
    padding: .32rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .94);
    font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--bhf-ink);
}
.bhf-card--photo .bhf-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.35rem 1.4rem; }
.bhf-card--photo .bhf-card__text, .bhf-card--post .bhf-card__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Step card (on dark) */
.bhf-card--step {
    position: relative; padding: 1.6rem 1.4rem 1.5rem;
    background: rgba(255, 255, 255, .06); border-color: var(--bhf-line-inv); color: #fff;
}
.bhf-card--step .bhf-card__text { color: rgba(238, 243, 239, .8); }
.bhf-card--step .bhf-card__go { color: var(--bhf-gold-l); }
.bhf-card__icon {
    display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px;
    background: var(--bhf-emerald-soft); color: var(--bhf-emerald); font-size: 1.5rem; margin-bottom: 1.1rem;
}
.bhf-card--step .bhf-card__icon { background: rgba(217, 164, 65, .16); color: var(--bhf-gold-l); }
.bhf-card__step { position: absolute; right: 1.3rem; top: 1.1rem; font-family: var(--bhf-serif); font-style: italic; font-size: 1.6rem; color: rgba(255, 255, 255, .28); }

/* Price card */
.bhf-card--price { padding: 1.5rem 1.4rem; align-items: flex-start; }
.bhf .bhf-card--price .bhf-card__title { font-family: var(--bhf-sans); font-size: 1rem; font-weight: 800; letter-spacing: 0; }
.bhf-card__price { margin: .6rem 0 0; font-family: var(--bhf-serif); font-size: clamp(1.1rem, .95rem + .55vw, 1.3rem); line-height: 1.25; color: var(--bhf-emerald); letter-spacing: -.01em; white-space: nowrap; }
.bhf-card__unit { font-size: .82rem; font-weight: 700; color: var(--bhf-muted); margin-top: .15rem; }

/* Post card */
.bhf-card--post { transition: transform .25s var(--bhf-ease), box-shadow .25s var(--bhf-ease); }
.bhf-card--post:hover { transform: translateY(-4px); box-shadow: var(--bhf-shadow-m); }
.bhf-card__link { display: flex; flex-direction: column; height: 100%; }
.bhf-card--post .bhf-card__media { aspect-ratio: 16 / 10; }
.bhf-card--post .bhf-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.25rem 1.35rem; }
.bhf-card--post .bhf-card__title { font-size: 1.12rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: .35rem; }
.bhf-card__meta-row { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .76rem; font-weight: 700; color: var(--bhf-muted); }
.bhf-card__meta-row span + span::before { content: "·"; margin-right: .75rem; }

/* 3. PHOTO SHOT (gallery) --------------------------------------------------- */
.bhf-shot { position: relative; border-radius: var(--bhf-r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--bhf-sand); }
.bhf-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--bhf-ease); }
.bhf-shot:hover img { transform: scale(1.04); }
.bhf-shot figcaption {
    position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: .4rem;
    padding: 2.4rem 1rem .9rem; color: #fff; font-size: .85rem; font-weight: 700;
    background: linear-gradient(to top, rgba(6, 26, 22, .78), rgba(6, 26, 22, 0));
}
.bhf-shot figcaption .ti { color: var(--bhf-gold-l); }

/* 4. ACCORDION (native <details>) -------------------------------------------- */
.bhf-qa { border: 1px solid var(--bhf-line); border-radius: var(--bhf-r); background: var(--bhf-white); transition: border-color .2s, box-shadow .2s; }
.bhf-qa + .bhf-qa { margin-top: .75rem; }
.bhf-qa[open] { border-color: var(--bhf-emerald); box-shadow: var(--bhf-shadow-s); }
.bhf-qa__q {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.3rem; cursor: pointer; list-style: none;
    font-family: var(--bhf-serif); font-size: 1.12rem; font-weight: 500; line-height: 1.35;
}
.bhf-qa__q::-webkit-details-marker { display: none; }
.bhf-qa__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bhf-emerald-soft); }
.bhf-qa__icon::before, .bhf-qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--bhf-emerald); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .25s var(--bhf-ease); }
.bhf-qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.bhf-qa[open] .bhf-qa__icon::after { transform: translate(-50%, -50%) rotate(0); }
.bhf-qa__a { padding: 0 1.3rem 1.3rem; color: var(--bhf-text-soft); }
.bhf-qa__a p:last-child { margin-bottom: 0; }