/* wa-lint: skip */
/* Shared device-frames for Claude design hero mockups.
   ÉN definition pr. device-type, size-modifiers giver large/small variant
   med proportionalt skalerede bezel-tykkelser, radii og skygger.

   Brug:
     <div class="device-phone device-phone--lg">…content…</div>
     <div class="device-tablet device-tablet--lg">
       <div class="device-tablet__screen">…content…</div>
     </div>
     <div class="device-laptop device-laptop--sm">
       <div class="device-laptop__lid">
         <div class="device-laptop__screen">…content…</div>
       </div>
       <div class="device-laptop__base"></div>
     </div>

   Bezel-design (alle devices):
   - Skærm: hvid baggrund (var(--surface) hvis defineret, ellers rgb(255, 255, 255))
   - Bezel: rgb(29, 35, 39) (var(--ink))
   - Yder-skygge: rgba(0,0,0,0.4) ring der antyder phone-edge
   - Drop-shadow: blød ned/ud for at løfte device fra baggrund
*/

/* ═══════════════ PHONE ═══════════════ */

.device-phone {
  position: relative;
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
  flex: 0 0 auto;
}

/* Large — bruges i fuld-stand-hero (udstillere). */
.device-phone--lg {
  width: 340px;
  height: 620px;
  border-radius: 36px;
  box-shadow:
    0 40px 100px rgba(49,79,89,0.18),
    0 0 0 11px rgb(29, 35, 39),
    0 0 0 13px rgba(0,0,0,0.4);
}

/* Small — bruges i mini-hero lightboxes (talere, produkter, nyheder,
   konkurrencer, infopunkter, kontaktpersoner). */
.device-phone--sm {
  width: 200px;
  height: 360px;
  border-radius: 24px;
  box-shadow:
    0 18px 50px rgba(49,79,89,0.18),
    0 0 0 6px rgb(29, 35, 39),
    0 0 0 7px rgba(0,0,0,0.4);
}

/* ═══════════════ TABLET ═══════════════ */

.device-tablet {
  position: relative;
  background: rgb(29, 35, 39);
  box-shadow: 0 40px 100px rgba(49,79,89,0.18);
  z-index: 5;
  flex: 0 0 auto;
}
.device-tablet__screen {
  width: 100%; height: 100%;
  background: rgb(255, 255, 255);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* Large — bruges i fuld-stand-hero (program). */
.device-tablet--lg {
  width: 720px;
  height: 540px;
  max-width: 100%;
  border-radius: 24px;
  padding: 14px;
}
.device-tablet--lg .device-tablet__screen { border-radius: 12px; }

/* Small — reserveret til kommende mini-hero-varianter hvor tablet giver mening. */

/* ═══════════════ LAPTOP ═══════════════ */

.device-laptop {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
}
.device-laptop__lid {
  background: rgb(29, 35, 39);
  position: relative;
}
/* Camera notch */
.device-laptop__lid::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgb(44, 51, 56);
}
.device-laptop__screen {
  background: rgb(255, 255, 255);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.device-laptop__base {
  background: linear-gradient(180deg, rgb(44, 51, 56) 0%, rgb(29, 35, 39) 100%);
}
/* Hinge cutout */
.device-laptop__base::after {
  content: '';
  display: block;
  background: rgb(20, 24, 27);
  margin: 0 auto;
}

/* Small — bruges i mini-hero lightbox (brands). */
.device-laptop--sm { width: 100%; max-width: 360px; }
.device-laptop--sm .device-laptop__lid {
  border-radius: 10px 10px 3px 3px;
  padding: 10px 10px 8px;
}
.device-laptop--sm .device-laptop__screen {
  border-radius: 3px;
  height: 240px;
}
.device-laptop--sm .device-laptop__base {
  height: 8px;
  border-radius: 0 0 10px 10px;
  margin: 0 -10px;
}
.device-laptop--sm .device-laptop__base::after {
  width: 50px; height: 4px;
  border-radius: 0 0 5px 5px;
}

/* Large — reserveret til kommende fuld-stand-hero-varianter. */