/* Stiler for maler/turtips.html. Flyttet ut av <style> i siden (fase 1c, nov. 2026). Lastes på samme sted
   som før: etter tokens.css (og sider.css), før layout.css. */
/* Felles stiler (toppfelt, rutenett, kort) ligger i /assets/sider.css */
.et-page-hero { margin-bottom: 32px; }

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.post[hidden] { display: none; }
.pill {
  text-decoration: none; display: inline-flex; align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--et-border);
  background: #fff;
  color: var(--et-text-muted);
  font-family: var(--et-font-body);
  font-weight: 600; font-size: 14px;
  cursor: pointer; transition: all .15s;
}
.pill:hover { border-color: var(--et-anorakk); color: var(--et-heading); }
.pill.active { background: var(--et-anorakk); border-color: var(--et-anorakk); color: #fff; }

.post-img {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--et-vinterhimmel), var(--et-vinterhimmel));
  position: relative;
}
.post-img-icon { font-size: 48px; opacity: 0.5; }
.difficulty-tag {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
}
/* Vanskelighetsgrad i profilfargene (teksten bærer betydningen) */
.diff-lett { background: var(--et-vinterhimmel); color: var(--et-fjellbla); }
.diff-middels { background: var(--et-lys-stein); color: var(--et-bark); }
.diff-krevende { background: var(--et-fjellbla); color: #fff; }
.diff-ekspert { background: var(--et-bark); color: #fff; }

.post-tag {
  font-family: var(--et-font-body);
  font-weight: 700; font-size: 13px;
  color: var(--et-heading);   /* Anorakk er for svak som tekstfarge (2.88) */
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.post-stats {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--et-border-light);
  font-family: var(--et-font-body);
  font-size: 13px; color: var(--et-text-muted); font-weight: 600;
}
.post-stat { display: flex; gap: 4px; align-items: center; }

/* Trykkflater på mobil */
@media (max-width: 600px) {
  .pill { min-height: var(--et-touch); padding: 0 14px; font-size: 15px; }
  .filters { margin-bottom: 24px; }
}