/*
Theme Name: Skyhub (work in progress)
Theme URI: http://example.com/skyhub
Author: Developer
Version: 1.0
Description: A lightweight starting theme for Skyhub. Contains a simple front-page template.
Text Domain: skyhub
*/

/* Basic layout and type */
:root{--accent:#0b78d1;--muted:#666;--container:1100px}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.6;color:#222;margin:0;background:#fff}
.container{max-width:var(--container);margin:0 auto;padding:24px}
.site-header{background:#f7f7f7;border-bottom:1px solid #e6e6e6}
.site-title{margin:0;font-size:1.5rem}
.site-tagline{margin:4px 0 0;color:var(--muted)}

.hero{background:linear-gradient(180deg, #f0f8ff 0%, #fff 60%);padding:60px 0}
.hero-inner{text-align:center}
.hero-title{font-size:2.1rem;margin:0 0 8px}
.hero-lead{color:var(--muted);margin:0 0 18px}
.btn{display:inline-block;padding:10px 18px;border-radius:6px;text-decoration:none;background:var(--accent);color:#fff}

.features{padding:48px 0}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.feature{padding:18px;border:1px solid #eee;border-radius:8px;background:#fff}
.feature h3{margin-top:0}

.site-footer{background:#fafafa;border-top:1px solid #eee;padding:20px 0;text-align:center;color:var(--muted)}

@media (min-width:768px){.hero-title{font-size:2.6rem}}

/* Overrides and fixes for About page layout */
.centered-hero-section {
  padding: 16px 40px 24px; /* reduce excessive top spacing and tighten overall spacing */
}
.centered-hero-subtitle {
	margin-bottom: 24px;
}

/* Make different-image respect rounded corners and not take full viewport height */
.different-image {
	height: auto !important;
	max-height: 600px;
	margin: 24px 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 30px rgba(0,0,0,0.08);
}
.different-image img,
.different-img {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	display: block;
	border-radius: 16px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Ensure features grid in the Different section uses two columns on desktop */
.different-section .features-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 24px !important;
	margin-top: 30px !important;
}

@media (max-width: 768px) {
	.different-section .features-grid {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}
	.different-image {
		max-height: 60vh !important;
	}
}