/* ===== Case study detail page (single project) ===== */

/* Portfolio grid/listing card thumbnail crop height override — ptf-main's
   default (550px) crops deep enough into a tall screenshot that swapping the
   source image can look unchanged if the crop window lands on similar-looking
   content each time. */
.ptf-work__media img {
	height: 430px;
}

/* ===== Navbar language dropdown ===== */
.ptf-language-switcher--dropdown {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: 1.5rem;
}
.ptf-language-switcher__toggle {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ptf-color-black);
	padding: 0.5rem 0;
}
.ptf-language-switcher__toggle img {
	height: 16px;
	width: 22px;
	object-fit: cover;
	border-radius: 2px;
}
.ptf-language-switcher__toggle i {
	font-size: 0.65rem;
	transition: transform 0.2s ease;
}
.ptf-language-switcher--dropdown.is-open .ptf-language-switcher__toggle i {
	transform: rotate(180deg);
}
.ptf-language-switcher__menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin: 0.5rem 0 0;
	padding: 0.5rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ptf-color-14);
	border-radius: 0.625rem;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	min-width: 170px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 200;
}
.ptf-language-switcher--dropdown.is-open .ptf-language-switcher__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ptf-language-switcher__menu a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	color: var(--ptf-color-black);
}
.ptf-language-switcher__menu a img {
	height: 16px;
	width: 22px;
	object-fit: cover;
	border-radius: 2px;
}
.ptf-language-switcher__menu a:hover,
.ptf-language-switcher__menu a.is-active {
	background: var(--ptf-color-14);
	color: var(--ptf-accent-1);
}

.ptf-case-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--ptf-color-14);
}
.ptf-case-meta__item .label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ptf-color-6);
	margin-bottom: 0.375rem;
}
.ptf-case-meta__item .value {
	font-size: 1rem;
	color: var(--ptf-color-black);
}
.ptf-case-meta__item .value a {
	border-bottom: 1px solid currentColor;
}
.ptf-case-meta__item .value a:hover {
	color: var(--ptf-accent-1);
}

.ptf-browser-frame {
	border-radius: 0.625rem;
	overflow: hidden;
	border: 1px solid var(--ptf-color-14);
	background: var(--ptf-color-white);
	margin-bottom: 1.5rem;
}
.ptf-browser-frame__bar {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.75rem 1rem;
	background: #efede7;
	border-bottom: 1px solid var(--ptf-color-14);
}
.ptf-browser-frame__dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--ptf-color-14);
}
.ptf-browser-frame__dot:nth-child(1) { background: #ff5f57; }
.ptf-browser-frame__dot:nth-child(2) { background: #febc2e; }
.ptf-browser-frame__dot:nth-child(3) { background: #28c840; }
.ptf-browser-frame__url {
	margin-left: 0.75rem;
	background: var(--ptf-color-white);
	border: 1px solid var(--ptf-color-14);
	border-radius: 0.375rem;
	padding: 0.3rem 0.875rem;
	font-size: 0.75rem;
	color: var(--ptf-color-6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ptf-browser-frame img {
	display: block;
	width: 100%;
	height: auto;
}

.ptf-showcase-desktop-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}
.ptf-showcase-desktop-pair .ptf-browser-frame {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.ptf-showcase-desktop-pair {
		grid-template-columns: 1fr;
	}
}

.ptf-showcase-mobile-grid {
	display: grid;
	/* grid-template-columns is set inline per row (repeat(N, minmax(0,1fr))),
	   N = how many phones are actually in that row, so the row's columns
	   always span the full container width — no dead margin on either side —
	   while an incomplete last row still gets exactly as many tracks as it
	   has shots instead of sitting inside a phantom wider one. */
	justify-items: center;
	gap: 1.25rem;
	margin-top: 1.5rem;
}
/* iPhone-style mockup: a dark bezel with a Dynamic-Island notch, sized to a
   real iPhone screen ratio. The screenshot (even a tall full-page capture)
   is cropped to whatever fits in that screen, top-aligned — like looking at
   the page on an actual phone, not an elongated strip of the whole scroll.
   max-width caps how wide a single phone can get when its grid column is
   wider than that (e.g. a short row) — the leftover space then just sits
   inside that column, centered, rather than stretching the phone itself. */
.ptf-phone-frame {
	position: relative;
	width: 100%;
	max-width: 220px;
	border-radius: 1.25rem;
	border: 8px solid #1a1a1a;
	overflow: hidden;
	background: #1a1a1a;
	aspect-ratio: 9 / 19.5;
}
.ptf-phone-frame::before {
	content: '';
	position: absolute;
	top: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 40%;
	max-width: 110px;
	height: 22px;
	background: #1a1a1a;
	border-radius: 999px;
	z-index: 2;
}
.ptf-phone-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.ptf-video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 0.625rem;
	overflow: hidden;
	margin-bottom: 1.5rem;
	background: var(--ptf-color-black);
}
.ptf-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ptf-photo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	margin-top: 1.5rem;
}
.ptf-photo-grid__item {
	border-radius: 0.625rem;
	overflow: hidden;
}
.ptf-photo-grid__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 767px) {
	.ptf-showcase-mobile-grid {
		gap: 0.5rem;
	}
	.ptf-case-meta {
		gap: 1.5rem;
	}
	.ptf-photo-grid {
		grid-template-columns: 1fr;
	}
}