/**
 * Amitry Project Grid Pro - frontend styles.
 *
 * Pro frame styles built on the free plugin's .apshow-mockup markup and
 * classes. The free stylesheet (apshow-frontend) is a declared dependency
 * so these rules load after it.
 *
 * EDITOR IFRAME NOTE (WordPress 6.3+):
 * enqueue_block_assets only injects CSS into the editor's iframed canvas
 * if the stylesheet contains a .wp-block / .wp-block-* / .editor-styles-
 * wrapper selector. The cards render inside .wp-block-amitry-project-card,
 * so each rule is also written with a .wp-block prefix. That both scopes
 * the styles and gets the stylesheet loaded inside the iframe, so the
 * phone preview is styled in the editor as well as on the frontend.
 *
 * PHONE FRAME (.apshow-mockup--frame-phone)
 * A modern smartphone: portrait aspect ratio, rounded body, a Dynamic
 * Island pill, a status bar (time left, signal/wifi/battery right) and a
 * home indicator at the bottom (drawn as a pseudo-element, no markup).
 * The browser address bar is intentionally absent - it is an app
 * screenshot, not a browser.
 */

/* ---- Frame body: portrait, rounded, centered, dark bezel ---- */
.wp-block .apshow-mockup--frame-phone,
.apshow-mockup--frame-phone {
	/* Force a portrait aspect ratio regardless of the chosen viewport
	   ratio - a phone is tall. Overrides the figure's inline --apshow-ratio
	   indirectly by sizing the viewport below. */
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background: #0b0b0d;
	border-radius: 44px;
	border: 1px solid #26272b;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.25 );
	overflow: hidden;
	position: relative;
}

/* ---- Status bar: holds time, island, status icons ---- */
.wp-block .apshow-mockup--frame-phone .apshow-mockup__statusbar,
.wp-block .apshow-mockup--frame-phone .apshow-mockup__statusbar,
.apshow-mockup--frame-phone .apshow-mockup__statusbar {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 6%;
	background: #0b0b0d;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	overflow: hidden;
}

/* Time: left cluster. min-width matches the icons side so the centered
   island sits optically in the middle of the bar. */
.wp-block .apshow-mockup--frame-phone .apshow-mockup__statusbar-time,
.apshow-mockup--frame-phone .apshow-mockup__statusbar-time {
	flex: 0 0 auto;
	min-width: 52px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Dynamic Island: a real flex child (NOT absolutely positioned), so it
   can never overlap the time or the icons no matter how narrow the card
   is. margin:auto centers it in the leftover space; it may shrink on very
   narrow cards but stays a pill. */
.wp-block .apshow-mockup--frame-phone .apshow-mockup__island,
.apshow-mockup--frame-phone .apshow-mockup__island {
	flex: 0 1 auto;
	width: 72px;
	max-width: 40%;
	height: 22px;
	margin: 0 auto;
	background: #000000;
	border-radius: 999px;
}

/* ---- Status icons: inline SVG, sized and colored via currentColor.
   min-width matches the time side for symmetric centering of the island. ---- */
.wp-block .apshow-mockup--frame-phone .apshow-mockup__statusbar-icons,
.apshow-mockup--frame-phone .apshow-mockup__statusbar-icons {
	flex: 0 0 auto;
	min-width: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	color: #ffffff;
}

.wp-block .apshow-mockup--frame-phone .apshow-mockup__statusbar-svg,
.apshow-mockup--frame-phone .apshow-mockup__statusbar-svg {
	display: block;
	height: 11px;
	width: auto;
}

/* ---- Viewport: portrait window between status bar and home indicator.
   We override the aspect ratio to a tall phone screen. ---- */
.wp-block .apshow-mockup--frame-phone .apshow-mockup__viewport,
.apshow-mockup--frame-phone .apshow-mockup__viewport {
	aspect-ratio: 9 / 18;
	border-radius: 0;
	background: #ffffff;
}

/* ---- Home indicator: a thin rounded bar near the bottom edge ---- */
.wp-block .apshow-mockup--frame-phone::after,
.apshow-mockup--frame-phone::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 9px;
	transform: translateX( -50% );
	width: 38%;
	height: 5px;
	background: #ffffff;
	border-radius: 999px;
	z-index: 2;
	pointer-events: none;
}

/* Add a little dark padding below the screen so the home indicator has
   room to sit over the bezel rather than the screenshot. */
.wp-block .apshow-mockup--frame-phone .apshow-mockup__viewport,
.apshow-mockup--frame-phone .apshow-mockup__viewport {
	margin-bottom: 24px;
}