/* =========================================================================
   Esimerkkisivusto-modal
   Demokortin klikkaus avaa demon tähän jaettuun <dialog>:iin iframen sisällä
   sen sijaan että veisi kävijän suoraan uuteen välilehteen. Kävijä pysyy
   kampanjasivulla, voi vierittää ja kokeilla demoa, ja päättää vasta sitten
   avaako sen kokoruutuun vai pyytääkö oman vedoksen. Sama design-kieli kuin
   demokorttien oma selainkehys (.demo-frame-bar, css/style.css) ja sama
   dialog-konventio kuin muilla modaaleilla (css/takuu-modal.css).
   ========================================================================= */

.demo-modal {
  width: min(1100px, calc(100vw - 32px));
  height: min(820px, calc(100dvh - 32px));
  /* dialog:modal:n selainoletus rajaa max-width/-height:n johonkin
     "100% - muutama px" -laskuun, joka lipsahtaa yli omien min()-arvojemme
     erityisesti kapealla ruudulla - poistetaan oletus kokonaan, koska
     width/height hoitavat rajauksen jo itse. */
  max-width: none;
  max-height: none;
  margin: auto; /* globaali reset tappaisi muuten <dialog>:n natiivikeskityksen */
  padding: 0;
  border: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-card-hover);
}

.demo-modal::backdrop {
  background: rgba(24, 24, 24, 0.55);
  backdrop-filter: blur(3px);
}

/* Kapealla ruudulla modal vie koko näytön, jotta iframelle jää käyttökelpoista
   tilaa - 1100x820 skaalattuna puhelimeen olisi vain postimerkin kokoinen. */
@media (max-width: 640px) {
  .demo-modal {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
}

.demo-modal-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Selainkehys-yläpalkki, sama kuvakieli kuin demokorttien esikatselukuvassa. */
.demo-modal-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel-tint);
  border-bottom: 1px solid var(--border);
}

.demo-modal-dots {
  display: inline-flex;
  flex-shrink: 0;
  gap: 5px;
  padding-left: 4px;
}

.demo-modal-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-2);
  opacity: 0.35;
}

.demo-modal-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.78rem;
  color: var(--text-2);
}

.demo-modal-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.demo-modal-close:hover {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: #fff;
}

.demo-modal-close svg {
  width: 15px;
  height: 15px;
}

/* Yritys + toimiala -rivi kehyksen alla, täyttää dialogin aria-labelin. */
.demo-modal-meta {
  flex-shrink: 0;
  margin: 0;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.demo-modal-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--panel-tint);
}

.demo-modal-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.demo-modal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-tint);
  transition: opacity 0.2s ease;
}

.demo-modal-loading[hidden] {
  display: flex; /* jatkaa fade-outia, JS poistaa lopulta display:nonen sijaan */
  opacity: 0;
  pointer-events: none;
}

.demo-modal-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  animation: demo-modal-spin 0.7s linear infinite;
}

@keyframes demo-modal-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-modal-spinner {
    animation: none;
  }
}

.demo-modal-cta {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 16px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.demo-modal-cta-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-2);
}

.demo-modal-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

/* inline-flex + align-items:center pitää tekstin ja ikonin pystykeskellä
   riippumatta napin todellisesta korkeudesta - .btn on oletuksena
   inline-block, jolloin flex-rivin stretch venytti lyhyemmän napin
   pidemmäksi mutta jätti sisällön yläreunaan kiinni. */
.demo-modal-cta-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

/* Ikoni pyöreän "chipin" sisällä pallon näköisenä, ei paljaana nuolena
   tekstin perässä - sama idea kuin .demo-open, mutta viimeistellympi. */
.btn-icon-circle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--panel-tint);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-icon-circle svg {
  width: 13px;
  height: 13px;
}

#demo-modal-fullscreen:hover .btn-icon-circle {
  background: var(--lime);
  color: var(--lime-ink);
  transform: translate(2px, -2px);
}

@media (max-width: 640px) {
  .demo-modal-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .demo-modal-cta-hint {
    text-align: center;
  }

  .demo-modal-cta-actions {
    margin-left: 0;
    flex-direction: column;
  }

  .demo-modal-cta-actions .btn {
    text-align: center;
  }
}