/* ═══════════════════════════════════════════════════════════
   Samsung Family Hub — Canonical Component (SVG-based, 2026-04-24)
   ═══════════════════════════════════════════════════════════
   Uses the canonical SVG chrome at:
     /Global_Assets/DeviceFrame/Samsung_Family_Hub_Fridge.svg

   SVG viewBox: 2295 × 2311
   Screen area (SVG coordinates): x=1412.5, y=594.5, w=591, h=1051
     → top:    25.725% (594.5 / 2311)
     → left:   61.547% (1412.5 / 2295)
     → width:  25.752% (591 / 2295)
     → height: 45.478% (1051 / 2311)

   USAGE (canonical pattern, matches .iphone15pro contract):
     <link rel="stylesheet" href="[rel]/assets/css/device-frame-fridge.css">

     <div class="samfh samfh--lg">
       <img class="samfh__chrome"
            src="[rel]/Global_Assets/DeviceFrame/Samsung_Family_Hub_Fridge.svg"
            alt="" aria-hidden="true">
       <div class="samfh__screen">
         <!-- content or iframe -->
       </div>
     </div>

   Sizes (override --samfh-w):
     .samfh--sm → 320px
     .samfh--md → 440px
     .samfh--lg → 560px   (default)
     .samfh--xl → 680px
     .samfh--xxl → 820px

   RULES:
   - Always use this component for Samsung Family Hub mockups.
   - Do NOT reproduce the frame in CSS — point to the SVG asset.
   - When embedding a UI iframe inside .samfh__screen, append
     ?noframe=1 to the iframe URL so the inner file is content-only.
   ═══════════════════════════════════════════════════════════ */

.samfh {
  position: relative;
  aspect-ratio: 2295 / 2311;   /* ≈ 0.993 */
  flex-shrink: 0;
  width: var(--samfh-w, 560px);
  user-select: none;
}

.samfh__chrome {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  z-index: 1;
}

.samfh__screen {
  position: absolute;
  top: 25.725%;      /* 594.5 / 2311 */
  left: 61.547%;     /* 1412.5 / 2295 */
  width: 25.752%;    /* 591 / 2295 */
  height: 45.478%;   /* 1051 / 2311 */
  overflow: hidden;
  z-index: 2;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* ── SIZE MODIFIERS ── */
.samfh--sm  { --samfh-w: 320px; }
.samfh--md  { --samfh-w: 440px; }
.samfh--lg  { --samfh-w: 560px; }
.samfh--xl  { --samfh-w: 680px; }
.samfh--xxl { --samfh-w: 820px; }

/* ── MODIFIERS ── */
.samfh__screen--dark { background: #0a0a0a; color: #ededed; }
.samfh--faded { opacity: 0.5; }
.samfh--faded .samfh__chrome { filter: grayscale(0.4); }

/* ── BACKWARD COMPAT (old CSS-drawn variant — now ignored if present) ── */
.samfh__badge,
.samfh__bezel,
.samfh__seam,
.samfh__handle,
.samfh__cam { display: none; }

/* ── MOBILE: cap fridge frame to viewport ── */
@media (max-width: 768px) {
  .samfh--md, .samfh--lg, .samfh--xl, .samfh--xxl {
    --samfh-w: min(560px, calc(100vw - 40px));
  }
}
@media (max-width: 480px) {
  .samfh--sm, .samfh--md, .samfh--lg, .samfh--xl, .samfh--xxl {
    --samfh-w: calc(100vw - 32px);
  }
}