/*
-----------------------------------------
VERKSTÄDER (flikar och karta)
1. Flikar (Exellent/workshopTabs: workshopList på verkstadssidan och kontaktsidans kontaktpersoner): en flik per ort och den valda ortens panel (på verkstadssidan
   adress och Bra att veta, alltid kontaktkorten, contact.css). Formen är kontorsflikarna på
   Jergos kontaktsida: flikarna på en ljusgrå yta, den valda fliken och panelen vita. Utan JavaScript (html.no-js) är flikarna ankarlänkar och panelerna står under varandra.
2. Karta över verkstäderna (workshopMap): SVG utan tredjepartsskript, nålarna är länkar; i Bild och text-layouten bredvid rubriken och texten
-----------------------------------------
*/

/* ---- Flikar ---------------------------------------------------------------------------- */

.workshop-tabs {
  background: var(--surface-light);
}

.workshop-tabs__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-block-start: var(--space-48);
}

.workshop-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* Flikarna går 4 px ned i panelen (Jergo), så att den valda vita fliken och panelen blir en yta; de andra har en vit kant.
   Den valda fliken har dessutom en accentlinje upptill, så att valet syns med kontrast och inte bara som vitt mot ljusgrått (WCAG 1.4.11) */
.workshop-tabs__tab {
  display: block;
  margin-block-end: calc(-1 * var(--space-4));
  padding: var(--space-16) var(--space-24) var(--space-12);
  font: var(--font-meta-strong);
  color: var(--text-heading); /* accentblått på ljusgrått är 4,28:1, under 4,5:1 (WCAG 1.4.3) */
  text-align: center;
  border: var(--border-width-tab) solid var(--border-inverse);
  border-radius: var(--radius-tab);
}

.workshop-tabs__tab[aria-selected="true"] {
  color: var(--text-accent);
  background: var(--surface-page);
  box-shadow: inset 0 var(--border-width-tab) 0 var(--border-accent);
}

@media (hover: hover) {
  .workshop-tabs__tab:hover {
    text-decoration: underline;
  }
}

.workshop-tabs__panel {
  padding-block: var(--space-section);
  background: var(--surface-page);
}

.workshop-tabs__panel[hidden] {
  display: none;
}

.no-js .workshop-tabs__panel + .workshop-tabs__panel {
  border-block-start: 1px solid var(--border-subtle);
}

/* Ortens uppgifter och kontaktkorten bredvid varandra från 1024 px (Jergo: kontorets uppgifter och kartan), annars under varandra */
.workshop-tabs__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-contact-person);
  align-items: start;
  gap: var(--space-split);
}

.workshop-tabs__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-inline-size: 0;
}

.workshop-tabs__heading {
  margin-block-end: var(--space-8);
  font: var(--font-section-heading);
  color: var(--text-accent);
  text-transform: uppercase;
}

.workshop-tabs__address {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font: var(--font-body-tight);
  color: var(--text-body);
}

.workshop-tabs__facts-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.workshop-tabs__facts-title {
  font: var(--font-body-tight);
  font-weight: var(--font-weight-bold);
  color: var(--text-heading);
}

.workshop-tabs__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline-start: var(--space-24);
  list-style: disc;
  font: var(--font-body-tight);
  color: var(--text-body);
}

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

/* Under 640 px radbryts flikarna: varje rad fyller bredden, så att flikarna inte står i en ojämn trappa */
@media (width < 40rem) {
  .workshop-tabs__item {
    flex: 1 1 auto;
  }
}

/* ---- Karta ----------------------------------------------------------------------------- */

/* Kartan står i Bild och text-layouten (blocks.css) men har sin egen höjd (SVG:ns förhållande) i stället för bildens fasta höjd */
.workshop-map .split__media {
  block-size: auto;
}

.workshop-map__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-inline-size: var(--size-map);
}

.workshop-map__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.workshop-map__land {
  stroke: var(--border-subtle);
}

.workshop-map__land--se {
  fill: var(--surface-mid);
}

.workshop-map__land--grann {
  fill: var(--surface-light);
}

.workshop-map__water {
  fill: var(--surface-page);
  stroke: var(--border-subtle);
}

.workshop-map__hit {
  fill: var(--surface-transparent);
}

.workshop-map__head {
  fill: var(--surface-accent);
}

.workshop-map__dot {
  fill: var(--surface-inverse);
}

.workshop-map__label {
  font: var(--font-map-label);
  dominant-baseline: central;
  fill: var(--text-heading);
  paint-order: stroke;
  stroke: var(--surface-page);
  stroke-width: var(--size-map-label-halo);
  stroke-linejoin: round;
}

/* Under 640 px skalas kartan ned med bredden: etiketten görs större i kartans enheter så att den förblir läsbar */
@media (width < 40rem) {
  .workshop-map__label {
    font-size: var(--fs-map-label-narrow);
  }
}

@media (hover: hover) {
  .workshop-map__pin:hover .workshop-map__head {
    fill: var(--surface-footer);
  }
}

.workshop-map__source {
  font: var(--font-meta);
  color: var(--text-body);
}