/* ===================================================
   WIISYS PUBLIC SITE — Worship Institution Design System
   =================================================== */

:root{
	--navy:#001b44;
	--blue:#0056d2;
	--red:#dc2626;
	--gold:#c9961f;
	--gold-light:#fef3c7;
	--ink:#0f172a;
	--muted:#64748b;
	--light:#f4f7fb;
}

/* ---------------- Universal page hero ---------------- */
.page-hero{
	position:relative;
	min-height:380px;
	border-radius:28px;
	overflow:hidden;
	background:
		linear-gradient(135deg, rgba(0,27,68,0.95), rgba(0,86,210,0.85)),
		radial-gradient(circle at 85% 15%, rgba(201,150,31,0.35), transparent 45%);
	display:flex;
	align-items:center;
	padding:60px 50px;
	box-shadow:0 22px 55px rgba(15,23,42,0.18);
	margin-bottom:50px;
}

.page-hero::after{
	content:"";
	position:absolute;
	right:-60px;
	bottom:-80px;
	width:280px;
	height:280px;
	border-radius:50%;
	border:36px solid rgba(255,255,255,0.06);
}

.page-hero-content{
	position:relative;
	z-index:2;
	max-width:820px;
	color:#ffffff;
}

.page-hero-badge{
	display:inline-flex;
	align-items:center;
	gap:10px;
	background:rgba(201,150,31,0.22);
	border:1px solid rgba(201,150,31,0.45);
	color:var(--gold-light);
	padding:9px 18px;
	border-radius:30px;
	font-weight:700;
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:.06em;
	margin-bottom:20px;
}

.page-hero h1{
	font-size:48px;
	line-height:1.1;
	font-weight:800;
	margin:0 0 18px 0;
}

.page-hero p{
	font-size:17px;
	line-height:1.8;
	color:#e0f2fe;
	margin:0;
	max-width:680px;
}

@media screen and (max-width:768px){
	.page-hero{ min-height:auto; padding:48px 26px; border-radius:20px; }
	.page-hero h1{ font-size:32px; }
}

/* ---------------- Section heading ---------------- */
.section-heading{
	text-align:center;
	max-width:780px;
	margin:0 auto 44px auto;
}

.section-heading span{
	color:var(--gold);
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:1.6px;
	font-size:13px;
}

.section-heading h2{
	font-size:38px;
	font-weight:800;
	color:var(--navy);
	margin:10px 0 14px 0;
}

.section-heading p{
	color:var(--muted);
	font-size:16.5px;
	line-height:1.7;
}

/* ---------------- Generic content card (about/contact text pages) ---------------- */
.content-card{
	background:#ffffff;
	border-radius:24px;
	border:1px solid #e5e7eb;
	box-shadow:0 14px 38px rgba(15,23,42,0.07);
	padding:46px;
	font-size:16.5px;
	line-height:1.85;
	color:#334155;
	margin-bottom:50px;
}

/* ---------------- Card grid (shared by leadership/ministries/sermons) ---------------- */
.card-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
	gap:28px;
	margin-bottom:50px;
}

/* ---------------- Leadership cards ---------------- */
.leader-card{
	background:#ffffff;
	border-radius:22px;
	overflow:hidden;
	border:1px solid #e5e7eb;
	box-shadow:0 12px 32px rgba(15,23,42,0.08);
	text-align:center;
	padding:36px 26px;
	transition:0.25s ease;
}

.leader-card:hover{
	transform:translateY(-6px);
	box-shadow:0 22px 48px rgba(15,23,42,0.14);
}

.leader-avatar{
	width:96px;
	height:96px;
	border-radius:50%;
	background:linear-gradient(135deg, var(--navy), var(--blue));
	color:#ffffff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:32px;
	font-weight:800;
	margin:0 auto 20px auto;
	box-shadow:0 10px 24px rgba(0,27,68,0.25);
}

.leader-card h3{
	font-size:20px;
	font-weight:800;
	color:var(--navy);
	margin:0 0 6px 0;
}

.leader-card .leader-role{
	display:inline-block;
	color:var(--gold);
	font-weight:700;
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:.04em;
	margin-bottom:14px;
}

.leader-card p{
	color:var(--muted);
	font-size:14.5px;
	line-height:1.7;
	margin:0;
}

/* ---------------- Ministry cards ---------------- */
.ministry-card{
	background:#ffffff;
	border-radius:22px;
	overflow:hidden;
	border:1px solid #e5e7eb;
	box-shadow:0 12px 32px rgba(15,23,42,0.07);
	transition:0.25s ease;
}

.ministry-card:hover{
	transform:translateY(-6px);
	box-shadow:0 22px 48px rgba(15,23,42,0.13);
}

.ministry-icon{
	height:130px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(135deg, #eff6ff, #dbeafe);
}

.ministry-icon i{
	font-size:48px;
	color:var(--blue);
}

.ministry-card .ministry-body{
	padding:26px;
}

.ministry-card h3{
	font-size:20px;
	font-weight:800;
	color:var(--navy);
	margin:0 0 10px 0;
}

.ministry-card p{
	color:var(--muted);
	font-size:14.5px;
	line-height:1.7;
	margin:0;
}

/* ---------------- Service time cards ---------------- */
.service-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
	gap:24px;
	margin-bottom:50px;
}

.service-card{
	background:#ffffff;
	border-radius:20px;
	border:1px solid #e5e7eb;
	box-shadow:0 10px 28px rgba(15,23,42,0.07);
	padding:30px;
	border-top:5px solid var(--gold);
	transition:0.25s ease;
}

.service-card:hover{
	transform:translateY(-5px);
	box-shadow:0 18px 38px rgba(15,23,42,0.12);
}

.service-card .service-time{
	font-size:30px;
	font-weight:800;
	color:var(--navy);
	margin-bottom:8px;
}

.service-card .service-name{
	font-size:15px;
	font-weight:700;
	color:var(--blue);
	text-transform:uppercase;
	letter-spacing:.03em;
}

/* ---------------- Sermon cards ---------------- */
.sermon-card{
	background:#ffffff;
	border-radius:20px;
	overflow:hidden;
	border:1px solid #e5e7eb;
	box-shadow:0 10px 28px rgba(15,23,42,0.07);
	transition:0.25s ease;
}

.sermon-card:hover{
	transform:translateY(-5px);
	box-shadow:0 18px 40px rgba(15,23,42,0.12);
}

.sermon-thumb{
	height:160px;
	background:linear-gradient(135deg, var(--navy), var(--blue));
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}

.sermon-thumb i{
	font-size:46px;
	color:rgba(255,255,255,0.9);
}

.sermon-date-badge{
	position:absolute;
	top:14px;
	right:14px;
	background:rgba(255,255,255,0.92);
	color:var(--navy);
	font-size:12px;
	font-weight:800;
	padding:4px 11px;
	border-radius:20px;
}

.sermon-body{
	padding:22px;
}

.sermon-body h3{
	font-size:17px;
	font-weight:800;
	color:var(--navy);
	margin:0 0 6px 0;
}

.sermon-preacher{
	font-size:12.5px;
	color:var(--gold);
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.03em;
	margin-bottom:10px;
}

.sermon-body p{
	color:var(--muted);
	font-size:14px;
	line-height:1.65;
	margin:0 0 14px 0;
}

.sermon-links{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.sermon-links a{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	font-weight:700;
	color:var(--blue);
	background:#eff6ff;
	padding:7px 14px;
	border-radius:20px;
	transition:0.18s ease;
}

.sermon-links a:hover{
	background:var(--blue);
	color:#ffffff;
}

/* ---------------- Empty state ---------------- */
.public-empty{
	text-align:center;
	padding:60px 20px;
	color:var(--muted);
	background:#ffffff;
	border-radius:20px;
	border:1px solid #e5e7eb;
	margin-bottom:50px;
}

.public-empty i{
	font-size:48px;
	opacity:.22;
	display:block;
	margin-bottom:14px;
}

/* ---------------- Social icon bar ---------------- */
.social-bar{
	display:flex;
	gap:10px;
	align-items:center;
}

.social-bar a{
	width:38px;
	height:38px;
	border-radius:50%;
	background:rgba(255,255,255,0.12);
	color:#ffffff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:16px;
	transition:0.2s ease;
}

.social-bar a:hover{
	background:var(--gold);
	color:var(--navy);
	transform:translateY(-2px);
}

.social-bar.dark a{
	background:#eff6ff;
	color:var(--navy);
}

.social-bar.dark a:hover{
	background:var(--gold);
	color:#ffffff;
}

/* ---------------- Contact detail rows ---------------- */
.contact-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
	gap:24px;
	margin-bottom:50px;
}

.contact-tile{
	background:#ffffff;
	border-radius:20px;
	border:1px solid #e5e7eb;
	box-shadow:0 10px 28px rgba(15,23,42,0.07);
	padding:30px;
	text-align:center;
}

.contact-tile i{
	width:60px;
	height:60px;
	border-radius:50%;
	background:#eff6ff;
	color:var(--blue);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:24px;
	margin:0 auto 16px auto;
}

.contact-tile h4{
	font-size:16px;
	font-weight:800;
	color:var(--navy);
	margin:0 0 8px 0;
}

.contact-tile p{
	color:var(--muted);
	font-size:14.5px;
	line-height:1.6;
	margin:0;
}

@media screen and (max-width:768px){
	.section-heading h2{ font-size:28px; }
	.content-card{ padding:28px 22px; }
}