/* ============================================================
   TRIBECA LISBOA — FAQ page (main website)
   Black editorial canvas, sticky category nav, accordion items.
   Reuses --gut/--maxw/.r-wrap + Druk/Basis type + square corners.
   ============================================================ */
.fq-page{ background:#000; color:#fff; font-family:var(--font-text); -webkit-font-smoothing:antialiased; }

/* ---- hero ---- */
.fq-hero{ padding-top:var(--band-y); padding-bottom:32px; border-bottom:1px solid var(--line-dark); }
.fq-eyebrow{ font-family:var(--font-text); font-weight:700; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pink); margin-bottom:14px; }
.fq-h1{ margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(44px,8vw,104px); line-height:.86; letter-spacing:-.01em; max-width:14ch; }
.fq-intro{ margin:18px 0 0; font-family:var(--font-text); font-size:clamp(16px,1.8vw,19px);
  line-height:1.5; color:var(--fg-3); max-width:46ch; }

/* ---- search ---- */
.fq-search{ position:relative; display:flex; align-items:center; gap:10px; margin-top:28px;
  background:#0d0d0d; border:1px solid var(--line-dark2); padding:0 16px; max-width:560px; }
.fq-search > svg{ color:var(--fg-3); flex:none; }
.fq-search input{ flex:1; background:transparent; border:none; outline:none; color:#fff; min-width:0;
  font-family:var(--font-text); font-size:16px; padding:15px 0; }
.fq-search input::placeholder{ color:var(--fg-3); }
.fq-search-clear{ background:none; border:none; color:var(--fg-3); cursor:pointer; font-size:14px; padding:4px; flex:none; }

/* ---- sticky category nav ---- */
.fq-nav{ position:sticky; top:var(--hdr-h); z-index:30; background:#000;
  border-bottom:1px solid var(--line-dark); padding:14px 0; }
.fq-nav-row{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.fq-nav-row::-webkit-scrollbar{ display:none; }
.fq-nav-chip{ flex:none; background:transparent; border:1px solid var(--line-dark2); color:#fff; cursor:pointer;
  padding:10px 16px; font-family:var(--font-text); font-weight:700; font-size:13px; letter-spacing:.02em;
  text-transform:uppercase; white-space:nowrap; transition:background .15s, color .15s, border-color .15s; }
.fq-nav-chip:hover{ border-color:#fff; }
.fq-nav-chip.is-active{ background:#fff; color:#000; border-color:#fff; }

/* ---- categories + accordion ---- */
.fq-body{ padding-top:40px; padding-bottom:var(--band-y); }
.fq-cat{ margin-bottom:48px; scroll-margin-top:160px; }
.fq-cat-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--line-dark); }
.fq-cat-icon{ flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--pink); }
.fq-cat-icon svg{ width:24px; height:24px; }
.fq-cat-title{ margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,38px); line-height:1; letter-spacing:-.01em; }

.fq-list{ display:flex; flex-direction:column; }
.fq-item{ border-bottom:1px solid var(--line-dark); }
.fq-q{ width:100%; display:flex; align-items:flex-start; gap:16px; justify-content:space-between;
  background:none; border:none; cursor:pointer; text-align:left; color:#fff; padding:22px 0;
  font-family:var(--font-text); font-weight:700; font-size:clamp(17px,2vw,21px); line-height:1.3; transition:color .15s; }
.fq-q:hover{ color:var(--pink); }
.fq-q-mark{ flex:none; width:22px; height:22px; position:relative; margin-top:3px; }
.fq-q-mark::before, .fq-q-mark::after{ content:''; position:absolute; background:currentColor;
  transition:transform .25s cubic-bezier(.16,1,.3,1), opacity .25s; }
.fq-q-mark::before{ left:0; right:0; top:10px; height:2px; }
.fq-q-mark::after{ top:0; bottom:0; left:10px; width:2px; }
.fq-item.is-open .fq-q{ color:var(--pink); }
.fq-item.is-open .fq-q-mark::after{ transform:scaleY(0); opacity:0; }
.fq-a-wrap{ overflow:hidden; height:0; transition:height .28s cubic-bezier(.16,1,.3,1); }
.fq-a{ padding:0 38px 24px 0; }
.fq-a p{ margin:0; font-family:var(--font-text); font-size:16px; line-height:1.65; color:rgba(255,255,255,.82); max-width:68ch; }
@media (min-width:1024px){
  .fq-a p{ font-size:17px; }
  .fq-q{ padding:24px 0; }
}

/* ---- no results ---- */
.fq-empty{ padding:56px 0; text-align:center; }
.fq-empty-h{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:30px; }
.fq-empty p{ color:var(--fg-3); margin-top:10px; }
.fq-hl{ background:var(--pink); color:#000; padding:0 2px; }

/* ---- desktop: keep a comfortable reading width ---- */
@media (min-width:1024px){
  .fq-cats{ max-width:860px; }
}