/* ==========================================================================
   FAQ page (faq.php) — topic chips + live search, six sticky-headed groups,
   the dark Telegram group and the parallax "in short" band.
   Builds on site.css tokens and components only.
   ========================================================================== */

.pb-faqp-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Blocks the search hides: .pb-band is display:flex in site.css, which
   would otherwise beat the browser's own [hidden] rule. */
.pb-faqp-band[hidden], [data-faq-hide][hidden] { display: none !important; }

/* ------------------------------------------------------- topics + search */
.pb-faqp-topics { padding-bottom: clamp(56px, 7vw, 96px); }
.pb-faqp-topics .pb-head { margin-bottom: clamp(26px, 3.5vw, 40px); }

.pb-faqp-search { max-width: 660px; margin: 0 auto 26px; }
.pb-faqp-search[hidden] { display: none; }
.pb-faqp-search__box { position: relative; display: flex; align-items: center; }
.pb-faqp-search__box > .pb-i {
    position: absolute; left: 22px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
    color: var(--muted); pointer-events: none; stroke-width: 2.2;
}
.pb-faqp-search .pb-input {
    min-height: 62px; padding: 14px 132px 14px 56px; border-radius: 999px; font-size: 1.05rem;
    border-color: var(--line); background: #fff; box-shadow: var(--shadow-s);
    transition: border-color .25s, box-shadow .25s;
}
.pb-faqp-search .pb-input::placeholder { color: var(--muted); opacity: 1; font-weight: 500; }
/* The clear button only shows once something is typed, so the empty field
   gives its room to the example words. */
.pb-faqp-search .pb-input:placeholder-shown { padding-right: 22px; }
.pb-faqp-search .pb-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.pb-faqp-search .pb-input:focus { border-color: var(--teal-700); box-shadow: 0 0 0 5px rgba(15, 118, 110, .14), var(--shadow-s); }
.pb-faqp-search__clear {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px;
    border-radius: 999px; border: 0; background: var(--sand-100); color: var(--ink-2);
    font: 700 .88rem/1 var(--font-text); cursor: pointer; transition: background .2s, color .2s;
}
.pb-faqp-search__clear:hover { background: var(--terra-100); color: var(--terra-600); }
.pb-faqp-search__clear[hidden] { display: none; }
.pb-faqp-search__clear .pb-i { width: 16px; height: 16px; }
.pb-faqp-search__status { min-height: 1.5em; margin: 12px 0 0; text-align: center; font-size: .92rem; font-weight: 700; color: var(--teal-700); }

.pb-faqp-toc { justify-content: center; gap: 10px; }
.pb-faqp-toc a { gap: 9px; padding: 10px 12px 10px 14px; box-shadow: var(--shadow-s); transition: border-color .2s, color .2s, transform .35s var(--ease), box-shadow .35s var(--ease), opacity .25s; }
.pb-faqp-toc a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pb-faqp-toc a .pb-i { width: 18px; height: 18px; color: var(--terra); }
.pb-faqp-toc__n {
    display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
    background: var(--teal-50); color: var(--teal-700); font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.pb-faqp-toc a.is-empty { opacity: .4; pointer-events: none; box-shadow: none; }
@media (min-width: 681px) {
    .pb-faqp-toc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
    .pb-faqp-toc a { display: flex; width: 100%; padding: 13px 14px 13px 18px; border-radius: 18px; line-height: 1.3; }
    .pb-faqp-toc__n { margin-left: auto; }
}
@media (min-width: 681px) and (max-width: 980px) {
    .pb-faqp-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pb-faqp-empty {
    display: flex; gap: 18px; align-items: flex-start; max-width: 660px; margin: 30px auto 0; padding: 24px;
    border-radius: var(--radius); background: var(--sand-0); border: 1px dashed rgba(224, 104, 58, .4);
}
.pb-faqp-empty[hidden] { display: none; }
.pb-faqp-empty h3 { margin: 4px 0 6px; }
.pb-faqp-empty p { margin-bottom: 14px; }

/* ------------------------------------------------------------ the groups */
.pb-faqp-group { overflow-x: clip; }
.pb-faqp-group[hidden] { display: none; }
.pb-faqp-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5.5vw, 88px); align-items: start; }
/* Pinned low enough that the numeral above it clears the fixed header. */
.pb-faqp-aside { position: sticky; top: calc(var(--header-h) + 96px); }

/* Big outlined topic number. In the aside it is a watermark in the space
   above the heading (absolutely placed, so its parallax drift never pushes
   text); it drifts against the heading block, not the whole section. */
.pb-faqp-num {
    display: block; margin: 0 0 14px -.04em; user-select: none; pointer-events: none;
    /* No negative tracking: in Space Grotesk the long flag of the "1" would
       cut into the outline of the "0" before it ("01"). */
    font: 700 clamp(4.6rem, 9vw, 8rem)/.82 var(--font-display); letter-spacing: 0;
    color: transparent; -webkit-text-stroke: 1.5px rgba(15, 118, 110, .26);
}
.pb-faqp-aside > .pb-faqp-num {
    position: absolute; z-index: 0; right: 0; top: -.62em; margin: 0;
    font-size: clamp(5.5rem, 8.5vw, 8.25rem); -webkit-text-stroke-color: rgba(15, 118, 110, .2);
}
.pb-faqp-aside > :not(.pb-faqp-num) { position: relative; z-index: 1; }
.pb-section--sand .pb-faqp-aside > .pb-faqp-num { -webkit-text-stroke-color: rgba(224, 104, 58, .3); }
.pb-faqp-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pb-faqp-kicker .pb-eyebrow { margin: 0; }
.pb-faqp-kicker .pb-eyebrow::before { display: none; }
.pb-faqp-group h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: 14px; }
.pb-faqp-intro { color: var(--ink-2); font-size: 1.06rem; max-width: 40ch; }
.pb-faqp-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 22px; }
.pb-faqp-back { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--muted) !important; }
.pb-faqp-back:hover { color: var(--terra) !important; }
.pb-faqp-up { transform: rotate(-90deg); width: 16px; height: 16px; }

/* rooms: three room photos under the heading */
.pb-faqp-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.pb-faqp-thumb { display: flex; flex-direction: column; gap: 7px; color: var(--ink-2) !important; font-size: .8rem; font-weight: 700; line-height: 1.3; }
.pb-faqp-thumb img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px;
    box-shadow: var(--shadow-s); transition: transform .5s var(--ease), box-shadow .35s var(--ease);
}
.pb-faqp-thumb:hover img { transform: translateY(-3px); box-shadow: var(--shadow); }
.pb-faqp-thumb:hover { color: var(--teal-700) !important; }

/* location: address card with the map under the answers */
.pb-faqp-where {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; margin-top: 22px; padding: 22px;
    border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s);
}
.pb-faqp-where .pb-contact-list { margin-bottom: 20px; }
.pb-faqp-where .pb-icon { width: 44px; height: 44px; border-radius: 14px; }
.pb-faqp-where .pb-icon .pb-i { width: 22px; height: 22px; }
.pb-faqp-where .pb-contact-list a, .pb-faqp-where .pb-contact-list span { font-size: 1rem; }
.pb-faqp-where small { font-weight: 500; font-size: .85rem; line-height: 1.45; display: inline-block; margin-top: 2px; }
.pb-faqp-map { min-height: 280px; border-radius: 16px; box-shadow: none; }

/* accordion tweaks — the transition list keeps the staggered .reveal fade
   (opacity + delay) that a plain shorthand would reset. */
.pb-faqp-list .pb-faq { gap: 14px; }
.pb-faqp-list .pb-faq details {
    transition: opacity .9s var(--ease) var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms),
        box-shadow .3s, border-color .3s, background-color .3s;
}
.pb-faqp-list .pb-faq details:hover { border-color: rgba(15, 118, 110, .32); }
.pb-faqp-list .pb-faq summary { border-radius: 18px; transition: color .2s; }
.pb-faqp-list .pb-faq summary:focus-visible { outline-offset: -2px; }
.pb-faqp-list .pb-faq summary:hover { color: var(--teal-700); }
.pb-faqp-list .pb-faq details[hidden] { display: none; }
.pb-faqp-list .pb-faq__a { font-size: 1.01rem; line-height: 1.7; }
.pb-faqp-list .pb-faq__a a { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(15, 118, 110, .35); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pb-faqp-list .pb-faq__a a:hover { text-decoration-color: currentColor; }
.pb-section--white .pb-faqp-list .pb-faq details { background: var(--sand-50); }
.pb-section--white .pb-faqp-list .pb-faq details[open] { background: #fff; }
.pb-section--sand .pb-faqp-list .pb-faq details[open] { background: #fff; }

/* ------------------------------------------------- dark Telegram group */
/* clip, not hidden: hidden would make the section a scroll container and
   the sticky phone would stop sticking. */
.pb-faqp-group--account { overflow: clip; }
.pb-faqp-headrow {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(20px, 3.5vw, 40px);
    align-items: end; margin-bottom: clamp(28px, 3.5vw, 44px);
}
.pb-faqp-headrow .pb-faqp-num { grid-row: 1 / span 4; align-self: start; margin: 0; }
.pb-faqp-headrow > :not(.pb-faqp-num) { grid-column: 2; }
.pb-faqp-headrow .pb-faqp-intro { max-width: 62ch; }
.pb-faqp-headrow .pb-faqp-links { flex-direction: row; flex-wrap: wrap; gap: 12px 26px; margin-top: 6px; }
.pb-section--dark .pb-faqp-num { -webkit-text-stroke-color: rgba(153, 246, 228, .3); }
.pb-section--dark .pb-faqp-intro { color: rgba(233, 243, 241, .78); }
.pb-section--dark .pb-faqp-back { color: rgba(233, 243, 241, .6) !important; }
.pb-section--dark .pb-faqp-back:hover { color: #fff !important; }
.pb-section--dark .pb-faqp-kicker .pb-icon--tg { background: rgba(34, 158, 217, .16); color: #7cc8ef; border: 1px solid rgba(34, 158, 217, .35); }
.pb-section--dark .pb-faqp-list .pb-faq details { background: rgba(255, 255, 255, .05); border-color: var(--line-light); }
.pb-section--dark .pb-faqp-list .pb-faq details:hover { border-color: rgba(153, 246, 228, .35); }
.pb-section--dark .pb-faqp-list .pb-faq details[open] { background: rgba(255, 255, 255, .09); border-color: rgba(45, 212, 191, .4); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .6); }
.pb-section--dark .pb-faqp-list .pb-faq summary { color: #fff; }
.pb-section--dark .pb-faqp-list .pb-faq summary:hover { color: var(--teal-200); }
.pb-section--dark .pb-faqp-list .pb-faq summary::after {
    background-color: rgba(45, 212, 191, .14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399f6e4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.pb-section--dark .pb-faqp-list .pb-faq details[open] summary::after { background-color: rgba(224, 104, 58, .3); }
.pb-section--dark .pb-faqp-list .pb-faq__a { color: rgba(233, 243, 241, .8); }
.pb-section--dark .pb-faqp-list .pb-faq__a a { color: var(--teal-200); text-decoration-color: rgba(153, 246, 228, .4); }

/* Heading + answers on the left, the phone beside them from the top. */
.pb-faqp-tg { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.pb-faqp-tg__phone { position: sticky; top: calc(var(--header-h) + 28px); padding-top: 8px; }
.pb-faqp-tg__phone .pb-phone { width: min(310px, 100%); }
.pb-faqp-tg__phone .pb-muted { color: rgba(233, 243, 241, .6); }

/* A pinned heading taller than the viewport would hide its own bottom. */
@media (min-width: 981px) and (max-height: 700px) {
    .pb-faqp-aside { position: relative; top: 0; }
}

/* ----------------------------------------------- while a search is active */
.pb-faqp-searching [data-faq-kicker-n] { display: none; }
.pb-faqp-searching .pb-faqp-topics { padding-bottom: 24px; }
.pb-faqp-searching .pb-faqp-group { padding-block: clamp(28px, 4vw, 52px); }
.pb-faqp-searching .pb-faqp-intro,
.pb-faqp-searching .pb-faqp-links,
.pb-faqp-searching .pb-faqp-thumbs,
.pb-faqp-searching .pb-faqp-num { display: none; }
.pb-faqp-searching .pb-faqp-aside { position: static; }
.pb-faqp-searching .pb-faqp-headrow { display: block; margin-bottom: 20px; }

/* --------------------------------------------------- "in short" band */
.pb-faqp-band { min-height: clamp(480px, 74vh, 680px); padding-block: clamp(72px, 9vw, 120px); }
.pb-faqp-band .pb-eyebrow { color: var(--gold); }
.pb-faqp-band h2 { max-width: 16ch; }
.pb-faqp-qmark {
    position: absolute; right: 4%; top: 50%; z-index: -1; margin-top: -.5em; pointer-events: none; user-select: none;
    font: 700 clamp(14rem, 34vw, 30rem)/1 var(--font-display); letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 2px rgba(242, 181, 107, .38);
}
.pb-faqp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin-top: 34px; }
.pb-faqp-fact {
    padding: 20px 22px 22px; border-radius: 22px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    transition: background .3s, transform .5s var(--ease);
}
.pb-faqp-fact:hover { background: rgba(255, 255, 255, .16); transform: translateY(-4px); }
.pb-faqp-fact strong { display: flex; align-items: baseline; gap: 7px; font: 700 clamp(2.3rem, 4.2vw, 3.3rem)/1 var(--font-display); letter-spacing: -.04em; color: #fff; }
.pb-faqp-fact strong small { font-size: .36em; letter-spacing: .02em; color: var(--gold); font-weight: 700; }
.pb-faqp-fact > span { display: block; margin-top: 10px; color: rgba(236, 246, 244, .84); font-size: .93rem; line-height: 1.4; }

/* ------------------------------------------------------- read-on cards */
.pb-faqp-more { display: flex; flex-direction: column; gap: 6px; color: var(--ink) !important; }
.pb-faqp-more h3 { margin: 18px 0 4px; }
.pb-faqp-more p { flex: 1; margin: 0 0 14px; }
.pb-faqp-more .pb-link-arrow { color: var(--teal-700); }
.pb-faqp-more:hover .pb-link-arrow { color: var(--terra); }
.pb-faqp-more:hover .pb-link-arrow .pb-i { transform: translateX(4px); }

/* --------------------------------------------------------- responsive */
@media (max-width: 980px) {
    .pb-faqp-grid, .pb-faqp-tg { grid-template-columns: minmax(0, 1fr); }
    .pb-faqp-aside, .pb-faqp-tg__phone { position: relative; top: 0; }
    .pb-faqp-aside > .pb-faqp-num { font-size: clamp(5rem, 11vw, 6.5rem); top: -.62em; }
    .pb-faqp-aside > .pb-faqp-intro { max-width: 62ch; }
    .pb-faqp-links { flex-direction: row; flex-wrap: wrap; gap: 12px 26px; margin-top: 4px; }
    .pb-faqp-thumbs { max-width: 560px; }
    .pb-faqp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pb-faqp-tg__phone { max-width: 360px; margin-inline: auto; padding-top: 0; }
}
@media (max-width: 680px) {
    .pb-faqp-search .pb-input { min-height: 56px; padding: 12px 56px 12px 50px; font-size: 1rem; }
    .pb-faqp-search__box > .pb-i { left: 18px; }
    .pb-faqp-search__clear { padding: 8px 12px; }
    .pb-faqp-search__clear { font-size: 0; gap: 0; }
    .pb-faqp-search__clear .pb-i { width: 18px; height: 18px; }
    .pb-faqp-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pb-faqp-toc a { display: flex; width: 100%; height: 100%; gap: 8px; padding: 10px 10px 10px 12px; border-radius: 16px; font-size: .86rem; line-height: 1.25; }
    .pb-faqp-toc__n { margin-left: auto; min-width: 24px; height: 24px; }
    .pb-faqp-num { -webkit-text-stroke-width: 1.2px; }
    .pb-faqp-aside > .pb-faqp-num,
    .pb-faqp-headrow .pb-faqp-num { font-size: 4.4rem; top: -.62em; }
    .pb-faqp-kicker { gap: 10px; margin-bottom: 10px; }
    .pb-faqp-kicker .pb-icon { width: 40px; height: 40px; border-radius: 12px; }
    .pb-faqp-kicker .pb-icon .pb-i { width: 20px; height: 20px; }
    .pb-faqp-kicker .pb-eyebrow { font-size: .7rem; letter-spacing: .12em; }
    .pb-faqp-group h2 { font-size: 1.65rem; }
    .pb-faqp-links { gap: 4px 20px; }
    .pb-faqp-links a { min-height: 44px; display: inline-flex; align-items: center; }
    .pb-faqp-thumbs { gap: 8px; margin-top: 14px; }
    .pb-faqp-thumb { font-size: .74rem; }
    .pb-faqp-thumb img { border-radius: 12px; }
    .pb-faqp-headrow { position: relative; grid-template-columns: minmax(0, 1fr); }
    .pb-faqp-headrow .pb-faqp-num { position: absolute; right: 0; z-index: 0; }
    .pb-faqp-headrow > :not(.pb-faqp-num) { grid-column: 1; position: relative; z-index: 1; }
    .pb-faqp-where { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .pb-faqp-map { min-height: 240px; }
    .pb-faqp-fact { padding: 16px 16px 18px; border-radius: 18px; }
    .pb-faqp-fact strong { font-size: 2.1rem; }
    .pb-faqp-fact > span { font-size: .86rem; }
    .pb-faqp-qmark { right: 0; top: 22%; font-size: 13rem; }
    .pb-faqp-empty { flex-direction: column; }
    .pb-faqp-more { padding: 18px 20px; }
    .pb-faqp-more .pb-icon { width: 44px; height: 44px; border-radius: 14px; }
    .pb-faqp-more h3 { margin: 10px 0 2px; }
    .pb-faqp-more p { margin-bottom: 8px; }
}
/* Narrow phones: smaller bot text so the first message's headline stays
   inside the mock-up's screen instead of under its top bar. */
@media (max-width: 400px) {
    .pb-faqp-tg__phone .pb-bubble { font-size: .74rem; line-height: 1.4; }
}