/* ==========================================================================
   PHOTOLICIOUS — PAGE BLOCKS
   Homepage sections plus the case-study card, which the homepage and the
   archive both use.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.hero {
	text-align: center;
	padding-block-start: clamp(96px, 11vw, 150px);
}
.hero .logo { margin-block-end: clamp(14px, 1.8vw, 24px); }
.logo-tag {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.01em;
	font-size: clamp(0.9rem, 1.5vw, 1.2rem);
	margin: 0 0 clamp(14px, 1.8vw, 22px);
	display: flex;
	justify-content: center;
	gap: 0.25em;
}
.logo-tag .brk { opacity: 0.4; }
/* Reserving the width of the longest word stops the bracket from twitching
   left and right every time the rotator swaps. */
.logo-tag .rot { display: inline-block; min-width: 5.4ch; text-align: start; }
.hero .mount { margin-block-start: clamp(20px, 2.8vw, 38px); }
.hero-btns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-block-start: clamp(18px, 2.4vw, 30px);
}

/* --- Seasonal tiles ------------------------------------------------------- */
.tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(7px, 0.8vw, 12px);
}
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, 1fr); } }

/* --- Services ------------------------------------------------------------- */
.svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(8px, 1vw, 16px);
}
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }
.svc {
	background: var(--card);
	color: var(--card-ink);
	border-radius: var(--r);
	padding: clamp(24px, 3vw, 44px);
	display: flex;
	flex-direction: column;
}
.svc .ico {
	width: clamp(30px, 3vw, 42px);
	height: auto;
	fill: var(--accent);
	margin-block-end: 1rem;
}
.svc h3 {
	font-size: clamp(1.4rem, 2.6vw, 2.1rem);
	text-transform: uppercase;
	margin-block-end: 0.7rem;
}
.svc p {
	margin: 0 0 1.4rem;
	opacity: 0.72;
	font-size: 0.96rem;
	max-width: 42ch;
}

/* --- Case card ------------------------------------------------------------ */
/* Name across the top, frames in the middle, numbers along the bottom — the
   order a client reads a result in. */
.case {
	background: var(--card);
	color: var(--card-ink);
	border-radius: var(--r);
	padding: clamp(18px, 2.2vw, 32px);
	margin-block-end: clamp(7px, 0.9vw, 12px);
	text-decoration: none;
	display: block;
}
.case-name {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	flex-wrap: wrap;
	padding-block-end: clamp(14px, 1.8vw, 22px);
	margin-block-end: clamp(14px, 1.8vw, 22px);
	border-bottom: 1px solid var(--card-line);
}
.case-name h3 { font-size: clamp(1.3rem, 3vw, 2.4rem); text-transform: uppercase; }
.case-name span {
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.5;
	font-weight: 700;
}
.case-lead {
	max-width: 60ch;
	opacity: 0.72;
	font-size: 0.96rem;
	margin: 0 0 clamp(16px, 2vw, 26px);
}
/* --frames is set per card from the number of real photos the case actually
   has, so a film-only or single-still case fills its row evenly instead of
   leaving dead cells where the stock padding used to sit. */
.case-frames {
	display: grid;
	grid-template-columns: repeat(var(--frames, 4), 1fr);
	gap: clamp(6px, 0.7vw, 10px);
}
@media (max-width: 620px) {
	.case-frames { grid-template-columns: repeat(min(var(--frames, 4), 2), 1fr); }
}
.case-frames .shot { border-radius: 11px; background: var(--media-placeholder); }

.metrics {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(14px, 2.4vw, 40px);
	margin-block-start: clamp(16px, 2vw, 26px);
	padding-block-start: clamp(14px, 1.8vw, 22px);
	border-top: 1px solid var(--card-line);
}
/* Proof points sit on a shared baseline, with any figure rising above it.
   Only about a third of them carry a figure at all — the Arabic side spells
   most of its numbers as words — so a row is usually a mix. Left to flow from
   the top, a phrase-only point put its label level with the big numeral beside
   it while the numeral's own label dropped a line, and the row read as broken
   rather than composed. */
.metric {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.4em;
}
.metric b {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.4rem, 3vw, 2.4rem);
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--accent);
	/* Figures stay in Latin order even on the Arabic side. */
	direction: ltr;
	text-align: start;
}
.metric span {
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.5;
	font-weight: 700;
}

/* Roomier on the archive, where the card is the whole page. */
.archive-case { padding: clamp(20px, 2.6vw, 40px); margin-block-end: clamp(8px, 1vw, 16px); }
.archive-case .case-name { padding-block-end: clamp(16px, 2vw, 26px); margin-block-end: clamp(16px, 2vw, 26px); }
.archive-case .case-name h3 { font-size: clamp(1.5rem, 3.4vw, 2.8rem); }
.archive-case .case-frames { gap: clamp(6px, 0.8vw, 12px); }
.archive-case .case-frames .shot { border-radius: 12px; }
.archive-case .metrics { gap: clamp(16px, 2.6vw, 44px); margin-block-start: clamp(18px, 2.2vw, 30px); padding-block-start: clamp(16px, 2vw, 24px); }
.archive-case .metric b { font-size: clamp(1.5rem, 3.2vw, 2.7rem); }
@media (max-width: 760px) { .archive-case .case-frames { grid-template-columns: repeat(min(var(--frames, 4), 2), 1fr); } }

/* A case with one photo should not be a screenful of it. The tile grid is
   capped so a lone frame sits at roughly the width it would have had as one of
   four, rather than stretching the full card and pushing everything below it
   off the screen. Two and three behave the same way. */
.archive-case .case-frames { max-inline-size: 100%; }
.archive-case .case-frames:has(.shot:only-child) { max-inline-size: min(30%, 320px); }
.archive-case .case-frames:has(.shot:nth-child(2):last-child) { max-inline-size: min(58%, 640px); }
.archive-case .case-frames:has(.shot:nth-child(3):last-child) { max-inline-size: min(80%, 940px); }

/* The look line, which used to sit on the single page. The band it lived in
   used to hold the frames off; plain, it spaces itself. */
.archive-case .case-look { margin-block: clamp(10px, 1.4vw, 18px) clamp(16px, 2vw, 26px); }

/* --- Video testimonial rail ------------------------------------------------ */
.rail {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(7px, 0.9vw, 12px);
}
@media (max-width: 760px) { .rail { grid-template-columns: repeat(2, 1fr); } }
.vcard b { display: block; margin-block-start: 0.55rem; font-size: 0.86rem; }
.vcard em {
	display: block;
	font-style: normal;
	font-size: 0.64rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	opacity: 0.62;
}

/* --- Closing --------------------------------------------------------------- */
.close { text-align: center; }
.close h2 {
	font-size: clamp(1.9rem, 6vw, 4.8rem);
	text-transform: uppercase;
	max-width: 17ch;
	margin-inline: auto;
}
.close-sym {
	width: clamp(56px, 7vw, 96px);
	height: auto;
	margin: clamp(26px, 3.4vw, 48px) auto 0;
	display: block;
	object-fit: contain;
}

/* --- Single case study ----------------------------------------------------- */
.case-hero { padding: clamp(96px, 11vw, 150px) 0 clamp(20px, 3vw, 40px); }
.case-hero h1 { font-size: clamp(2.4rem, 8vw, 6.4rem); text-transform: uppercase; max-width: 14ch; }
.case-hero p { margin: 1.1rem 0 0; max-width: 52ch; opacity: 0.78; font-size: clamp(0.98rem, 1.3vw, 1.15rem); }
.case-body {
	max-width: 68ch;
	margin-block-start: clamp(22px, 3vw, 40px);
	opacity: 0.82;
}
.case-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(7px, 0.9vw, 12px);
	margin-block-start: clamp(22px, 3vw, 40px);
}
@media (max-width: 620px) { .case-gallery { grid-template-columns: 1fr; } }

/* The films run three across, because most of them are vertical and two
   nine-by-sixteen frames side by side make a page you scroll for a minute. A
   wide film keeps its own proportions and simply sits shorter in its column. */
.case-films {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(7px, 0.9vw, 12px);
	margin-block-start: clamp(14px, 1.8vw, 22px);
	align-items: start;
}
@media (max-width: 860px) { .case-films { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .case-films { grid-template-columns: 1fr; } }
.case-quote {
	background: var(--card);
	color: var(--card-ink);
	border-radius: var(--r);
	padding: clamp(24px, 3.4vw, 52px);
	margin-block-start: clamp(22px, 3vw, 40px);
}
.case-quote blockquote {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.2rem, 2.6vw, 2rem);
	letter-spacing: -0.02em;
	line-height: 1.15;
}
.case-quote figcaption {
	margin-block-start: 1.1rem;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.55;
	font-weight: 700;
}

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 860px) {
	/* Same reasoning as components.css: rem-set micro-labels are too small in
	   the hand. Desktop keeps the comp's sizes. */
	.metric span { font-size: 0.74rem; }
	.case-name span { font-size: 0.74rem; }
	.vcard em { font-size: 0.74rem; }
	.vcard b { font-size: 0.95rem; }

	/* Four portrait tiles across a tablet leaves each one about 170px wide;
	   two gives the photography room to actually read. */
	.tiles { grid-template-columns: repeat(2, 1fr); }
	.rail { grid-template-columns: repeat(2, 1fr); }
	/* Both pages break together, so a tablet shows the same rhythm on each. */
	.case-frames { grid-template-columns: repeat(2, 1fr); }
}

/* --- Case study: the visual-direction line -------------------------------- */
/* A plain line, in both seasons. It used to sit in a tinted band with a rule
   down the leading edge; the label above it already sets it apart, and the
   band was one more box on a card that is mostly boxes. Nothing here is
   season-dependent any more, which is also what stopped it disappearing into
   the card on the light side. */
.case-look {
	max-width: 68ch;
	margin: 0;
	font-size: clamp(0.95rem, 1.2vw, 1.05rem);
}
.case-look span {
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.7rem;
	opacity: 0.6;
	display: block;
	margin-block-end: 0.4rem;
}
[dir="rtl"] .case-look span { letter-spacing: 0; text-transform: none; font-size: 0.82rem; }