/* useful-info.css — стили страницы Useful Information.
   Подключается только на useful-info.html. Расширяет общие токены/слои.
*/

.useful-page{ display:block; padding-bottom:80px; }

/* ───── Hero header ───── */
.useful-hero{ padding-top:120px; }
.useful-hero .eyebrow{
  display:inline-block; font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--green); padding:5px 10px;
  border:1px solid rgba(0,188,116,.4); border-radius:var(--r-pill);
  background:rgba(0,188,116,.10);
  margin-bottom:18px;
}
.useful-hero h1{
  font-size:clamp(34px, 5vw, 56px); line-height:1.05;
  font-weight:700; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 18px;
}
.useful-intro{
  font-size:15px; line-height:1.6; color:var(--ink-dim);
  max-width:720px; margin:0 0 36px;
}
.useful-intro b{ color:var(--ink); }

/* ───── Anchor TOC ───── */
.useful-toc{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:18px;
  border:1px solid var(--ink-faint); border-radius:var(--r-lg);
  background:rgba(255,255,255,.025);
}
.useful-toc a{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  font-size:12.5px; font-weight:600; color:var(--ink-dim);
  border:1px solid var(--ink-faint); border-radius:var(--r-pill);
  background:rgba(255,255,255,.02);
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.useful-toc a:hover{
  color:#fff; background:rgba(36,119,189,.18); border-color:rgba(78,164,230,.55);
}

/* ───── Section title ───── */
.info-section{ padding-top:36px; padding-bottom:0; }
.info-section .section-title{
  font-size:clamp(22px, 2.8vw, 30px);
  font-weight:700; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 22px;
}
.info-section > .wrap > .muted{
  font-size:13px; color:var(--ink-mute); margin:-12px 0 18px;
}

/* ───── Info-card grid ───── */
.info-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.info-grid-4{ grid-template-columns:repeat(4, 1fr); }

@media (max-width:1024px){
  .info-grid-4{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:720px){
  .info-grid, .info-grid-4{ grid-template-columns:1fr; }
}

.info-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--ink-faint);
  border-radius:var(--r-lg);
  padding:22px 24px;
  display:flex; flex-direction:column; gap:10px;
}
.info-card h3{
  font-size:16px; font-weight:700; letter-spacing:-.005em;
  color:var(--ink); margin:0 0 4px;
}
.info-card p, .info-card ul, .info-card li{
  font-size:13.5px; line-height:1.6; color:var(--ink-dim);
  margin:0;
}
.info-card ul{ padding-left:18px; }
.info-card li + li{ margin-top:4px; }
.info-card b{ color:var(--ink); font-weight:600; }
.info-card .muted{ color:var(--ink-mute); font-size:12.5px; }
.info-card .muted.small{ font-size:12px; }

/* Callout — важная заметка внутри карточки */
.info-card .callout{
  padding:12px 14px;
  background:rgba(255,200,80,.08);
  border:1px solid rgba(255,200,80,.25);
  border-radius:var(--r-md);
  font-size:13px;
}
.info-card .callout b{ color:var(--gold); }

/* Dinner list (внутри карточки meals) */
.info-card ul.dinners{
  margin-top:8px; padding-left:18px;
}
.info-card .dress{
  display:inline-block; margin-left:8px;
  font-family:"JetBrains Mono", monospace; font-size:11px;
  letter-spacing:.06em;
  color:var(--blue-2);
  padding:1px 8px; border-radius:var(--r-pill);
  background:rgba(78,164,230,.10); border:1px solid rgba(78,164,230,.22);
  white-space:nowrap;
}

/* Contact block внутри info-card */
.contact-block{
  display:flex; flex-direction:column; gap:6px;
  margin-top:8px;
  padding-top:12px;
  border-top:1px dashed var(--ink-faint);
}
.contact-block .contact-label{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600;
  margin-bottom:4px;
}
.contact-line{
  display:flex; align-items:baseline; gap:8px;
  font-size:13.5px; color:var(--ink-dim);
  text-decoration:none;
  padding:3px 0;
  transition:color .2s var(--ease);
}
.contact-line .lbl{
  flex:0 0 64px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600;
}
a.contact-line:hover{ color:var(--ink); }
a.contact-line:hover .lbl{ color:var(--blue-2); }
.contact-card{ background:rgba(78,164,230,.05); border-color:rgba(78,164,230,.20); }

/* ───── Accordion (details/summary) ───── */
.acc{
  border:1px solid var(--ink-faint); border-radius:var(--r-lg);
  background:rgba(255,255,255,.02);
  overflow:hidden;
  margin-top:14px;
}
.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; list-style:none;
  padding:16px 20px;
  font-size:14px; font-weight:600; color:var(--ink);
  transition:background .2s var(--ease);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ background:rgba(255,255,255,.03); }
.acc .acc-icon{
  font-size:14px; color:var(--ink-dim);
  transition:transform .25s var(--ease);
}
.acc[open] .acc-icon{ transform:rotate(180deg); }
.acc .acc-body{
  padding:8px 20px 22px;
  border-top:1px solid var(--ink-faint);
}
.acc .acc-body > * + *{ margin-top:14px; }

/* ───── Time-Table list ───── */
.tt-day{ padding:6px 0 14px; }
.tt-day + .tt-day{ border-top:1px dashed var(--ink-faint); padding-top:14px; }
.tt-day h4{
  font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--blue-2);
  margin:0 0 10px;
}
.tt-list{ list-style:none; padding:0; margin:0; }
.tt-list li{
  display:grid; grid-template-columns:140px 1fr; gap:14px;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04);
  font-size:13.5px; color:var(--ink-dim);
}
.tt-list li:last-child{ border-bottom:0; }
.tt-list .tt-time{
  font-family:"JetBrains Mono", monospace;
  font-size:12.5px; color:var(--ink);
  letter-spacing:.02em;
}
.tt-list .tt-event{ line-height:1.4; }
.tt-list .dress{ margin-left:6px; }

@media (max-width:680px){
  .tt-list li{ grid-template-columns:96px 1fr; gap:10px; font-size:13px; }
  .tt-list .tt-time{ font-size:11.5px; }
}
@media (max-width:480px){
  .tt-list li{ grid-template-columns:1fr; gap:2px; padding:8px 0; }
  .tt-list .tt-time{ font-size:11px; color:var(--blue-2); }
}

/* ───── Equipment list ───── */
.eq-heading{
  font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600;
  margin:18px 0 8px;
}
.eq-list{ list-style:square; padding-left:20px; margin:0; }
.eq-list li{
  font-size:13.5px; color:var(--ink-dim); line-height:1.6;
  padding:2px 0;
}

/* ───── Минимальный футер страницы (двух-колоночный, скромный) ───── */
.useful-page + .footer{
  margin-top:60px; padding:28px 0;
  border-top:1px solid var(--ink-faint);
  color:var(--ink-mute); font-size:12px;
}
.useful-page + .footer .footer-grid{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:18px;
}
.useful-page + .footer .f-col{
  display:flex; gap:18px; align-items:center;
}
.useful-page + .footer .m{
  font-family:"JetBrains Mono", monospace; letter-spacing:.2em;
  color:var(--ink-dim);
}
.useful-page + .footer a:hover{ color:var(--ink); }

/* ───── Footer-CTA ───── */
.useful-foot-cta{
  margin:40px auto 0; text-align:center;
}
.useful-foot-cta .results-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; letter-spacing:.06em; color:var(--ink-mute);
  padding:10px 18px; border-radius:var(--r-pill);
  border:1px solid var(--ink-faint);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.useful-foot-cta .results-back:hover{
  color:var(--ink); border-color:rgba(78,164,230,.55);
}