/* ===========================
   GLOBALT / SCROLL-LOCK
   =========================== */
html { 
  scrollbar-gutter: stable; 
}
@supports (scrollbar-gutter: stable both-edges) {
  html { 
    scrollbar-gutter: stable both-edges; 
  }
}

/* VIKTIG: Ingen scroll-lock regler her - håndteres av JavaScript */

/* Skjul HubSpot sine widget-labels i editoren */
html.hs-inline-edit .speaker-grid [id^="widget_"],
html.hs-edit-mode   .speaker-grid [id^="widget_"],
html.hs-inline-edit .speaker-grid .dnd-module-label,
html.hs-edit-mode   .speaker-grid .dnd-module-label {
  display: none !important;
}

/* ===========================
   BASE / BAKGRUNN
   =========================== */
.speaker-grid{
  background:#12636e;
  color:#fff;
  padding:4rem 2rem;
}
.speaker-grid__wrap{
  max-width:1800px;
  margin:0 auto;
}

/* ===========================
   LAYOUT
   =========================== */
.speaker-grid__first{
  display:flex;
  justify-content:center;
  margin-bottom:3rem;
}
.speaker-grid__item--first{ 
  text-align:center; 
}

.speaker-grid__rows{
  --col-gap: 2rem;
  --row-gap: 3rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap: var(--col-gap);
  row-gap: var(--row-gap);
}

.speaker-grid__rows .speaker-grid__item{
  flex: 0 1 calc((100% - (3 * var(--col-gap))) / 4);
  max-width: calc((100% - (3 * var(--col-gap))) / 4);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

@media (max-width:1100px){
  .speaker-grid__rows .speaker-grid__item{
    flex-basis: calc((100% - (2 * var(--col-gap))) / 3);
    max-width:  calc((100% - (2 * var(--col-gap))) / 3);
  }
}

@media (max-width:768px){
  .speaker-grid__rows .speaker-grid__item{
    flex-basis: calc((100% - (1 * var(--col-gap))) / 2);
    max-width:  calc((100% - (1 * var(--col-gap))) / 2);
  }
}

@media (max-width:520px){
  .speaker-grid__rows .speaker-grid__item{
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ===========================
   BILDE/"SCENE"
   =========================== */
.speaker-card{
  position: relative;
  display: block;
  background:transparent;
  border: 0;
  padding: 1rem;
  margin: 0 auto .75rem;
  cursor: pointer;
  width: 320px;
  height: 360px;
  border-radius: 12px; /* Rundede hjørner */
  /*box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Subtil drop shadow */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
  touch-action: manipulation;
  user-select: none;
  box-sizing: border-box;
}

.speaker-grid__item--first .speaker-card{
  width: 520px;
  height: 560px;
}

@media (max-width:720px) {
  .speaker-grid__item--first .speaker-card{
    width: 320px;
    height: 360px;
  }
}

.speaker-grid__img{
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  max-height: calc(100% - 2 rem);
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  transition: transform .25s ease, filter .25s ease;
  transform-origin: bottom center;
  pointer-events: none;
}

/* Hover-effekter kun på desktop */
@media (hover: hover) and (pointer: fine) {
  .speaker-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.35); /* Sterkere skygge ved hover */
    transform: translateY(-2px); /* Løft kortet litt */
  }
  
  .speaker-card:hover .speaker-grid__img{
    transform: translateX(-50%) scale(1.16);
  }
}

/* Touch feedback på mobil - subtil */
@media (hover: none) and (pointer: coarse) {
  .speaker-card:active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Mindre skygge ved touch */
    transform: scale(0.98); /* Liten inntrykk-effekt */
  }
}

/* Touch feedback på mobil */
.speaker-card:active {
  opacity: 0.9;
}

/* ===========================
   TEKST
   =========================== */
.speaker-grid__name{
  font-weight:700;
  font-size:1.25rem;
  color:#fff;
  margin-top:.25rem;
  text-align:center;
}
.speaker-grid__title{
  font-size:1rem;
  opacity:.9;
  color:#fff;
  text-align:center;
}

/* ===========================
   MODAL (popup)
   =========================== */
.sg-modal{ 
  position:fixed; 
  inset:0; 
  display:none; 
  z-index:9999;
}
.sg-modal.is-open{ 
  display:block; 
}
.sg-modal__backdrop{ 
  position:fixed;
  inset:0; 
  background:rgba(0,0,0,.5);
  cursor: pointer;
}

.sg-modal__dialog{
  background:#0f3f45;
  color:#fff;
  width:min(920px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  border-radius:12px;
  overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:grid;
  grid-template-columns: 320px 1fr;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width:800px){
  .sg-modal__dialog{
    grid-template-columns:1fr;
    width: calc(100vw - 2rem);
    max-width: 500px;
    max-height: 80vh;
    top: 10vh;
    transform: translateX(-50%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Skjul bilde i modal på mobil */
  .sg-modal__media {
    display: none !important;
  }
}

.sg-modal__media{
  background:#104a52;
  display:flex; 
  align-items:center; 
  justify-content:center;
  padding:1rem;
}

.sg-modal__img{ 
  display:block; 
  width:100%; 
  height:auto; 
  object-fit:contain; 
}

.sg-modal__content{ 
  padding:1.5rem 1.75rem; 
}

.sg-modal__name{ 
  font-size:1.75rem; 
  margin:0 0 .25rem; 
}

.sg-modal__title{ 
  font-size:1.05rem; 
  opacity:.9; 
  margin-bottom:1rem; 
}

.sg-modal__bio{ 
  line-height:1.7; 
}

.sg-modal__close{
  position:absolute; 
  top:.5rem; 
  right:.5rem;
  background:transparent; 
  border:0; 
  color:#fff;
  font-size:2rem; 
  line-height:1; 
  width:2.25rem; 
  height:2.25rem;
  cursor:pointer;
}

.sg-modal__close:hover{ 
  opacity:.85; 
}