/* =============================================================
   FLETTILISTI — naering.com
   Límist neðst í assets/css/main.css

   Kemur í staðinn fyrir Bootstrap-carousel á efnissíðunum.
   Einn kóði fyrir tölvu og síma, engin handvirk skipting í
   síður, alltaf jöfn hæð á öllum flipum.

   Notar áfram .team-member / .member-img / .member-info svo
   spjöldin líti eins út og annars staðar á síðunni.
   ============================================================= */

/* ---- Umgjörðin ---------------------------------------------- */
.flettir{
  position:relative;
  --bil:1.5rem;      /* bil á milli spjalda */
  --dalkar:2;        /* heil spjöld sem komast fyrir — sími */
  --synileg:2.15;    /* .15 er gægjan: sneið af næsta spjaldi sést */
}
@media (min-width:768px){ .flettir{--dalkar:3; --synileg:3.15} }
@media (min-width:992px){ .flettir{--dalkar:4; --synileg:4}    }  /* á tölvu sjá örvarnar um þetta */

/* ---- Röðin sem rennur ---------------------------------------- */
.flettir-rod{
  display:flex;
  gap:var(--bil);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;

  /* fela skrunstikuna */
  scrollbar-width:none;
  -ms-overflow-style:none;

  /* Aðeins lóðrétt pláss fyrir skuggann á spjöldunum.
     Ekkert lárétt pláss — það ruglar mælinguna á því hvort
     hægt sé að fletta.                                        */
  padding:6px 0;
}
.flettir-rod::-webkit-scrollbar{ display:none }

/* Hvert spjald tekur sinn hlut af breiddinni.
   Grunnbreiddin miðast við --synileg, sem er brot úr spjaldi hærri
   en fjöldinn sem kemst fyrir. Þar með stendur næsta spjald alltaf
   örlítið út á kantinn og lesandinn sér að meira er til hliðar.
   Gægjan vinnur með örvatökkunum, hún er ekki í staðinn fyrir þá.

   flex-grow er 1 og max-width setur þakið: ef spjöldin komast öll
   fyrir er ekkert að gægjast eftir, og þá teygja þau sig út í
   fulla breidd í stað þess að skilja eftir kjánalegt bil. */
.flettir-rod > a{
  display:flex;
  flex:1 0 calc((100% - (var(--synileg) - 1) * var(--bil)) / var(--synileg));
  max-width:calc((100% - (var(--dalkar) - 1) * var(--bil)) / var(--dalkar));
  scroll-snap-align:start;
  text-decoration:none;
  color:inherit;
}

/* ---- Jöfn hæð á öllum flipum --------------------------------- */
/* Þrennt sem tryggir að eins og tveggja línu titlar taki
   jafnmikið pláss. Engin <br/> nokkurs staðar.                  */

.flettir-rod > a > .team-member{
  display:flex;
  flex-direction:column;
  width:100%;
}

.flettir-rod .member-img{
  aspect-ratio:1 / 1;        /* myndin alltaf jafnhá */
  overflow:hidden;
}
.flettir-rod .member-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.flettir-rod .member-info{
  flex:1;                    /* tekur það pláss sem eftir er */
  min-height:4.2em;          /* pláss fyrir tvær línur */
  display:flex;
  flex-direction:column;     /* titill og dagsetning stafla sér */
  align-items:center;
  justify-content:center;
  text-align:center;
}
.flettir-rod .member-info h4{
  margin:0;
  text-wrap:balance;         /* skiptir línum fallega, sjálfkrafa */
}

/* ---- Örvatakkarnir ------------------------------------------- */
/* MIKILVÆGT: takkarnir eru FALDIR sjálfgefið.
   Þeir birtast eingöngu þegar JavaScript hefur mælt röðina og
   staðfest að hún sé breiðari en glugginn. Þannig geta þeir
   aldrei birst þegar ekkert er að fletta — og ef skriftan
   keyrir alls ekki sérðu enga dauða takka, bara listann
   sem má strjúka.

   Takkarnir eru á öllum skjástærðum. Á tölvu sitja þeir utan
   við röðina, í síma ofan á henni, því þar er ekkert pláss til
   hliðar. Sjá símaregluna neðst.                               */

.flettir-takki{
  display:none;
  position:absolute;
  top:calc(50% - 1.6rem);
  transform:translateY(-50%);
  width:2.75rem;
  height:2.75rem;
  border:none;
  border-radius:50%;
  background:#9b3636;
  color:#fff;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  z-index:2;
}
.flettir-takki:hover{ background:#7d2b2b }
.flettir-takki.fyrri{ left:-1.1rem }
.flettir-takki.naesti{ right:-1.1rem }

/* Birtast aðeins þegar JS hefur sett klasann á .flettir */
.flettir.kann-ad-fletta > .flettir-takki{ display:flex }

/* ...og hverfa hvor í sínu lagi þegar komið er á endann */
.flettir.kann-ad-fletta > .flettir-takki[hidden]{ display:none }

/* ---- Takkarnir í síma og á spjaldtölvu ------------------------ */
/* Utan við röðina er ekkert pláss: .container skilur aðeins eftir
   12px til hliðar, svo takki á -1.1rem færi út fyrir skjáinn.
   Þess vegna sitja þeir ofan á ystu spjöldunum. Hvíta umgjörðin
   og skugginn gera þá læsilega ofan á hvaða mynd sem er.

   Vinstri takkinn er falinn í hvíldarstöðu (JS setur [hidden]
   þegar scrollLeft er 0), svo í fyrstu sýn er aðeins ein ör,
   hægra megin, og hún bendir í þá átt sem hægt er að fara.     */
@media (max-width:991px){
  .flettir-takki{
    width:2.5rem;
    height:2.5rem;
    font-size:1.25rem;
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(0,0,0,.35);
  }
  .flettir-takki.fyrri{ left:.25rem }
  .flettir-takki.naesti{ right:.25rem }
}

/* Þeim sem kjósa minni hreyfingu er hlíft við mjúku skruni */
@media (prefers-reduced-motion:reduce){
  .flettir-rod{ scroll-behavior:auto }
}