/*
-----------------------------------------
BLOCK
1. Kortgrid (cardGrid): tjänstekort och relaterade sidor
2. Bild och text (splitSection)
3. Artikelområdet: artikelspalt, textsektion, bild och sidnavigation
-----------------------------------------
*/

/* ---- Kortgrid -------------------------------------------------------------------- */

.card-grid__list {
  display: grid;
  gap: var(--space-grid);
}

.card-grid--services .section-header {
  margin-block-end: var(--space-32);
}

.card-grid--services .section-header__title {
  font: var(--font-section-heading-auto);
  color: var(--text-heading);
}

.card-grid--services .card-grid__list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-card-min)), 1fr));
}

.card-grid--links .card-grid__list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-card-min)), 1fr));
  gap: var(--space-24);
}

.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}

.link-card__media {
  block-size: var(--size-card-image);
  overflow: hidden;
}

.link-card--links .link-card__media {
  block-size: var(--size-related-image);
}

.link-card__img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}

/* Hela kortet är klickbart: länkens yta täcker kortet (klickyta, inget synligt) */
.link-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.link-card--services .link-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  text-align: center;
}

.link-card--services .link-card__title {
  font: var(--font-card-heading);
  color: var(--text-heading);
  text-transform: uppercase;
}

.link-card__text {
  font: var(--font-body);
  color: var(--text-body);
}

.link-card--links .link-card__body {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-block-size: calc(var(--size-related-band) - 1px - 1px); /* kanten runt kortet ingår i Figmas höjd (270 px) */
  padding: var(--space-20);
  color: var(--text-accent);
}

.link-card--links .link-card__title {
  flex: 1;
  min-inline-size: 0;
  font: var(--font-nav-primary);
  text-transform: uppercase;
}

.link-card__arrow {
  font: var(--font-arrow);
}

@media (hover: hover) {
  .link-card--services:hover .link-card__link {
    color: var(--text-accent);
  }
}

/* ---- Bild och text --------------------------------------------------------------- */

.split__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-split);
  align-items: center;
}

/* Bilden ligger först i markupen. imagePosition right flyttar den efter texten på bred sida. */
.split--image-right .split__media {
  order: 1;
}

.split__media {
  block-size: var(--split-media-height, var(--size-split-height));
}

.split__img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}

.split__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--split-gap, var(--space-20));
}

.split__body > * {
  inline-size: 100%;
}

.split .rich-text > * + * {
  margin-block-start: var(--split-gap, var(--space-20));
}

.split__action {
  display: flex;
  inline-size: auto;
}

/* Mellangrå sektion (Tvätt): bild och avstånd som i Figma */
.split--mid {
  --split-media-height: var(--size-wash-height);
  --split-gap: var(--space-24);
}

/* Panel (Uthyrning): rubriken ovanför, bilden och texten i en vit ruta med kant. Texten bestämmer rutans höjd, bilden fyller den. */
.split--panel > .container > .section-header {
  margin-block-end: var(--space-40);
}

.split--panel .split__grid {
  gap: 0;
  align-items: stretch;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}

.split--panel .split__media {
  block-size: auto;
  min-block-size: var(--size-split-height);
}

.split--panel .split__body {
  justify-content: center;
  padding: calc(var(--space-panel) - 1px); /* kanten runt rutan ingår i Figmas höjd (449 px) */
}

.split--panel .rich-text h3 {
  padding-block-end: var(--space-20);
  border-block-end: 1px solid var(--border-subtle);
  color: var(--text-accent);
  text-transform: uppercase;
}

.split--panel .rich-text > h3 + * {
  margin-block-start: var(--space-20);
}

/* ---- Artikelområdet ---------------------------------------------------------------- */

.article-area__inner {
  display: grid;
  grid-template-columns: var(--grid-article);
  column-gap: var(--space-columns);
  align-items: start;
  padding-block: var(--space-article);
}

/* Sidor utan artikelinnehåll visar ingen tom artikelspalt: sidnavigationen står då i första kolumnen */
.article-area__inner--nav-only {
  grid-template-columns: var(--grid-sidebar-first);
}

/* Sidor utan sidnavigation har ingen tom sidokolumn: bara artikelspalten, högst artikelspaltens bredd (784 px, som med sidnavigation vid 1440 px)
   och på samma vänsterkant. Inget block bryter ut ur spalten; sektionsblocken (bild och text, kontakt-CTA:n och verkstäderna) står i full bredd utanför den (TextPage.cshtml). */
.article-area__inner--main-only {
  grid-template-columns: minmax(0, var(--size-article));
}

.article-area__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.text-section .section-header {
  gap: var(--space-20);
}

.text-section .section-header__text {
  font: var(--font-lead);
  color: var(--text-body);
}

.text-section__body {
  margin-block-start: var(--space-20);
}

.text-section__action {
  display: flex;
  margin-block-start: var(--space-20);
}

.image-section__img {
  inline-size: 100%;
  block-size: var(--size-article-image);
  max-inline-size: none;
  object-fit: cover;
}

/* Hela bilden: ingen beskärning, och en smal bild (porträtt) visas i sin egen storlek i stället för att dras ut över spalten */
.image-section--whole .image-section__img {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

.section-nav__list {
  border-block-end: 1px solid var(--border-subtle);
}

.section-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-block: calc(var(--space-20) - 1px) var(--space-20); /* linjen ovanför ingår i Figmas radhöjd (70 px) */
  border-block-start: 1px solid var(--border-subtle);
  font: var(--font-button);
  letter-spacing: var(--tracking-button);
  color: var(--text-heading);
  text-transform: uppercase;
}

.section-nav__label {
  flex: 1;
  min-inline-size: 0;
}

.section-nav__arrow {
  font: var(--font-arrow);
  color: var(--text-body);
}

.section-nav__link[aria-current="page"],
.section-nav__link[aria-current="page"] .section-nav__arrow {
  color: var(--text-accent);
}

@media (hover: hover) {
  .section-nav__link:hover {
    color: var(--text-accent);
  }
}

/* ---- Sidan hittades inte (FourOFourPage) -------------------------------------------- */

.not-found__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding-block: var(--space-article);
}

.not-found__message {
  font: var(--font-lead);
  color: var(--text-body);
}

/* ---- Bred sida: panelens bild är smalare än texten (584 : 632 px) --------------------- */

@media (width >= 64rem) {
  .split--panel .split__grid {
    grid-template-columns: var(--grid-panel);
  }
}

/* ---- Under 1024 px ---------------------------------------------------------------- */

@media (width < 64rem) {
  .split__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .split--image-right .split__media {
    order: 0;
  }

  .split__media,
  .split--panel .split__media {
    block-size: var(--size-split-height);
  }

  .article-area__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-40);
  }
}