/* ============================================================
   Behandlerkort (.bnkort)

   Erstatter Elementor-malene som til nå har tegnet hvert kort. Én fil for
   alle nivåer og maler; forskjellene er klasser, ikke egne stilark.

   Om spesifisitet: alle regler starter med .bnkort, som gir 0-1-0. Temaets
   Elementor Kit setter .elementor-kit-XXXX a og .elementor-kit-XXXX button
   med 0-1-1 og vinner da over oss. Derfor er lenke- og knappereglene under
   skrevet med to klasser (0-2-0). Det er samme grep som i
   bestillingsskjemaet, og det kan fjernes den dagen Kit-en er borte.
   ============================================================ */

.bnkort,
.bnkort *{ box-sizing:border-box; }

/*
 * Vuggen maaler plassen kortet faktisk har – ikke vinduet. Det samme kortet
 * havner i en smal spalte paa forsiden og i en spalte paa over tusen piksler
 * paa en kategoriside, og en mediesporring kan ikke se forskjell paa de to.
 *
 * Sporringen maa staa paa foreldren: et element kan ikke sporre sin egen
 * bredde. Foerste forsoek la container-type paa .bnkort selv, og da traff
 * ingen av reglene under.
 */
.bnkort-vugge{
  container-type:inline-size;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.bnkort-vugge > .bnkort{ flex:1; }

.bnkort{
  --bnk-blekk:#14241d;
  --bnk-dus:#5a6b62;
  --bnk-linje:#e6e8e6;
  --bnk-flate:#ffffff;
  --bnk-mykt:#f4f6f4;
  --bnk-gronn:#2f7048;
  --bnk-gronn-lys:#e8efe6;
  --bnk-radius:10px;

  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  background:var(--bnk-flate);
  border:1px solid var(--bnk-linje);
  border-radius:var(--bnk-radius);
  color:var(--bnk-blekk);
  font-size:15px;
  line-height:1.45;
  height:100%;
}

/* Prioritert skal være synlig forskjellig, men ikke skrikende. En kant og
   en merkelapp holder; farget bakgrunn gjør lister urolige å lese. */
.bnkort.bnkort--prioritert{
  border-color:#cfe0d3;
  box-shadow:0 1px 3px rgba(20,36,29,.06);
}

/*
 * «Betalt plassering» er en opplysning, ikke et salgsargument.
 *
 * Foer sto den som en fylt groenn pille rett over navnet – altsaa med
 * samme visuelle vekt som det vi faktisk vil at folk skal lese. Den skal
 * vaere aerlig og lett aa finne, ikke det foerste oeyet treffer. Derfor
 * ingen fyll, ingen ramme, dus tekst med litt sperring.
 */
.bnkort .bnkort__merke{
  margin:0;
  align-self:flex-start;
  padding:0;
  background:none;
  color:var(--bnk-dus);
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
}

.bnkort .bnkort__bilde{
  width:84px;
  height:84px;
  flex:none;
  border-radius:50%;
  overflow:hidden;
  background:var(--bnk-mykt);
}
.bnkort .bnkort__bilde img,
.bnkort .bnkort__bilde svg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/*
 * Klinikklogo: hele logoen, inni sirkelen – ikke et utsnitt av den, og
 * ikke en firkant ved siden av alle de runde. Se den lange begrunnelsen
 * i bnett-behandler.css; 15 % er kvadratet innskrevet i sirkelen.
 */
.bnkort .bnkort__bilde--logo{
  border:1px solid var(--bnk-linje);
  background:#fff;
}
/* 15 % er kvadratet innskrevet i sirkelen – trygt for enhver form. Naar
   skriptet har maalt bildet, setter det --bnett-logoluft til den luften
   nettopp DEN formen trenger, og en bred banner faar bruke plassen sin.
   Reserven gjoer at bildet ligger riktig ogsaa uten JavaScript. */
.bnkort .bnkort__bilde--logo img{
  object-fit:contain;
  padding:var(--bnett-logoluft, 15%);
  box-sizing:border-box;
}

.bnkort .bnkort__navn{
  margin:0;
  font-size:17px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
}

/* Hele kortet er klikkbart via dette laget, men telefonknappen ligger over
   (z-index på .bnkort__knapper). Da slipper vi en <a> rundt alt, som ville
   gjort det umulig å ha en egen ring-lenke inni. */
.bnkort .bnkort__lenke{
  color:inherit;
  text-decoration:none;
}
.bnkort .bnkort__lenke::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--bnk-radius);
}
.bnkort .bnkort__lenke:hover{ text-decoration:underline; }
.bnkort .bnkort__lenke:focus-visible{ outline:2px solid var(--bnk-gronn); outline-offset:3px; }

.bnkort .bnkort__tittel{
  margin:0;
  font-size:14px;
  color:var(--bnk-dus);
}

/* Stedet: et lite kartikon og bynavnet. En prikk sa ingenting; et pin-ikon
   sier «her er dette» uten et eneste ord ekstra. */
.bnkort .bnkort__sted{
  display:flex;
  align-items:center;
  gap:5px;
  margin:0;
  font-size:14px;
  font-weight:500;
  color:var(--bnk-blekk);
}
.bnkort .bnkort__pin{ flex:none; color:var(--bnk-gronn); }

/* ---- Tilbyr online-timer ---- */
/*
 * «Tilbyr online-timer» skal sees, men ikke rope.
 *
 * Den fylte pillen med pulserende ring var det sterkeste elementet paa
 * hele kortet – sterkere enn navnet. Naa er det en linje med en rolig
 * groenn prikk: fargen gjoer den lett aa finne naar man skanner listen,
 * uten aa ta plassen til det kortet faktisk handler om.
 */
.bnkort .bnkort__online{
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-start;
  margin:3px 0 0;
  padding:0;
  border:0;
  background:none;
  color:var(--bnk-gronn);
  font-size:13px;
  font-weight:600;
  line-height:1.3;
}
.bnkort .bnkort__puls{
  position:relative;
  flex:none;
  width:10px;
  height:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.bnkort .bnkort__puls-kjerne{
  width:8px; height:8px; border-radius:50%;
  background:var(--bnk-gronn);
}
/*
 * Ringen pulset. Bevegelse er det sterkeste blikkfanget som finnes, og
 * den lå på en opplysning, ikke på en handling. Den står igjen som en
 * stille ring – markøren er fortsatt tydelig, men den beveger seg ikke.
 */
.bnkort .bnkort__puls-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid var(--bnk-gronn);
  opacity:.28;
}
/* Keyframene bnkort-puls er fjernet sammen med animasjonen. Ingen regel
   viser til dem lenger, og da skal de ikke ligge igjen og se ut som noe
   som brukes. Mediesporringen for redusert bevegelse er ogsaa borte –
   det er ingen bevegelse igjen aa redusere. */

.bnkort .bnkort__usp{
  list-style:none;
  margin:2px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.bnkort .bnkort__usp li{
  position:relative;
  padding-left:17px;
  font-size:13.5px;
  color:var(--bnk-dus);
}
.bnkort .bnkort__usp li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--bnk-gronn);
  font-weight:700;
  font-size:12px;
}

.bnkort .bnkort__merker{
  list-style:none;
  margin:2px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.bnkort .bnkort__merker li{
  padding:2px 8px;
  border:1px solid var(--bnk-linje);
  border-radius:999px;
  background:var(--bnk-mykt);
  font-size:12.5px;
  color:var(--bnk-dus);
}

.bnkort .bnkort__knapper{
  position:relative;
  z-index:1;              /* over kortlenkens dekklag */
  display:flex;
  gap:8px;
  margin-top:auto;
  padding-top:10px;
}

.bnkort .bnkort__knapp{
  flex:1 1 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;        /* nok til en tommel */
  padding:8px 14px;
  border:1px solid var(--bnk-linje);
  border-radius:6px;
  background:var(--bnk-flate);
  color:var(--bnk-blekk);
  font-family:inherit;
  font-size:14.5px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  text-align:center;
}
.bnkort .bnkort__knapp:focus-visible{ outline:2px solid var(--bnk-gronn); outline-offset:2px; }

.bnkort .bnkort__knapp--primar{
  background:var(--bnk-gronn);
  border-color:var(--bnk-gronn);
  color:#fff;
}

/*
 * Samme felle som paa detaljsiden: vi satte bakgrunnen paa hover, men
 * ikke fargen. Temaets `a:hover` satte teksten groenn, og «Se profil»
 * ble groenn paa groenn – borte saa lenge musen laa over. Fargen staar
 * eksplisitt i hver tilstand, og klassen er gjentatt for aa komme over
 * Kit-et uten !important.
 */
.bnkort a.bnkort__knapp.bnkort__knapp:hover,
.bnkort a.bnkort__knapp.bnkort__knapp:focus,
.bnkort a.bnkort__knapp.bnkort__knapp:active{
  background:var(--bnk-mykt);
  color:var(--bnk-blekk);
  border-color:var(--bnk-linje);
}
.bnkort a.bnkort__knapp--primar.bnkort__knapp--primar:hover,
.bnkort a.bnkort__knapp--primar.bnkort__knapp--primar:focus,
.bnkort a.bnkort__knapp--primar.bnkort__knapp--primar:active{
  background:#26603c;
  border-color:#26603c;
  color:#fff;
}

/* ------------------------------------------------------------
   Bredt kort: vannrett

   Paa en kategoriside staar kortene i én spalte over hele bredden. Staaende
   layout ga da et lite rundt portrett oeverst og to knapper strukket over
   hele siden. Fra ca. 520px legger vi om til portrett | innhold | knapper.

   Rutenettet er skrevet slik at det taaler at feltene byttes om i admin:
   alt havner i midtspalten som standard, og bare bildet og knappene flyttes.
   ------------------------------------------------------------ */
@container (min-width:520px){
  .bnkort{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:start;
    column-gap:18px;
    /*
     * row-gap maa vaere null her. Bildet og knappene spenner over mange
     * rader, og rutenettet lager da like mange underforstaatte rader. De
     * er tomme, men mellomrommet mellom dem er det ikke – med 3px gap ble
     * det nesten seksti piksler tom luft nederst i hvert kort.
     * Avstanden settes derfor paa feltene selv.
     */
    row-gap:0;
  }
  .bnkort > *{ grid-column:2; }
  .bnkort .bnkort__tittel,
  .bnkort .bnkort__sted,
  .bnkort .bnkort__usp,
  .bnkort .bnkort__merker{ margin-top:4px; }

  .bnkort .bnkort__bilde{
    grid-column:1;
    grid-row:1 / span 20;
    width:100px;
    height:100px;
  }
  .bnkort .bnkort__knapper{
    grid-column:3;
    grid-row:1 / span 20;
    align-self:center;
    flex-direction:column;
    margin-top:0;
    padding-top:0;
    min-width:132px;
  }
  .bnkort .bnkort__knapp{ flex:none; width:100%; }

  /* Merkelappene er merkelapper, ikke bannere. I rutenettet strekker et
     barn seg over hele sporet med mindre man sier fra. */
  .bnkort .bnkort__merke,
  .bnkort .bnkort__online{ justify-self:start; }
  .bnkort .bnkort__usp{ margin-top:6px; }

  /* Uten bilde skal ikke midtspalten henge igjen i en tom foerstespalte. */
  .bnkort.bnkort--ubildet{ grid-template-columns:minmax(0,1fr) auto; }
  .bnkort.bnkort--ubildet > *{ grid-column:1; }
  .bnkort.bnkort--ubildet .bnkort__knapper{ grid-column:2; }
}

/* Veldig brede kort: la USP-ene og merkene staa side om side. */
@container (min-width:760px){
  .bnkort .bnkort__usp{
    flex-direction:row;
    flex-wrap:wrap;
    column-gap:18px;
  }
}

/* ------------------------------------------------------------
   Luft i listene

   Ruteren legger kortene i .ptlr-campaign-list. Elementor-kortene fikk
   avstanden sin fra .ptlr-campaign-card, som vi med vilje ikke arver –
   den klassen drar ogsaa med seg skygge, padding og «font-size:13pt
   !important». Vi setter derfor luften selv.
   ------------------------------------------------------------ */
.ptlr-campaign-list > .bnkort-vugge{ margin-bottom:14px; }
.ptlr-campaign-list > .bnkort-vugge:last-child{ margin-bottom:0; }

/* .ptlr-campaign-list-float er et rutenett med egen gap paa store skjermer. */
@media (min-width:961px){
  .ptlr-campaign-list-float > .bnkort-vugge{ margin-bottom:0; }
}

/* ------------------------------------------------------------
   Kompakt kort

   Brukes i «Flere behandlere i naerheten» paa detaljsiden. Der ligger de
   to og to, og hvert kort faar under 400px – paa en bred skjerm. Foerste
   utgave brukte @media (max-width:480px) til aa stable dem, og den ser
   vinduet, ikke kortet. Resultatet var navn som la seg oppaa knappene.
   Her maales vuggen, som alle andre steder i denne fila.
   ------------------------------------------------------------ */
.bnkort.bnkort--kompakt{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  column-gap:12px;
  row-gap:0;
  padding:12px 14px;
}
.bnkort.bnkort--kompakt > *{ grid-column:2; }

.bnkort.bnkort--kompakt .bnkort__bilde{
  grid-column:1;
  grid-row:1 / span 20;
  width:56px;
  height:56px;
  align-self:center;
}
.bnkort.bnkort--kompakt .bnkort__navn{ font-size:15.5px; }
.bnkort.bnkort--kompakt .bnkort__tittel,
.bnkort.bnkort--kompakt .bnkort__sted,
.bnkort.bnkort--kompakt .bnkort__online{ margin-top:3px; }
.bnkort.bnkort--kompakt .bnkort__online{ font-size:12.5px; }

/* Smalt: knappene under, i full bredde. */
.bnkort.bnkort--kompakt .bnkort__knapper{
  grid-column:1 / -1;
  margin-top:10px;
  padding-top:0;
}
.bnkort.bnkort--kompakt .bnkort__knapp{ flex:1 1 auto; }

/* Bredt nok: knappene til hoeyre, som foer. */
@container (min-width:430px){
  .bnkort.bnkort--kompakt{ grid-template-columns:auto minmax(0,1fr) auto; }
  .bnkort.bnkort--kompakt .bnkort__knapper{
    grid-column:3;
    grid-row:1 / span 20;
    align-self:center;
    flex-direction:column;
    margin-top:0;
    min-width:112px;
  }
  .bnkort.bnkort--kompakt .bnkort__knapp{ flex:none; width:100%; }
}

/* ------------------------------------------------------------
   Ikke mørk modus.

   Her lå det et @media (prefers-color-scheme: dark)-blokk. Resten av
   behandlingsnett.no har ingen mørk variant, så for alle med mørkt
   operativsystem ble kortene mørkegrønne med lys tekst midt på en ellers
   lys side. Komponent-CSS skal ikke innføre en modus siden ikke har.
   ------------------------------------------------------------ */

/* «Er dette deg?» på kortet. Står ikke i noen standardmal – se
   felt_eier() i bnett-kort.php. Diskret, og med farge i hver tilstand. */
.bnkort a.bnkort__eier{
  display:inline-block;
  margin-top:8px;
  padding:4px 0;
  color:#5f6f67;
  font-size:13px; font-weight:600; text-decoration:none;
}
.bnkort a.bnkort__eier:hover,
.bnkort a.bnkort__eier:focus{ color:#16352b; text-decoration:underline; }