/* ==========================================================================
   05a SCREENS — 実機の画面
   画面そのものを主役にする。装飾は最小限、ブラウザ枠だけを添える。
   ========================================================================== */

.aa-screens__list{
	display:grid;
	gap:clamp(28px,4vw,56px);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
}

.aa-screens__figure{ display:grid; gap:1.2em }

/* ブラウザ枠 */
.aa-screens__frame{
	position:relative;
	border-radius:clamp(8px,1vw,14px);
	overflow:hidden;
	background:#fff;
	border:1px solid var(--rule);
	box-shadow:0 40px 80px -50px rgb(11 18 32 / .5);
	transition:transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.aa-screens__item:hover .aa-screens__frame{
	transform:translateY(-4px);
	box-shadow:0 50px 90px -50px rgb(11 18 32 / .55);
}

/* 上部のバー（3つの丸） */
.aa-screens__bar{
	display:flex;
	align-items:center;
	gap:6px;
	padding:10px 14px;
	background:var(--c-mist);
	border-bottom:1px solid var(--rule);
}
.aa-screens__bar i{
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--c-silver);
}

/* 画面全体が必ず収まるようにする。
   拡大して一部だけが見える状態を避け、上端から順に見せる。 */
.aa-screens__media{
	display:block;
	width:100%;
	max-height:clamp(280px,42svh,520px);
	overflow:hidden;
}
.aa-screens__media .aa-media__img{
	display:block;
	width:100%;
	height:auto;
	object-fit:contain;      /* 切り取らず、全体を見せる */
	object-position:top center;
}

/* クリックで拡大（別タブで原寸表示） */
.aa-screens__frame{ cursor:zoom-in }

.aa-screens__caption{ display:grid; gap:.5em }
.aa-screens__name{
	font-family:var(--font-display);
	font-weight:500;
	font-size:clamp(1rem,1.5vw,1.3rem);
}
.aa-screens__text{
	color:var(--fg-sub);
	font-size:.9rem;
	line-height:1.9;
	max-width:44ch;
}

/* スマホ画面（縦長）はブラウザ枠を細くする */
.aa-screens__item:nth-child(4) .aa-screens__frame{
	max-width:340px;
	margin-inline:auto;
	border-radius:clamp(16px,2vw,26px);
}
.aa-screens__item:nth-child(4) .aa-screens__bar{ display:none }
.aa-screens__item:nth-child(4) .aa-screens__media{ max-height:clamp(360px,56svh,640px) }

/* 画面が多い場合も、1枚あたりが小さくなりすぎないようにする */
@media (min-width:1024px){
	.aa-screens__list{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:599px){
	.aa-screens__media{ max-height:clamp(220px,34svh,340px) }
}