/* =========================================================================
   chrille.nu - Områdessektionerna på startsidan
   En mall, fyra utseenden. Färgerna kommer ur universe.css, här finns bara
   layout och det som skiljer sektionerna åt typografiskt.
   ========================================================================= */

.c-area {
  background: var(--u-bg);
  color: var(--u-text);
  padding: var(--s-9) var(--s-7);
  scroll-margin-top: 80px;
}
.c-area__inner {
  max-width: var(--wrap);
  margin-inline: auto;
}

.c-area__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
  margin-top: var(--s-6);
}

/* --- Vänsterspalten ------------------------------------------------------ */
.c-area__headline {
  margin: 0 0 var(--s-5);
  font-family: var(--u-heading-font);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--u-text);
}
.c-area__line { display: block; }
.c-area__line:last-child { color: var(--u-accent); }

.c-area__text {
  margin: 0 0 var(--s-5);
  font: var(--t-lead);
  color: var(--u-text);
  max-width: 56ch;
  opacity: .92;
}

.c-area__quote {
  margin: 0 0 var(--s-5);
  padding-left: var(--s-4);
  border-left: 3px solid var(--u-accent);
  font: 600 18px/1.5 var(--f-serif);
  color: var(--u-text);
  max-width: 52ch;
}

.c-area__cta { font-size: 15px; }

/* --- Högerspalten, listan ------------------------------------------------ */
.c-area__listlabel {
  margin: 0 0 var(--s-4);
  font: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--u-text-dim);
}

.c-area__posts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--u-line);
}
.c-area__post { border-bottom: 1px solid var(--u-line); }

.c-area .c-area__postlink {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start var(--dur) var(--ease);
}
.c-area .c-area__postlink:hover,
.c-area .c-area__postlink:focus-visible {
  padding-inline-start: var(--s-2);
}
.c-area .c-area__postlink:focus-visible {
  outline: 2px solid var(--u-accent);
  outline-offset: 2px;
}

.c-area__postmeta {
  font: var(--t-label);
  letter-spacing: .08em;
  color: var(--u-text-dim);
}
.c-area__posttitle {
  font: 600 17px/1.35 var(--f-sans);
  color: var(--u-text);
}
.c-area .c-area__postlink:hover .c-area__posttitle { color: var(--u-accent); }

.c-area__empty {
  font: var(--t-small);
  color: var(--u-text-dim);
}

/* =========================================================================
   Områdesspecifika avvikelser
   ========================================================================= */

/* Teknik skriver rubriken i mono och sätter en prompt före den */
.universe-teknik .c-area__headline { font-size: clamp(26px, 3vw, 40px); }
.universe-teknik .c-area__posttitle { font-family: var(--f-mono); font-size: 15px; }

/* Utbildning ska läsas på avstånd: tyngre rubrik, mindre brödtext */
.universe-utbildning .c-area__headline {
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Företagandets lista ställs upp som kontorader */
.universe-foretagande .c-area__postmeta { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Responsivt
   ========================================================================= */
@media (max-width: 900px) {
  .c-area { padding: var(--s-8) var(--s-5); }
  .c-area__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}