/* ============================================================================
   LAYOUT – delade sidstrukturer
   ----------------------------------------------------------------------------
   Återanvändbara sid-skelett som flera sidor delar: sidhuvud med logga och
   tillbaka-länk, innehållsbredd, hero-block, kortrutnät (landningssidan) och
   en enkel packlist-checklista. Bygger på theme.css + components.css.

   Länka in EFTER theme.css och components.css:
     <link rel="stylesheet" href="assets/layout.css">
   (justera sökväg till ../assets/... för sidor i undermappar)
   ============================================================================ */

:root {
  /* Standard: textbredd. En sida kan välja den breda varianten genom att
     sätta  --maxw: var(--maxw-wide);  i sitt eget :root. */
  --maxw: var(--maxw-text);
}

/* ---------- sidhuvud (logga + titel + tillbaka) ---------- */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 30;
}
.site-header .mole-mini { width: 38px; height: 38px; flex: 0 0 38px; }
.site-header .titles { flex: 1; min-width: 0; }
.site-header .titles .sup {
  font-family: var(--font-head);
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--turkos); line-height: 1; margin-bottom: 2px;
}
.site-header .titles h1 { font-size: 18px; font-weight: 800; color: var(--purple); margin: 0; line-height: 1; }
.site-header .back {
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  color: var(--teal); border: 1px solid rgba(17,100,104,0.3);
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
}
.site-header .back:hover { background: rgba(17,100,104,0.07); color: var(--teal); }

/* ---------- innehållsbredd ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px 100px; }

/* ---------- hero (rubrik + ingress) ---------- */
.hero { background: var(--bg); }
.hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 30px 22px 24px; }
.hero .eyebrow {
  font-family: var(--font-head); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px;
}
.hero h1 { font-family: var(--font-head); font-size: clamp(30px, 6vw, 48px); font-weight: 800; color: var(--purple); max-width: 16ch; }
.hero p.lead { margin: 16px 0 0; font-size: clamp(16px, 2.2vw, 19px); color: var(--ink); max-width: 56ch; }

/* sektioner inom .wrap */
.section { padding: 26px 0; border-top: 1px solid var(--line-2); }
.section:first-child { border-top: none; }
.section h2 { font-size: clamp(22px, 3.4vw, 28px); color: var(--purple); margin: 0 0 14px; }
.section p { margin: 0 0 14px; }
.section p:last-child { margin-bottom: 0; }

/* ---------- landningssida: stort märke + kortrutnät ---------- */
.landing {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px 64px; gap: 40px; text-align: center;
}
.landing .brand { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.landing .brand .mole-hero { width: 168px; height: 168px; }
.landing .brand .wordmark { font-family: var(--font-head); font-weight: 800; color: var(--purple); font-size: clamp(26px, 5vw, 36px); letter-spacing: -0.01em; }
.landing .brand .tag { font-family: var(--font-head); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }

.tile-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; width: 100%; max-width: 760px; }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); padding: 26px 26px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 248px; text-align: center;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tile:hover { transform: translateY(-3px); border-color: var(--purple); }
.tile img { max-width: 100%; max-height: 118px; width: auto; object-fit: contain; }
.tile h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.tile p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }

/* ---------- enkel checklista (packlista light) ---------- */
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 9px; }
.check-item {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 11px;
  padding: 11px 13px; cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s, transform .1s;
}
.check-item:hover { border-color: var(--purple); transform: translateY(-1px); }
.check-item.checked { background: rgba(99,193,191,0.09); border-color: var(--turkos); }
.check-item.checked .check-text { color: var(--teal); }
.check-item .check-box {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid var(--line); background: var(--bg);
  display: grid; place-items: center; transition: all .15s;
}
.check-item.checked .check-box { background: var(--teal); border-color: var(--teal); }
.check-item .checkmark { display: none; color: #fff; }
.check-item.checked .checkmark { display: block; }
.check-text {
  font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--ink);
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.3;
}

/* ---------- enkel sidfot ---------- */
.site-footer {
  max-width: var(--maxw); margin: 0 auto; padding: 28px 22px 40px;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-head); font-size: 13px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between;
}
.site-footer a { font-weight: 600; }