/* =========================
   BASE / LAYOUT
========================= */

:root{
	--glass-bg: rgba(0,0,0,.35);
	--glass-bg-strong: rgba(0,0,0,.55);
	--text: #fff;
	--muted: rgba(255,255,255,.78);
	--accent: #7CFF3A;
	--accent2: #00C2FF;
	--line: rgba(255,255,255,.18);
	--shadow: 0 12px 35px rgba(0,0,0,.35);
	--radius: 18px;
}

html, body { height: 100%; }
body{
	margin: 0;
	color: var(--text);
	background: url("/img/dobogadroga_xl.jpg") no-repeat center center fixed;
	background-size: cover;
	font-family: "Montserrat", Verdana, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* overlay tła dla czytelności */
.hero{
	position: relative;
	min-height: 100vh;            /* stopka na dole */
	display: flex;
	flex-direction: column;
}
.hero__overlay{
	position:absolute;
	inset:0;
	background: radial-gradient(circle at 50% 10%, rgba(255,220,120,.20), rgba(0,0,0,.45) 55%, rgba(0,0,0,.65));
	pointer-events:none;
}

/* container w środku ma rosnąć, footer spada na dół */
.hero__container{
	position: relative;
	flex: 1 0 auto;
	padding-top: 48px;
	padding-bottom: 32px;
}

/* =========================
   HERO GRID (DESKTOP)
========================= */

.hero__grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}

.hero__brand{
	align-self: start;
}

.hero-title {
	font-family: 'Cinzel', serif;
	font-size: clamp(32px, 4vw, 52px); /* większe, ale responsywne */
	font-weight: 600;
	letter-spacing: 0.08em;

	color: #f2d27a; /* ciepłe, spokojne złoto */

	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); /* delikatna czytelność */
}


/* Twoje gradient-font zostawiamy, tylko pilnujemy czytelności */
.gradient-font{
	background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(210,205,26,1) 35%, rgba(219,255,0,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Akronim', cursive;
}

.hero__intro{
	justify-self: end;
}

.hero__lead{
	margin: 0;
	max-width: 520px;
	color: var(--muted);
	line-height: 1.5;
	font-size: 18px;
	background: rgba(0,0,0,.15);
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.10);
	backdrop-filter: blur(6px);
}

.hero__saints{
	grid-column: 1 / 2;
}

.saint-title{
	margin: 0 0 6px 0;
	font-size: 28px;
	letter-spacing: .02em;
	color: #ffd86b;
}

.saint-text{
	margin: 0;
	color: var(--text);
	opacity: .95;
	line-height: 1.45;
}

.holiday-box{
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(0,0,0,.18);
	border: 1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(6px);
}

/* CTA */
.hero__cta{
	grid-column: 2 / 3;
	justify-self: start;
	align-self: center;
	display: flex;
	align-items: center;
	gap: 14px;
}

.cta-btn{
	border: none;
	border-radius: 999px;
	padding: 12px 22px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #000;
	background: linear-gradient(90deg, var(--accent), var(--accent2));
	box-shadow: 0 10px 25px rgba(0,0,0,.25);
	cursor: pointer;
	transition: transform .12s ease, filter .12s ease;
}
.cta-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.cta-btn:active{ transform: translateY(0px) scale(.98); }

.is-hidden{ display: none !important; }



/* =========================
   RESULTS (TABLE + MAP)
========================= */

.results{
	margin-top: 18px;
}

.results__wrap{
	margin-top: 18px;
	padding: 16px;
	border-radius: var(--radius);
	background: var(--glass-bg);
	border: 1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(7px);
	box-shadow: var(--shadow);
}

#table{
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	color: var(--text);
}

.results__head th{
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .08em;
	color: rgba(255,255,255,.85);
	padding: 12px 10px;
	border-bottom: 1px solid var(--line);
}

#table td{
	padding: 14px 10px;
	border-bottom: 1px solid rgba(255,255,255,.10);
	vertical-align: middle;
}

td.parafia strong{ display:block; font-size: 16px; }
td.parafia small{ display:block; color: rgba(255,255,255,.75); font-size: 13px; margin-top: 4px; }

td.distance{
	white-space: nowrap;
	font-weight: 700;
}

td.routes{
	white-space: nowrap;
}

/* Buttons - hover glow + click micro */
td.routes .btn{
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,.25);
	background: rgba(255,255,255,.90);
	padding: 8px 10px;
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
td.routes .btn:hover{
	cursor: pointer;
	transform: translateY(-1px);
	box-shadow: 0 0 0 4px rgba(0,194,255,.18), 0 10px 20px rgba(0,0,0,.25);
	filter: brightness(1.02);
}
td.routes .btn:active{
	transform: translateY(0) scale(.96);
	box-shadow: 0 0 0 4px rgba(124,255,58,.20);
}

/* Odstęp między ikonami */
td.routes .driving{ margin-right: 14px; }

/* instrukcja + mapa */
.results__instructions{
	margin-top: 12px;
	color: rgba(255,255,255,.85);
	font-size: 14px;
}

.results__map{
	margin-top: 14px;
	width: 100%;
	height: 420px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.12);
}

/* distance label */
#distance{
	margin-top: 10px;
	font-weight: 700;
}

/* =========================
   FOOTER ALWAYS BOTTOM
========================= */

.footer{
	flex-shrink: 0;
	margin-top: auto;
	padding: 22px 0 10px;
}
.footer--center{
	text-align: center;
}
.footer p{
	margin: 0;
	font-size: 12px;
	color: rgba(255,255,255,.70);
}
.footer-link{
	color: #eaff55;
	text-decoration: none;
}
.footer-link:hover{ text-decoration: underline; }

/* =========================
   MOBILE / TABLET
========================= */

/* tablet */
@media (max-width: 992px){
	.hero__grid{
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.hero__intro{ justify-self: start; }
	.hero__lead{ max-width: 100%; }
	.hero__cta{
		grid-column: 1 / -1;
		justify-self: start;
		align-self: start;
	}
}

/* mobile */
@media (max-width: 640px){
	body{
		background: url("/img/dobogadroga_small.jpg") no-repeat center center fixed;
		background-size: cover;
	}

	.hero__container{
		padding-top: 22px;
		padding-bottom: 18px;
	}

	.hero__logo{
		text-align: left;
		font-size: 46px;
	}

	.saint-title{ font-size: 22px; }
	.hero__lead{ font-size: 15px; }

	/* tabela jako karty */
	.results__wrap{ padding: 12px; }

	#table thead{ display:none; }
	#table, #table tbody, #table tr, #table td{
		display: block;
		width: 100%;
	}
	#table tr{
		border-bottom: 1px solid rgba(255,255,255,.12);
		padding: 10px 0;
	}
	#table td{
		border: none;
		padding: 8px 4px;
	}

	td.parafia strong{ font-size: 16px; }
	td.distance{
		font-size: 15px;
		opacity: .95;
	}

	td.routes{
		display: flex;
		gap: 14px;
		justify-content: flex-start;
		padding-top: 10px;
	}
	td.routes .driving{ margin-right: 0; }

	.results__map{
		height: 320px;
		border-radius: 14px;
	}
}

/* =========================
   SEARCH OVERLAY + POPUP (if needed)
========================= */

.search-overlay{
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(3px);
}
.search-overlay__box{
	background: rgba(0,0,0,.65);
	border: 1px solid rgba(255,255,255,.16);
	color: #fff;
	padding: 16px 18px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: var(--shadow);
}
.search-overlay__text{
	font-size: 14px;
	color: rgba(255,255,255,.9);
}

/* Popup iframe */
.how-odpust-popup{
	position: fixed;
	inset: 0;
	z-index: 9999;
}
.how-odpust-popup__backdrop{
	position:absolute;
	inset:0;
	background: rgba(0,0,0,.65);
}
.how-odpust-popup__panel{
	position: relative;
	width: min(980px, calc(100vw - 24px));
	height: min(720px, calc(100vh - 24px));
	margin: 12px auto;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.how-odpust-popup__close{
	position: absolute;
	top: 10px;
	right: 12px;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.15);
	background: rgba(255,255,255,.92);
	cursor: pointer;
}
.how-odpust-popup__iframe{
	width: 100%;
	height: 100%;
	border: none;
}

/* =========================
   MOBILE / RESPONSIVE FIXES
   dopasowane do: hero__*, results, cta-btn, tabela, popup
   ========================= */

/* Footer zawsze na dole (sticky footer) */
html, body { height: 100%; }
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.hero {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.hero__container {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.footer {
	margin-top: auto; /* spycha stopkę na dół gdy mało treści */
}

/* Layout bazowy */
.hero__container{
	padding-left: 16px;
	padding-right: 16px;
}
.hero__grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 22px;
	align-items: start;
}

/* Żeby tekst nie “uciekał” poza ekran */
.hero__logo,
.hero__lead,
.saint-text{
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

/* CTA */
/* baza (wszystkie urządzenia) */
.cta-btn {
	padding: 10px 18px;
	font-size: 14px;
	border-radius: 999px;
}

/* desktop */
@media (min-width: 992px) {
	.cta-btn {
		padding: 14px 26px;
		font-size: 16px;
		min-height: 44px;
	}
}

/* Wyniki */
.results__wrap{
	margin-top: 14px;
}
.results__map{
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
}

/* Tabela: lepiej wygląda na mniejszych ekranach */
#table{
	width: 100%;
	table-layout: fixed;
}
#table th, #table td{
	vertical-align: middle;
}
#table th:nth-child(1), #table td:nth-child(1){ width: 46%; }
#table th:nth-child(2), #table td:nth-child(2){ width: 24%; text-align:center; }
#table th:nth-child(3), #table td:nth-child(3){ width: 30%; text-align:center; }

/* Przyciski trasy – większy klik i odstępy */
td.routes{
	display: flex;
	justify-content: center;
	gap: 14px;            /* odstęp między ikonami */
}
td.routes button{
	cursor: pointer;
	width: 44px;
	height: 38px;
}
td.routes button:active{
	transform: translateY(1px);
}

/* ================
   BREAKPOINTY
   ================ */

/* TABLET i niżej */
@media (max-width: 992px){
	.hero__grid{
		grid-template-columns: 1fr;
	}

	.hero__brand{ text-align: center; }
	.hero__intro{ text-align: left; }

	.hero__cta{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.cta-btn{ max-width: 560px; }
}

/* TELEFON */
@media (max-width: 576px){
	.hero__container{
		padding-left: 12px;
		padding-right: 12px;
	}

	.hero__logo{
		font-size: 2.2rem;     /* było za duże */
		line-height: 1.05;
		margin: 8px 0 6px;
	}

	.hero__lead{
		font-size: 1rem;
		line-height: 1.35;
		margin: 0;
	}

	.saint-title{
		font-size: 1.35rem;
		margin-top: 12px;
	}

	.saint-text{
		font-size: 1rem;
		line-height: 1.35;
	}

	.cta-btn{
		max-width: 100%;
		height: 56px;          /* wygodniej kliknąć */
		border-radius: 18px;
	}
	.cta-btn__text{
		font-size: 1.05rem;
	}

	/* Tabela na telefonie: mniejsze fonty i nie rozpycha */
	#table th{
		font-size: .85rem;
		letter-spacing: .02em;
	}
	#table td{
		font-size: .95rem;
	}

	/* Popup w mobile */
	.how-odpust-popup__panel{
		width: calc(100% - 20px);
		max-width: 720px;
		border-radius: 16px;
	}
	.how-odpust-popup__iframe{
		height: 70vh;
	}

	/* Overlay “szukam parafii…” */
	.search-overlay__box{
		width: calc(100% - 24px);
		max-width: 520px;
	}
}

/* Preferencje dostępności */
@media (prefers-reduced-motion: reduce){
	*{ transition: none !important; animation: none !important; }
}
.reset-btn {
	margin-top: 12px;
	padding: 10px 18px;
	border-radius: 999px;
	border: none;
	background: rgba(255,255,255,0.15);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: all 0.25s ease;
}

.reset-btn:hover {
	background: rgba(255,255,255,0.25);
	transform: translateY(-1px);
}

.reset-btn:active {
	transform: scale(0.97);
}

.is-hidden {
	display: none !important;
}

/* mobile */
@media (max-width: 768px) {
	.reset-btn {
		width: 100%;
		text-align: center;
	}
}
.results__actions {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.reset-btn {
	background: rgba(0,0,0,0.45);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.35);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	cursor: pointer;
	transition: all .2s ease;
}

.reset-btn:hover {
	background: rgba(255,255,255,0.15);
	transform: translateY(-1px);
}
/* ===== RESET BUTTON ===== */

.results__actions {
	display: flex;
	justify-content: flex-end;
	margin: 12px 0;
	padding-right: 8px;
}

.reset-btn {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.reset-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

/* MOBILE */
@media (max-width: 768px) {
	.results__actions {
		justify-content: center;
	}

	.reset-btn {
		width: 100%;
		max-width: 240px;
		text-align: center;
	}
}