/*
-----------------------------------------
KONTAKT (Figma: Kontakt och öppettider 22:372)
1. Kontaktsektionen (contactSection): kontaktkort och öppettider (verkstädernas flikar står i flikblocket workshopList, bara på verkstadssidan och kontaktsidan: workshops.css)
2. Kontaktkorten (Exellent/contactPerson) i rutnätet .contact-people (i verkstädernas flikar på verkstadssidan och kontaktsidan): Jergos kontaktkort
   (jergo.inkadev.net/contact-us/) i Exellents färger och typsnitt; platshållaren när en verkstad saknar kontaktperson
3. Kontakt-CTA:n (contactCards: Uthyrning och Tvätt): VKAB:s CTA-sektion med text och kontaktpersoner (contactPerson i formen --cta)
-----------------------------------------
*/

/* ---- Kontaktsektionen ------------------------------------------------------------------ */

.contact {
  padding-block-start: calc(var(--space-section) - 1px); /* linjen ovanför ingår i Figmas höjd */
  border-block-start: 1px solid var(--border-subtle);
  background: var(--surface-page);
}

.contact .container > * + * {
  margin-block-start: var(--space-40);
}

/* Kortet och öppettiderna radbryts i stället för att klämmas: öppettiderna blir aldrig smalare än --size-hours-min, så att ett klockslag inte bryts */
.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-split);
}

.contact__card {
  display: flex;
  flex: 0 1 var(--size-contact-card);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-18);
  padding: var(--space-36) var(--space-24);
  background: var(--surface-light);
  border: 1px solid var(--border-subtle);
}

.contact__card-heading {
  font: var(--font-contact-heading);
  color: var(--text-heading);
  text-transform: uppercase;
}

.contact__phone {
  font: var(--font-display);
  color: var(--text-accent);
}

.contact__email {
  font: var(--font-contact-email);
  color: var(--text-accent);
  overflow-wrap: anywhere;
}

.contact__rental {
  font: var(--font-body-auto);
  color: var(--text-body);
}

/* Öppettiderna: två kolumner bredvid kortet när de får plats (Figma), annars under varandra */
.contact__hours-group {
  display: grid;
  flex: 1 1 var(--size-hours-min);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-hours-min)), 1fr));
  align-items: center;
  gap: var(--space-28) var(--space-split);
}

.contact__hours--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}

.info-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.info-column__heading {
  font: var(--font-contact-heading);
  color: var(--text-heading);
  text-transform: uppercase;
}

.info-column__line {
  font: var(--font-body-tight);
  color: var(--text-body);
  overflow-wrap: anywhere; /* en lång rad i en smal kolumn bryts hellre än spränger den */
}

@media (hover: hover) {
  .contact__phone:hover,
  .contact__email:hover {
    text-decoration: underline;
  }
}

/* ---- Kontaktkorten (Jergos kontaktkort) ------------------------------------------------- */

/* Rutnätet i Jergos kolumnrytm: fyra kort per rad vid 1440 px (280 px), tre vid 1024 px, två och ett på smalare skärmar.
   auto-fill behåller kortens bredd när de är färre än kolumnerna, så att ett ensamt kort inte dras ut över hela raden */
.contact-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--size-card-min)), 1fr));
  gap: var(--space-grid);
}

/* Kortet: ljusgrått med rundade hörn (Jergos vita kort står på en ljusgrå yta, här står korten på vitt) */
.contact-person {
  display: flex;
  flex-direction: column;
  background: var(--surface-light);
  border-radius: var(--radius-card);
}

.contact-person__media {
  padding: var(--space-24);
}

/* Runt foto: ett kvadratiskt utsnitt av porträttet från överkanten (huvudet), aldrig bredare än källbilden */
.contact-person__img {
  inline-size: 100%;
  max-inline-size: var(--size-contact-photo);
  aspect-ratio: 1;
  margin-inline: auto;
  object-fit: cover;
  object-position: top;
  background: var(--surface-mid);
  border-radius: var(--radius-round);
}

.contact-person__body {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-24) var(--space-24);
}

.contact-person__body:first-child {
  padding-block-start: var(--space-24); /* kort utan foto */
}

.contact-person__name {
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-width-underline) solid var(--border-accent);
  font: var(--font-card-heading);
  color: var(--text-heading);
}

.contact-person__role {
  margin-block-end: var(--space-8);
  font: var(--font-lead);
  color: var(--text-body);
}

.contact-person__details {
  margin: 0;
}

/* En uppgift per rad: ikonen (etiketten för skärmläsare) och länken. Etiketten har länkens radhöjd, så att ikonen står mitt på länkens första rad
   också när en lång e-postadress bryts */
.contact-person__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.contact-person__label {
  flex: none;
  font: var(--font-link);
}

.contact-person__icon {
  display: inline-block;
  inline-size: var(--size-contact-icon);
  block-size: var(--size-contact-icon);
  vertical-align: middle;
}

.contact-person__value {
  min-inline-size: 0;
  margin: 0;
}

.contact-person__link {
  font: var(--font-link);
  color: var(--text-heading);
  overflow-wrap: anywhere;
}

/* Platshållaren när en verkstad saknar kontaktperson: samma kort med en neutral bild och ordlistans text */
.contact-person__placeholder {
  font: var(--font-body-auto);
  color: var(--text-body);
}

@media (hover: hover) {
  .contact-person__link:hover {
    text-decoration: underline;
  }
}

/* ---- Kontakt-CTA:n (contactCards) ------------------------------------------------------ */

/* Formen är VKAB:s CTA (texten och kontaktpersonerna bredvid varandra), utseendet Exellents: ljusgrå sektion, sektionsrubrik.
   Under 1024 px står kontaktpersonerna under texten. */
.contact-cta__inner {
  display: grid;
  grid-template-columns: var(--grid-cta);
  align-items: center;
  gap: var(--space-split);
}

.contact-cta__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  min-inline-size: 0;
}

.contact-cta__tag {
  font: var(--font-meta-strong);
  color: var(--text-body);
  text-transform: uppercase;
}

.contact-cta__heading {
  font: var(--font-section-heading);
  color: var(--text-accent);
  text-transform: uppercase;
}

.contact-cta__lead {
  font: var(--font-lead);
  color: var(--text-body);
}

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

.contact-cta__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-split);
  min-inline-size: 0;
}

/* Kontaktpersonen i CTA:n (VKAB:s CTA-kontakt): runt foto, namnet och uppgifterna rad för rad efter sin etikett, utan kort */
.contact-person--cta {
  background: none;
  border-radius: 0;
}

.contact-person--cta .contact-person__media {
  margin-block-end: var(--space-20);
  padding: 0;
}

.contact-person--cta .contact-person__img {
  inline-size: var(--size-cta-photo);
  margin-inline: 0;
}

.contact-person--cta .contact-person__body {
  gap: var(--space-4);
  padding: 0;
}

.contact-person--cta .contact-person__name {
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-person--cta .contact-person__role {
  margin: 0;
  font: var(--font-body-tight);
}

.contact-person--cta .contact-person__row {
  align-items: baseline;
}

.contact-person--cta .contact-person__label {
  font: var(--font-meta-strong);
  color: var(--text-body);
  text-transform: uppercase;
}

.contact-person--cta .contact-person__link {
  font: var(--font-body-tight);
}

@media (width < 64rem) {
  .contact-cta__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}