/*
Theme Name: 77 Agency
Theme URI: https://77agency.in
Author: 77 Agency
Description: Boutique agency theme ported from the 7777 static site (Tailwind, Bebas Neue, Roboto Condensed).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agency77
*/

/* Layout tokens; primary styling uses Tailwind via CDN in functions.php */
:root {
	/*
	 * Shared media scale. Hero floats use .agency77-hero-float--* (aspect-ratio frames).
	 */
	--agency77-hero-gap-after: 9.375rem; /* ~150px � About mock vertical rhythm */
	--agency77-media-editorial-max: min(100%, 36rem);
	--agency77-media-split-max-h: min(85vh, 40rem);
	--agency77-project-card-h: min(52vw, 22rem);
	--agency77-project-card-h-md: min(56vw, 31.25rem);
}

body {
	font-family: 'Roboto Condensed', sans-serif;
}

/*
 * Hero clusters (Home, Services, About): four staggered clips around centered headline.
 * Explicit aspect ratios = rectangular frames (portrait / landscape), not square.
 */
.agency77-hero-cluster {
	position: relative;
}

@media (min-width: 768px) {
	.agency77-hero-cluster {
		min-height: clamp(28rem, 42vw, 46rem);
		padding-bottom: clamp(2rem, 5vw, 4rem);
	}

	.agency77-hero-cluster--about {
		padding-bottom: var(--agency77-hero-gap-after);
	}
}

/* Wide screens (1280�1920+): clamp *max* must stay high or vw hits a low ceiling and clips look tiny. */
@media (min-width: 1280px) {
	.agency77-hero-cluster--staggered {
		min-height: clamp(32rem, 38vw, 48rem);
	}
}

.agency77-hero-float {
	position: absolute;
	z-index: 0;
	overflow: hidden;
	display: block;
	line-height: 0;
}

.agency77-hero-float video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Home + Services: staggered cluster (1920 ref � TR higher than TL, BL inset, BR hangs lower).
 * High clamp() ceilings so 11�15vw actually applies on large monitors.
 */
.agency77-hero-cluster--staggered .agency77-hero-float--tl {
	width: clamp(8rem, 11vw, 19rem);
	aspect-ratio: 3 / 4;
	top: clamp(3.25rem, 5.5vw, 8rem);
	left: clamp(0.5rem, 3vw, 4rem);
}

.agency77-hero-cluster--staggered .agency77-hero-float--tr {
	width: clamp(10rem, 14vw, 22rem);
	aspect-ratio: 4 / 3;
	top: clamp(0.25rem, 1.25vw, 2.5rem);
	right: clamp(0.5rem, 3vw, 4rem);
}

.agency77-hero-cluster--staggered .agency77-hero-float--bl {
	width: clamp(8.5rem, 12vw, 20rem);
	aspect-ratio: 4 / 3;
	bottom: clamp(3.5rem, 7vw, 9rem);
	left: clamp(2.5rem, 7.5vw, 11rem);
}

.agency77-hero-cluster--staggered .agency77-hero-float--br {
	width: clamp(7.5rem, 10vw, 17rem);
	aspect-ratio: 3 / 4;
	bottom: clamp(1.25rem, 3.5vw, 5rem);
	right: clamp(0.75rem, 3.5vw, 5rem);
}

/* About: four portrait rectangles; scale up on wide viewports like Home. */
.agency77-hero-cluster--about .agency77-hero-float--tl {
	width: clamp(7.5rem, 10.5vw, 18rem);
	aspect-ratio: 3 / 4;
	top: clamp(2rem, 4vw, 5rem);
	left: clamp(0.5rem, 3vw, 4rem);
}

.agency77-hero-cluster--about .agency77-hero-float--tr {
	width: clamp(7.5rem, 10.5vw, 18rem);
	aspect-ratio: 3 / 4;
	top: clamp(2rem, 4vw, 5rem);
	right: clamp(0.5rem, 3vw, 4rem);
}

.agency77-hero-cluster--about .agency77-hero-float--bl {
	width: clamp(7.5rem, 10.5vw, 18rem);
	aspect-ratio: 3 / 4;
	top: clamp(16rem, 24vw, 26rem);
	left: clamp(2rem, 6.5vw, 10rem);
	bottom: auto;
}

.agency77-hero-cluster--about .agency77-hero-float--br {
	width: clamp(7.5rem, 10.5vw, 18rem);
	aspect-ratio: 3 / 4;
	top: clamp(16rem, 24vw, 26rem);
	right: clamp(1.5rem, 4.5vw, 6rem);
	bottom: auto;
}

/* Mobile hero strip: three clips, portrait-leaning rectangles. */
.agency77-hero-mob-strip {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

@media (min-width: 640px) {
	.agency77-hero-mob-strip {
		gap: 0.75rem;
	}
}

.agency77-hero-float-mob {
	width: clamp(5.25rem, 28vw, 7.5rem);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	flex-shrink: 0;
}

.agency77-hero-float-mob video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.agency77-hero-float-mob--wide {
	width: clamp(6rem, 32vw, 8.5rem);
	aspect-ratio: 4 / 3;
}

/* Legacy: non-hero accents still use width-only (e.g. stray templates). */
.agency77-media-accent-mob {
	width: clamp(5.25rem, 28vw, 7.5rem);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	display: block;
}

.agency77-media-accent-mob video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Services CPT: primary media beside copy � width / height caps. */
.agency77-service-media-frame {
	max-width: var(--agency77-media-editorial-max);
}

.agency77-service-media-frame video,
.agency77-service-media-frame img {
	width: 100%;
	height: auto;
	max-height: var(--agency77-media-split-max-h);
	object-fit: cover;
	display: block;
}

/* About-style split sections: large but bounded frame. */
.agency77-split-media-col {
	max-height: var(--agency77-media-split-max-h);
	overflow: hidden;
}

.agency77-split-media-col video,
.agency77-split-media-col img {
	width: 100%;
	height: auto;
	max-height: var(--agency77-media-split-max-h);
	object-fit: cover;
	display: block;
}

/* Team headshots � modest column, not full-bleed. */
.agency77-team-photo {
	width: 100%;
	max-width: min(100%, 24rem);
	margin-left: auto;
	margin-right: auto;
}

/* Project cards (home featured + dynamic work grid): shorter than old 350/500px stack. */
.agency77-project-card-media {
	height: var(--agency77-project-card-h);
}

@media (min-width: 768px) {
	.agency77-project-card-media {
		height: var(--agency77-project-card-h-md);
	}
}

/* Home testimonials: side image � width-led, natural aspect. */
.agency77-testimonial-side-media {
	width: 100%;
	max-width: min(18rem, 48vw);
	height: auto;
	flex-shrink: 0;
	align-self: flex-start;
}

@media (min-width: 768px) {
	.agency77-testimonial-side-media {
		max-width: min(17rem, 26vw);
	}
}

.agency77-testimonial-side-media img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.agency77-testimonial-banner {
	max-width: min(100% - 2rem, 80rem);
	margin-left: auto;
	margin-right: auto;
}

.agency77-testimonial-banner img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/*
 * Block / classic editor images: editorial width unless editors choose wide/full.
 * Work portfolio uses dedicated frames in work-portfolio.css (not overridden here).
 */
.agency77-surface .entry-content .wp-block-image:not(.alignfull):not(.alignwide) img,
.agency77-surface .entry-content figure:not(.alignfull):not(.alignwide) img {
	max-width: var(--agency77-media-editorial-max);
	height: auto;
}

.agency77-surface .entry-content .wp-block-video:not(.alignfull):not(.alignwide) video {
	max-width: var(--agency77-media-editorial-max);
	height: auto;
}

/* Project case study rows (single project): bounded inline imagery; hero stays full-bleed in template. */
.agency77-surface .project-case-study__media img {
	max-width: var(--agency77-media-editorial-max);
	max-height: var(--agency77-media-split-max-h);
	width: 100%;
	height: auto;
	object-fit: cover;
}

.agency77-surface .project-case-study__gallery img {
	max-height: var(--agency77-media-split-max-h);
	width: 100%;
	object-fit: cover;
}

h1,
h2,
h3,
h4 {
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 400;
	font-style: normal;
}