/* ==========================================================================
   Ridgeback · Kontakt
   ========================================================================== */

/* --- Hero med snabbkontakt ---------------------------------------------- */
.kontakt-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.kontakt-hero h1 { font-size: clamp(40px, 5vw, 64px); max-width: 11em; }
.kontakt-snabb { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: 0; background: var(--rbd-vit); box-shadow: var(--rbd-niva-b); }
.kontakt-snabb li { margin: 0; padding: 18px 24px; display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline; border-top: 1px solid var(--rbd-linje); font-size: 16px; }
.kontakt-snabb li:first-child { border-top: 0; }
.kontakt-snabb__etikett { font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: var(--rbd-ls-kicker); text-transform: uppercase; color: var(--rbd-gra); }
.kontakt-snabb a { color: var(--rbd-djupbla); font-weight: var(--rbd-medium); }

/* --- Formulär --------------------------------------------------------------- */
.kontakt-form__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.kontakt-form__intro { position: sticky; top: calc(var(--nav-h) + 32px); }
.kontakt-form__intro p { color: var(--rbd-gra); }
.kontakt-form__punkter { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.kontakt-form__punkter li { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 16px; color: var(--rbd-skiffer); }
.kontakt-form__punkter .rbd-ikon { color: var(--rbd-djupbla); }
.kontakt-form .kontakt__form { background: var(--rbd-vit); }
.kontakt-form .rbd-falt select { font: inherit; font-size: 16px; color: var(--rbd-skiffer); background: var(--rbd-vit); border: 1px solid var(--rbd-steg-4);
                                 border-radius: var(--rbd-radie); padding: 13px 14px; }

/* --- Kontaktkort ------------------------------------------------------------ */
.kontaktkort__topp { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.kontaktkort__topp h2 { margin: 0; }
.kk__lista { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kk { margin: 0; display: flex; flex-direction: column; background: var(--rbd-vit); box-shadow: var(--rbd-niva-b); overflow: hidden;
      transition: box-shadow .3s var(--rbd-ease), translate .3s var(--rbd-ease); }
.kk:hover { box-shadow: var(--rbd-niva-r); translate: -1px -3px; }
.kk img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; background: var(--rbd-dimma); }
.kk__text { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.kk h3 { font-size: 18px; margin: 0 0 4px; }
.kk__roll { font-size: 13px; color: var(--rbd-gra); margin-bottom: 16px; }
.kk__lankar { display: grid; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rbd-linje); }
.kk__lankar a { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--rbd-djupbla); text-decoration: none; min-width: 0; }
.kk__lankar a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk__lankar a:hover span { text-decoration: underline; }
.kk__lankar .rbd-ikon { width: 18px; height: 18px; flex: none; color: var(--rbd-steg-2); }

/* --- Karta ------------------------------------------------------------------- */
.hitta { position: relative; min-height: 520px; display: flex; align-items: center; background: var(--rbd-dimma); }
.hitta__karta { position: absolute !important; inset: 0; width: 100%; height: 100%; }
.hitta__karta .extern__ruta { margin-left: auto; margin-right: max(var(--rbd-gutter), calc((100vw - var(--rbd-max)) / 2 + var(--rbd-gutter))); background: var(--rbd-vit); box-shadow: var(--rbd-niva-b); }
.hitta__wrap { position: relative; width: 100%; padding-block: 64px; pointer-events: none; }
.hitta__kort { pointer-events: auto; max-width: 420px; padding: 32px; background: var(--rbd-vit); }
.hitta__kort h2 { font-size: 30px; }
.hitta__kort address { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--rbd-skiffer); margin-bottom: 14px; }
.hitta__kort p { font-size: 15px; color: var(--rbd-gra); }
.hitta__lankar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }

/* --- Brytpunkter ----------------------------------------------------------------- */
@media (max-width: 1100px) { .kk__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .kontakt-hero__grid, .kontakt-form__grid { grid-template-columns: 1fr; gap: 40px; }
  .kontakt-form__intro { position: static; }
  .kk__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hitta { display: block; min-height: 0; }
  .hitta__karta { position: relative !important; height: 360px; }
  .hitta__karta .extern__ruta { margin: 0 auto; }
  .hitta__wrap { padding-block: 0 48px; }
  .hitta__kort { margin-top: -48px; position: relative; max-width: none; }
}
@media (max-width: 520px) {
  .kk__lista { grid-template-columns: 1fr; }
  .kk { flex-direction: row; }
  .kk img { width: 112px; aspect-ratio: 4 / 5; flex: none; }
  .kontakt-snabb li { grid-template-columns: 1fr; gap: 4px; }
}