/* ===== Design tokens (tweak these) ===== */
:root {
  --bg: #0e0f12;        /* site background (keep dark) */
  --band: #1c1f24;        /* middle content band replacement for light grey */
  --text: #eaecef;         /* primary text */
  --muted: #a9b0bb;        				/* secondary text */
  --hairline: #3F434A;     				/* dividers */
  --accent: #26c6da;       /* accent / hover */
  --card-bg: rgba(0,0,0,.25);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 10px;
  --container-w: 60vw;     /* ~ two-thirds of screen width */
  --container-max: 1200px; /* hard cap for huge screens */
}

/* ===== Reset + base ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	font: 16px/1.5 "Open Sans", system-ui, sans-serif;
	background: #041726 url('../images/body-trans.png') no-repeat top center;
	color: var(--text);
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

/* ===== Layout ===== */
.wrap {
	width: min(var(--container-w), var(--container-max));
	margin: 0 auto; /* center */
	padding: 24px 0 64px;
}

.band {
  position: relative;
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 20px;
  background:
    linear-gradient(#0e1924, #0e1924) padding-box,
    linear-gradient(to right, #1066a0, #243aa0) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow);
}

.band p {
	padding: 0px 30px;
}

/* Header image */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 0; /* keep content flush */
  box-shadow: var(--shadow);
  aspect-ratio: 16/6;
  background:
    linear-gradient(#121418, #121418) padding-box,
    linear-gradient(to right, #1066a0 0%, #243aa0 100%) border-box;
  border: 1px solid transparent;
}

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

.hero-text {
	position: absolute;
	inset: 0; /* fills the hero area */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	background: rgba(0,0,0,0.3);
	padding: 1rem;
}

.hero-text h1 {
	font-family: "Oswald", system-ui, sans-serif;
	font-size: clamp(1.8rem, 4vw, 4rem);
	margin: 0 0 0.3em;
	letter-spacing: 0.02em;
    font-weight: 500;
}

/* Grid of shows */
.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.card {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--card-bg);
	border: 1px solid;
	border-color: #1870b0;
	box-shadow: var(--shadow);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	isolation: isolate; /* keeps overlay effects inside */
}

.card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in oklab, var(--accent) 40%, var(--hairline));
	box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.card img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center;
}

.titlebar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 16px 32px 16px 16px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	box-sizing: border-box;
	min-height: 60px;             /* enough space for two lines */
	overflow-wrap: anywhere;      /* keeps long words contained */
	z-index: 1;                   /* ensures overlay is above the image */
}

.titlebar h3 {
	font-family: "Oswald", system-ui, sans-serif;
	margin: 0;
	font-size: clamp(1rem, 3vw, 2rem);
	line-height: 1.2;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0,0,0,0.9);
	word-break: break-word;
	letter-spacing: 0.02em;
    font-weight: 500;
	background: url('../images/favicon-32x32.png') no-repeat 0 4px; padding-left: 40px;
}

.footerbar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px;
	font-size: 14px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	box-sizing: border-box;
	min-height: 60px;             /* enough space for two lines */
	overflow-wrap: anywhere;      /* keeps long words contained */
	z-index: 1;                   /* ensures overlay is above the image */
	background: linear-gradient(
		0deg,
		rgba(28, 31, 36, 0.9) 0%,
		rgba(28, 31, 36, 0.8) 90%,
		rgba(28, 31, 36, 0) 100%
	);
	opacity: 0;                /* invisible */
	transform: translateY(100%); /* pushed below the card */
	transition: opacity 0.3s ease, transform 0.3s ease;
}


.meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	color: var(--muted);
	font-size: 14px;
	border-top: 1px solid var(--hairline);
	background: linear-gradient(
		180deg,
		rgba(255,255,255,.02),
		rgba(255,255,255,0)
	);
}



/* Footer (optional) */
footer {
	color: var(--muted);
	font-size: 14px;
	margin-top: 28px;
	text-align: center;
}



/* =====================================================================*/
/* ===================SCREEN SIZES======================================*/

/* ===== 1) Phone Portrait (≤480px) ===== */
@media (max-width: 480px) {
	.wrap {
		width: 100%;
		max-width: 100%;
		padding: 12px;
	}
	
	.hero {
		aspect-ratio: 16/10;
	}
	
	.band {
		margin-top: 10px;
	}
	
	.band p {
		padding: 0px 0px;
	}
	
	.grid {
		grid-template-columns: 1fr;
	}
	
	.card img {
		height: 190px;
	}
  
	.titlebar h3 {
		font-size: 22px;
		background: url('../images/favicon-32x32.png') no-repeat 0 -2px;
		padding-left: 40px;
	}
	
	.card .footerbar {
		opacity: 1;
		transform: translateY(0);
		min-height: 0px;
	}
	
	.card .footerbar::before {
		content: attr(data-phone);
	}
}

/* ===== 2) Phone Landscape (481–768px) ===== */
@media (min-width: 481px) and (max-width: 790px) {
	.wrap {
		width: 100%;
		max-width: 100%;
		padding: 12px;
	}
	
	.hero {
		aspect-ratio: 16/7;
	}
	
	.band {
		margin-top: 10px;
	}
	
	.band p {
		padding: 0px 5px;
	}
	
	.card img {
		height: 200px;
	}
	
	.titlebar h3 {
		font-size: 24px;
		background: url('../images/favicon-32x32.png') no-repeat 0 -2px;
		padding-left: 40px;
	}
	
	.card .footerbar {
		opacity: 1;
		transform: translateY(0);
		min-height: 0px;
	}
	
	.card .footerbar::before {
		content: attr(data-phone);
	}
}

/* ===== 3) Tablet Portrait (769–834px) ===== */
@media (min-width: 791px) and (max-width: 834px) {
	.wrap {
		width: 95%;
		max-width: 95%;
		padding: 12px;
	}
	
	.hero {
		aspect-ratio: 16/9;
	}
	
	.band {
		margin-top: 10px;
	}
	
	.band p {
		padding: 0px 10px;
	}
	
	.card img {
		height: 210px;
	}
	
	.card .footerbar {
		opacity: 1;
		transform: translateY(0);
		min-height: 0px;
	}
	
	.card .footerbar::before {
		content: attr(data-phone);
	}
}

/* ===== 4) Tablet Landscape (835–1180px) ===== */
@media (min-width: 835px) and (max-width: 1320px) {
	.wrap {
		width: 95%;
		max-width: 95%;
		padding: 12px;
	}
	
	.card .footerbar {
		opacity: 1;
		transform: translateY(0);
		min-height: 0px;
	}
	
	.card .footerbar::before {
		content: attr(data-tablet);
	}
	
}

/* ===== 5) PC FullHD (1181–2559px) ===== */
@media (min-width: 1321px) and (max-width: 2559px) {
	.card:hover .footerbar {
		opacity: 1;
		transform: translateY(0);   /* slide up into view */
	}
	
	.card .footerbar::before {
		content: attr(data-pc);
	}
}

/* ===== 6) PC 4K (≥2560px) ===== */
@media (min-width: 2560px) {
	.card:hover .footerbar {
		opacity: 1;
		transform: translateY(0);   /* slide up into view */
	}
	
	.card .footerbar::before {
		content: attr(data-pc);
	}
}


/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}