/* ============================================================
   guides.css — styles for the How2Switzerland Guides section.
   Loaded alongside styles.css, which already provides the design
   tokens, .site-header, .eyebrow, .btn, section, .final-cta and
   .site-footer. Everything here is NEW classes, so the landing
   page is unaffected.

   The one exception is the :root block below: the landing page's
   app.js applies a dark-red accent (#8B0000) and compact density
   at runtime, so that is what visitors actually see. We mirror it
   here so guide pages match the live look without loading app.js.
   (Change these two values if the site accent ever changes.)
   ============================================================ */

:root {
  --red: #8B0000;
  --red-700: #6d0000;
  --red-soft: #f6e9e9;
  --section-pad-y: 80px;
}

/* ---------- Index hero ---------- */
.guides-hero { padding-bottom: 40px; }
.guides-hero .section-head { margin-bottom: 0; }

/* ---------- Index card grid ---------- */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--grey-150);
  border: 1px solid var(--grey-150);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.guide-card {
  background: var(--bg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 210px;
  transition: background .2s var(--ease);
}
.guide-card:hover { background: var(--bg-soft); }
.guide-card__emoji { font-size: 26px; line-height: 1; }
.guide-card__tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.guide-card h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.guide-card p { font-size: 14.5px; color: var(--grey-600); line-height: 1.55; margin: 0; }
.guide-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--red);
}
.guide-card__more svg { transition: transform .2s var(--ease); }
.guide-card:hover .guide-card__more svg { transform: translateX(3px); }

/* ---------- Individual guide: article column ---------- */
.guide-article { max-width: 760px; margin: 0 auto; }
.guide-article .guide-meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--grey-500);
  letter-spacing: 0.02em;
  margin-top: 16px;
}
.guide-article p { color: var(--grey-700); }
.guide-article a:not(.btn) {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.guide-article a:not(.btn):hover { color: var(--red-700); }

/* group of items within an article */
.guide-group { margin-top: 44px; }
.guide-group__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--grey-200);
}
.guide-group__head h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0; }
.guide-group__hint { font-size: 13px; color: var(--grey-500); font-family: var(--font-mono); letter-spacing: 0.02em; }

/* ---------- Checklist (first-7-days) ---------- */
.checklist-progress {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--grey-500);
  letter-spacing: 0.02em;
  margin: 4px 0 0;
}
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.check-item:hover { border-color: var(--grey-300); background: var(--bg-soft); }
.check-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1.5px solid var(--grey-400);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.check-item input[type="checkbox"]:checked { background: var(--red); border-color: var(--red); }
.check-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check-item__body { display: flex; flex-direction: column; gap: 3px; }
.check-item__title { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.check-item__desc { font-size: 14px; color: var(--grey-600); line-height: 1.5; }
.check-item input:checked ~ .check-item__body .check-item__title {
  color: var(--grey-400);
  text-decoration: line-through;
}

/* ---------- Info / cost notes (non-checklist) ---------- */
.note-list { display: flex; flex-direction: column; gap: 10px; }
.note-item {
  padding: 16px 18px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.note-item__title { display: block; font-size: 15.5px; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
.note-item__desc { display: block; font-size: 14px; color: var(--grey-600); line-height: 1.5; }

/* ---------- Download-as-PDF button ---------- */
.pdf-btn { font-family: inherit; margin-top: 14px; }

/* ---------- Link list (useful-links) ---------- */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--grey-150);
  border: 1px solid var(--grey-150);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.link-item {
  background: var(--bg);
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  transition: background .18s var(--ease);
}
.link-item:hover { background: var(--bg-soft); }
.link-item__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.link-item__name { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.link-item__url { font-family: var(--font-mono); font-size: 12px; color: var(--grey-400); }
.link-item__desc { font-size: 14px; color: var(--grey-600); line-height: 1.5; }
.link-item__go { flex: none; color: var(--red); }
.link-item__go svg { display: block; transition: transform .2s var(--ease); }
.link-item:hover .link-item__go svg { transform: translateX(3px); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .guide-card { min-height: 0; }
  .link-item { padding: 16px 18px; }
}

/* ---------- Print / save as PDF ---------- */
@media print {
  .site-header, .final-cta, .site-footer, .pdf-btn { display: none !important; }
  body { background: #fff; }
  .no-border { padding: 0; }
  .guide-article { max-width: none; }
  .guide-group { margin-top: 28px; }
  .check-item, .note-item { break-inside: avoid; border-color: #bbb; }
  .check-item input[type="checkbox"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}