/* Innleggskort. Brukes på forsiden (index.html#blogg) og i bloggoversikten (blogg.html). */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }

.post-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(33, 93, 110, 0.1);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 25px 60px -25px rgba(33, 93, 110, 0.25); }
.post-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.post-card-cover { position: relative; aspect-ratio: 16 / 9; background: var(--teal-deep); overflow: hidden; }
.post-card-cover::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(17, 39, 42, 0.4) 0%, transparent 45%);
}
.post-card-cover.stat::before { background: radial-gradient(circle at 70% 30%, var(--teal-mid), transparent 60%); opacity: 0.5; }
.post-card-cover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--rust), var(--rust-soft));
}
.post-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.post-card:hover .post-card-cover img { transform: scale(1.03); }

.post-card-tag {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal); background: var(--paper);
  padding: 5px 12px; border-radius: 100px;
}
.post-card-tag.partner { color: var(--rust-deep); }

.post-card-stat { position: absolute; left: 24px; bottom: 26px; z-index: 2; color: var(--paper); }
.post-card-stat strong { display: block; font-family: 'Fraunces', serif; font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.post-card-stat span { font-size: 13px; color: rgba(244, 237, 224, 0.65); }

.post-card-body { flex: 1; display: flex; flex-direction: column; padding: 28px 28px 26px; }
.post-card-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.post-card-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; }
.post-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 24px; }
.post-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--teal); }

/* MINI-ILLUSTRASJONER: forenklede utgaver av illustrasjonene i innleggene, brukt som kortomslag. Ren pynt (aria-hidden). */
.post-card-cover.mini::before { background: radial-gradient(circle at 70% 20%, var(--teal-mid), transparent 60%); opacity: 0.5; }
.pc-mini {
  position: absolute; z-index: 2; left: 11%; right: 11%; top: 30%; bottom: -12%;
  overflow: hidden; border-radius: 10px 10px 0 0;
  background: var(--cream);
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.5);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.post-card:hover .pc-mini { transform: translateY(-5px); }

/* Dashbord */
.pc-dash { display: grid; grid-template-columns: 36% 1fr; }
.pcd-side { display: flex; flex-direction: column; gap: 1px; padding-top: 10px; background: var(--teal); }
.pcd-side span { display: flex; align-items: center; gap: 5px; padding: 3px 9px; overflow: hidden; white-space: nowrap; font-size: 9px; font-weight: 600; color: rgba(244, 237, 224, 0.85); }
.pcd-side span::before { content: ''; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--teal-soft); }
.pcd-side span.b::before { background: var(--rust); }
.pcd-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 10px; }
.pcd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pcd-cards b { position: relative; display: block; height: 30px; background: #fff; border-top: 2px solid var(--teal); border-radius: 4px; }
.pcd-cards b.r { border-top-color: var(--rust); }
.pcd-cards b::before, .pcd-cards b::after { content: ''; position: absolute; left: 6px; border-radius: 2px; }
.pcd-cards b::before { top: 7px; width: 50%; height: 6px; background: rgba(17, 39, 42, 0.7); }
.pcd-cards b::after { bottom: 6px; width: 70%; height: 3px; background: rgba(17, 39, 42, 0.2); }
.pcd-chart { flex: 1; min-height: 0; padding: 6px; background: #fff; border-radius: 4px; }
.pcd-chart svg { display: block; width: 100%; height: 100%; }

/* Kalender (september 2026 starter på en tirsdag, derfor er første rute tom) */
.pc-cal { display: flex; flex-direction: column; background: #eef5f5; }
.pcc-bar { flex-shrink: 0; height: 16px; background: var(--teal); }
.pcc-filters { display: flex; gap: 4px; padding: 8px 10px 6px; }
.pcc-filters span { width: 22px; height: 7px; border-radius: 10px; background: rgba(33, 93, 110, 0.18); }
.pcc-filters span:first-child { background: var(--teal); }
.pcc-grid {
  flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr;
  margin: 0 10px; overflow: hidden; counter-reset: dag;
  background: #fff; border: 1px solid rgba(33, 93, 110, 0.12); border-bottom: none; border-radius: 5px 5px 0 0;
}
.pcc-grid span { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 2px 3px; border-top: 1px solid rgba(33, 93, 110, 0.08); border-left: 1px solid rgba(33, 93, 110, 0.08); }
.pcc-grid span:nth-child(7n+1) { border-left: none; }
.pcc-grid span:nth-child(-n+7) { border-top: none; }
.pcc-grid span::before { counter-increment: dag; content: counter(dag); font-size: 7px; line-height: 1; color: var(--ink-soft); }
.pcc-grid span.x::before { counter-increment: none; content: ''; }
.pcc-grid i { display: block; height: 5px; border-radius: 2px; }
.pcc-grid i.hf { background: rgba(58, 124, 140, 0.6); }
.pcc-grid i.inn { background: rgba(206, 137, 70, 0.65); }

@media (max-width: 500px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card-body { padding: 24px 22px 22px; }
  .post-card-title { font-size: 23px; }
}