/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* === Laptop CSS === */
.laptop {
  position: relative;
  width: min(90vw, 900px);
  margin: 40px auto;
  aspect-ratio: 16 / 10;
}

.laptop .screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 25px rgba(0,0,0,0.4);
}

.laptop .screen::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #111;
  border-radius: 3px;
}

.laptop .inner {
  position: absolute;
  top: 20px; left: 12px; right: 12px; bottom: 12px;
  border-radius: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  pointer-events: auto;
}

/* Hide scrollbars */
.laptop .inner::-webkit-scrollbar { display: none; }
.laptop .inner { -ms-overflow-style: none; scrollbar-width: none; } 

.laptop .inner img { display: block; width: 100%; }

.laptop::after {
  content: "";
  display: block;
  position: absolute;
  left: -8%; right: -8%; bottom: -18px; height: 18px;
  background: linear-gradient(to bottom, #cfcfcf, #999);
  border-radius: 0 0 12px 12px;
}

/* Fallback if aspect-ratio unsupported */
@supports not (aspect-ratio: 16 / 10) {
  .laptop { height: calc(min(90vw, 900px) * 0.625); }
}