/*--------------------------------------------------------------  PAGE TOP  -----------------------------*/

@media screen and (min-width: 1180px) {
	.wrap_pagetop {
		background: var(--color_cl);
	}
	.hm_pagetop {
		background: url(/ctm/31378/projects/CorpusChristi/gallery/2026/07/header-banner-top4.png) center top / cover no-repeat;
        min-height: 575px;
        position: relative;
        display: flex;
        align-items: center;
		/* cap the banner box on large screens — .wrap_pagetop's own
		   background stays full-bleed behind it */
		max-width: 1585px;
		margin: 0 auto;
		/*
		 * Convex bottom curve: giant ellipse centered 500% above the section.
		 * Only its lower arc is visible — clips ~50px from the bottom corners,
		 * leaving the center intact. Result: the banner "dips" down at the center.
		 
		clip-path: ellipse(260% 600% at 50% -500%);*/
		/*background: linear-gradient(to right, #F0EDE8 36%, rgba(250, 247, 242, 0) 58%), url(/ctm/31378/projects/CorpusChristi/gallery/2026/07/header-banner-top3.png) center top / cover no-repeat;*/
	}

	.hm_pagetop::before,
	.hm_pagetop::after { display: none; }

	.hm_pagetop .content {
		position: relative;
		width: 42%;
		padding: 4vw 3% 80px 5%;
	}

	.hm_pagetop .content .hm_pagetop-img { display: none; }
}

@media screen and (min-width: 880px) and (max-width: 1179px) {
	.hm_pagetop {
		background: url(/ctm/31378/projects/CorpusChristi/gallery/2026/07/header-banner-top4.png) right top / cover no-repeat;
		min-height: 530px;
		padding: 30px 0;
	}

	.hm_pagetop .content {
		width: 100%;
		padding: 30px;
		max-width: 850px;
		margin: 30px auto;
		background: rgba(250, 247, 242, 0.88);
	}

	.hm_pagetop .content .hm_pagetop-img { display: none; }
}

@media screen and (max-width: 879px) {
	.hm_pagetop { background: none; }

	.hm_pagetop .content { padding-top: 0; }

	.hm_pagetop .content .hm_pagetop-img { width: 100%; }

	.hm_pagetop .content .pagetop-info {
		width: 94%;
		padding: 30px;
		max-width: 850px;
		margin: 0 auto;
		text-align: center;
	}

	.hm_pagetop .content a.btn.toggle { margin: 20px auto; }
}

/* "Welcome to" label above the main title */
.hm_pagetop .content .welcome-to {
	font-family: "Playfair Display", "Playfair", serif;
	font-style: italic;
	font-size: 26px;
	font-weight: 400;
	color: var(--color_p);
	margin: 0 0 4px;
}

.hm_pagetop .content h1 {
	font-size: clamp(32px, 3.7vw, 54px);
	font-weight: normal;
	text-transform: uppercase;
	color: var(--gray5);
	line-height: 1.08;
	letter-spacing: 1px;
	margin: 0 0 18px;
}

/* h2 used on sub-pages (e.g. Relic Tour) */
.hm_pagetop .content h2 {
	font-family: "Playfair Display", "Playfair", serif;
	font-style: italic;
	font-size: 36px;
	font-weight: 700;
	color: var(--color_p);
}

.hm_pagetop .content p { font-size: 20px; }

.hm_pagetop .content .separator {
	width: 60px;
	height: 2px;
	background: var(--color_p);
	margin: 20px 0;
}

/* CTA row: solid button + play link */
.hm_pagetop .content .pagetop-cta {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.hm_pagetop .content .pagetop-cta .btn {
	background: var(--color_p);
	color: white;
	border: 0;
	text-transform: uppercase;
	font-weight: 600;
	/*font-size: 14px;*/
	font-size: clamp(11px, 12px, 14px);
	letter-spacing: 1px;
	padding: 12px 22px;
	transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}

.hm_pagetop .content .pagetop-cta .btn:hover {
	background: var(--color_pd);
	color: white;
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(51, 68, 104, 0.3);
}

.hm_pagetop .content .pagetop-cta .btn-play {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color_p);
	text-transform: uppercase;
	font-weight: 600;
	/*font-size: 14px;*/
	font-size: clamp(11px, 12px, 14px);
	letter-spacing: 1px;
	text-decoration: none;
	transition: color 0.3s ease;
}

.hm_pagetop .content .pagetop-cta .btn-play:hover { color: var(--color_pd); }

.hm_pagetop .content .pagetop-cta .play-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 2px solid var(--color_p);
	border-radius: 50%;
	font-size: 13px;
	flex-shrink: 0;
	padding-left: 2px; /* optical center for the triangle */
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hm_pagetop .content .pagetop-cta .btn-play:hover .play-circle {
	background: var(--color_p);
	border-color: var(--color_p);
	color: white;
	transform: scale(1.08);
}

/* Sub-page single toggle button (e.g. Relic Tour) */
.hm_pagetop .content a.btn.toggle {
	color: white;
	border: 0;
	background: var(--color_p);
	text-transform: uppercase;
	font-weight: 600;
	font-size: 18px;
}

.hm_pagetop .content a.btn.toggle:hover { color: var(--color_p); }

.hm_pagetop .content a.btn.toggle::before { background: var(--color_cl); }

@media screen and (max-width: 879px) {
	.hm_pagetop .content .pagetop-cta { justify-content: center; }
}

/* Close button on the welcome video — returns to the static banner */
#toggle-home { position: relative; }

#toggle-home .video-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 10;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(51, 68, 104, 0.85);
	color: white;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.25s ease;
}

#toggle-home .video-close:hover {
	background: var(--color_pd);
	transform: scale(1.1);
}

@media screen and (max-width: 879px) {
	#toggle-home .video-close { width: 34px; height: 34px; font-size: 18px; top: 8px; right: 8px; }
}


/*---------------------------  MASS SCHEDULE  ----------------------------*/

/* Wider section than the global 1150px default */
.hm_mass > section {
	width: 95%;
	max-width: 1415px;
}

.hm_mass {
	padding: 60px 0 50px;
	background: var(--color_cl);
}

/* IHS/grape symbol: decorative background behind the title + Mother Church card, not a boxed column */
.hm_mass > section .content {
	position: relative;
}

.hm_mass > section .content::before {
	content: "";
	position: absolute;
	top: -10px;
	right: 0;
	width: 360px;
	height: 400px;
	background: url(/ctm/31378/projects/CorpusChristi/gallery/2026/07/bg-symbolofCC.png) top right / contain no-repeat;
	pointer-events: none;
	z-index: 0;
}

h1.hm_mass-title {
	position: relative;
	z-index: 1;
	font-family: "Playfair Display", "Playfair", serif;
	font-size: clamp(34px, 4vw, 54px);
	font-weight: 400;
	color: var(--color_ad);
	margin: 0 0 30px;
}

.hm_mass-top { margin-bottom: 10px; }

/* Mother Church card — internal flex: photo (38%) + info. Sized narrower than the section so the symbol shows through on the right */
.hm_mass-main {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	background: #fff;
	width: 74%;
	max-width: 840px;
}

.hm_mass-main-img { flex: 0 0 38%; }

.hm_mass-main-img img {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
	display: block;
}

.hm_mass-main-info {
	flex: 1;
	padding: 30px 36px;
}

.hm_mass-main-info h3 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--color_ad);
    font-family: "Playfair Display", "Playfair", serif;
}

.hm_mass-address {
	font-size: 14px;
	color: var(--color_muted);
	margin: 0 0 22px;
}

.hm_mass-schedule { border-collapse: collapse; }

.hm_mass-schedule td {
	padding: 4px 24px 4px 0;
	font-size: 16px;
	vertical-align: top;
	color: var(--color_ad);
}

.hm_mass-schedule td.day {
	font-weight: 700;
	color: var(--color_p);
	white-space: nowrap;
}

.hm_mass-schedule td.time { white-space: nowrap; }

.hm_mass-schedule td.lang { color: rgba(51,68,104,0.55); }

/* Visual gap between weekday and Sunday blocks */
.hm_mass-schedule tr:nth-child(3) td { padding-top: 16px; }

/* Branch churches — CMS .flex + fx_5 handle columns, spacing and responsive */
.hm_mass-branches {
	padding-top: 24px;
}

.hm_mass-branch {
	background: #fff;
	border: 1px solid var(--color_pl);
}

.hm_mass-branch > img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.branch-info { padding: 12px 14px 14px; }

.hm_mass-branch h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
    color: var(--color_ad);
    font-family: "Playfair Display", "Playfair", serif;
}

p.branch-address {
	font-size: 15px;
	color: var(--color_muted);
	margin: 0 0 8px;
	line-height: 1.5;
}

p.branch-times {
	font-size: 13px;
	font-weight: 700;
	color: var(--color_p);
	margin: 0 0 2px;
}

p.branch-times span {
	font-weight: 400;
	color: var(--color_muted);
}

@media screen and (max-width: 879px) {
	.hm_mass { /* padding: 36px 16px 30px; */ }

	.hm_mass > section { width: auto; }

	.hm_mass > section .content::before { display: none; }

	.hm_mass-main { width: 100%; max-width: none; flex-direction: column; }

	.hm_mass-main-img img { min-height: 200px; }

	.hm_mass-main-info { padding: 20px 16px; }

	/* Table -> stacked rows, no more horizontal scroll. The "day" cell keeps
	   its rowspan in the markup, but rowspan has no effect once display isn't
	   table-based — it just renders once at the top of its own <tr>, which
	   happens to read fine here since day + first time/lang sit in the same
	   row and the second time/lang is its own row right after. */
	.hm_mass-schedule,
	.hm_mass-schedule tbody { display: block; width: 100%; }

	.hm_mass-schedule tr {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 10px;
	}

	.hm_mass-schedule td { padding: 2px 0; }

	.hm_mass-schedule td.day { flex: 0 0 100%; width: 100%; }

	/* fx_5 responsive: 2-col at 395–594px, 100% below 395px — handled by CMS */
}


/*---------------------------  QUICK LINKS  ----------------------------*/

/* No <section> wrapper on this block on purpose — full-bleed 100% width.
   .content is a flex row, so .ql_menu (navy, first item) bleeds its own
   background to the true left edge and .ql_panel (cream, last item) bleeds
   to the true right edge — each zone keeps its own color, no extra markup
   needed. */
.hm_quicklinks .content {
	display: flex;
	align-items: stretch;
	padding: 0;
}

/* Left block: navy panel with 3x2 icon grid */
.ql_menu {
	flex: 0 0 55%;
	background: var(--color_p);
	color: white;
	padding: 50px 40px;
}

.ql_menu h2 {
	font-family: "Playfair Display", "Playfair", serif;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 auto;
	color: var(--color_cl);
	max-width: 560px;
}

.ql_grid {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 16px;
    margin: 34px auto 0 auto;
    max-width: 666px;
}

.ql_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	text-decoration: none;
	color: white;
}

.ql_icon {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.ql_icon img {
	width: 45px;
    height: 45px;
	transition: transform 0.35s ease;
}

.ql_label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	line-height: 1.3;
	position: relative;
	transition: color 0.3s ease, transform 0.3s ease;
}

/* Icon lifts, pops color and gains a soft shadow; label follows and gains an underline */
.ql_item:hover .ql_icon {
	background: var(--color_pl);
	transform: translateY(-6px) scale(1.06);
	box-shadow: 0 12px 22px rgba(0, 0, 0, 0.28);
}

.ql_item:hover .ql_icon img { transform: scale(1.12) rotate(-4deg); }

.ql_item:hover .ql_label { color: var(--color_pl); transform: translateY(-2px); }

.ql_label::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 0;
	height: 2px;
	background: var(--color_pl);
	transition: width 0.3s ease, left 0.3s ease;
}

.ql_item:hover .ql_label::after { width: 100%; left: 0; }

/* Right block: Medical Clinic / Cultural Center panels */
.ql_panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--color_cl);
	margin-left: 5px;
}

/*.ql_panel + .ql_panel { border-left: 1px solid rgba(51, 68, 104, 0.12); }*/

.ql_panel-text { padding: 50px 36px 30px; }

.ql_panel h3 {
	font-family: "Playfair Display", "Playfair", serif;
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--color_p);
	line-height: 1.2;
	margin: 0 0 16px;
}

.ql_panel p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--color_ad);
	margin: 0 0 26px;
}

.ql_panel .btn {
	display: inline-flex;
	align-items: center;
	background: var(--color_p);
	color: white;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	padding: 12px 26px;
	transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}

.ql_panel .btn::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0;
	width: 0;
	opacity: 0;
	overflow: hidden;
	transition: width 0.3s ease, margin-left 0.3s ease, opacity 0.3s ease;
}

.ql_panel .btn:hover {
	background: var(--color_pd);
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(51, 68, 104, 0.35);
}

.ql_panel .btn:hover::after {
	width: 14px;
	margin-left: 8px;
	opacity: 1;
}

/* Photo zoom on card hover */
.ql_panel-img { margin-top: auto; overflow: hidden; }

.ql_panel-img img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ql_panel:hover .ql_panel-img img { transform: scale(1.06); }

@media screen and (max-width: 879px) {
	.hm_quicklinks .content { flex-direction: column; }

	.ql_menu { flex: none; padding: 40px 24px; }

	/* minmax(0, 1fr) lets the columns actually shrink below the icons' natural
	   size instead of blowing out past the panel on narrow phones; the icon
	   itself also shrinks so 3 columns keep fitting. */
	.ql_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 10px; }

	.ql_icon { width: 72px; height: 72px; }

	.ql_icon img { width: 34px; height: 34px; }

	.ql_label { font-size: 11px; }

	.ql_panel + .ql_panel { border-left: 0;  border-top: 9px solid #FFF; }

	.ql_panel-text { padding: 36px 24px 26px; }
}


/*---------------------------  BG PGTOP  ----------------------------*/
.bg-pgtop {
	height: 650px;
	background-color: rgba(19,45,94,0.8);
	background-blend-mode: multiply;
}

.bg-pgtop section .content hgroup {
	margin-top: 140px;
	text-align: center;
}

.bg-pgtop section .content hgroup h1 {
	font-size: clamp(50px,7vw,70px);
	color: white;
}

.bg-pgtop section .content hgroup h4 {
	font-size: clamp(24px,4vw,32px);
	color: white;
}

/*---------------------------  ABOUT  ----------------------------*/
.hm_about {
	padding: 30px 0;
	background: var(--color_pd);
	color: white;
}

.hm_about section .content h1 { color: var(--color_al); }

.hm_about section .content .flex { clear: none; margin-top: 40px; }

.hm_about section .content a.button01 {
	background: var(--color_al);
	color: white;
	margin: 0;
}

.hm_about section .content a.button01:hover {
	background: white;
	border-color: white;
	color: var(--color_ad);
}

.hm_about section .content .img-pastor {
	width: 200px;
	padding: 5px;
	border: 1px solid var(--color_pl);
}

/*---------------------------  BULLETINS  ----------------------------*/

.imgBulletin {
    max-width: 225px;
    rotate: -3deg;
}

/* Hide the PDF preview's own page-turn arrows/pagination — confirmed via
   inspector: the bulletin-preview script wraps the canvas in its own
   div.swiper-container inside #canvas-wrapper. Scoped this way so it can't
   touch the real news carousel's controls (different container entirely). */
#canvas-wrapper div.swiper-container .swiper-button-next,
#canvas-wrapper div.swiper-container .swiper-button-prev,
#canvas-wrapper div.swiper-container .swiper-pagination {
	display: none !important;
}

/*---------------------------  LATEST NEWS + BULLETIN  ----------------------------*/

.hm_bulletin.hm_news {
	background: #fff;
	max-width: 1590px;
	margin: 0 auto;
}

/* Break the section out of the standard 1150px centered grid so the bulletin
   column can bleed full-width to the right edge of the viewport. */
@media screen and (min-width: 1180px) {
	.hm_bulletin.hm_news > section {
		width: 100%;
		max-width: none;
		margin: 0;
	}
}

.hm_news section .content {
	display: flex;
	align-items: stretch;
	padding: 0;
}

/* Left: news carousel */
.hm_news_4 {
	position: relative;
	flex: 1 1 auto;
	min-width: 0; /* let the swiper shrink instead of overflowing the flex row */
	padding: 56px 50px 56px 0;
}

@media screen and (min-width: 1180px) {
	.hm_news_4 {
		/* re-align the left edge with the Mass Schedule section above (both
		   use 1415px — not the plain 1150px grid, and not the same value as
		   Page Top/Quick Links, which stay at their own widths) */
		padding-left: max(50px, calc((100% - 1415px) / 2));
	}
}

.hm_news_4 hgroup {
	margin: 0 0 30px;
	padding-right: 90px; /* room for the prev/next arrows pulled up beside the title */
}

/* Matches h1.hm_mass-title so both section headings read as the same family */
.hm_news_4 hgroup h1 {
	font-family: "Playfair Display", "Playfair", serif;
	font-size: clamp(34px, 4vw, 54px);
	font-weight: 400;
	line-height: 1;
	color: var(--color_ad);
	margin: 0;
}

/* Prev/next arrows are appended by rotator04.php deep inside #news_rotator_content
   (a sibling of hgroup, not a child) — position them against .hm_news_4 itself
   (the shared ancestor) at a fixed offset lined up with the title, not top:50%
   which would center them against the whole card grid below. top is nudged
   down from the padding-top (56px) by roughly half the title's cap-height so
   the arrow box centers on the visible glyphs, not the raw line box. */
.hm_news_4 .swiper-button-prev,
.hm_news_4 .swiper-button-next {
	position: absolute;
	top: calc(56px + clamp(34px, 4vw, 54px) * 0.45 - 17px);
	left: auto;
	width: 34px;
	height: 34px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--color_pl);
	border-radius: 4px;
	color: var(--color_p);
	font-size: 13px;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Strip Swiper's default chevron glyph — the FA icon from rotator04.php is used instead */
.hm_news_4 .swiper-button-prev::after,
.hm_news_4 .swiper-button-next::after { display: none; }

.hm_news_4 .swiper-button-next { right: 0; }
.hm_news_4 .swiper-button-prev { right: 44px; }

.hm_news_4 .swiper-button-prev:hover,
.hm_news_4 .swiper-button-next:hover {
	background: var(--color_p);
	border-color: var(--color_p);
	color: white;
}

.hm_news_4 .swiper-button-prev.swiper-button-disabled,
.hm_news_4 .swiper-button-next.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* News cards: the flyer image carries all the info, no title/date shown on the card */
#news-rotator04 { overflow: hidden; }

#news-rotator04 .swiper-slide a {
	display: block;
	text-decoration: none;
	overflow: hidden;
}

#news-rotator04 .swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

#news-rotator04 .swiper-slide a:hover img {
	transform: scale(1.045);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

#news-rotator04 .swiper-slide p.title,
#news-rotator04 .swiper-slide p.subtitle,
#news-rotator04 .swiper-slide .summary { display: none; }

.hm_news_4 .swiper-pagination { display: none; } /* arrows drive navigation, no dots */

/* Right: bulletin download panel */
.hm_bulletin-col {
	flex: 0 0 34%;
	max-width: 360px;
	background: var(--color_panel);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 56px 30px;
}

.hm_bulletin-col .bulletin-cta-text {
	font-family: "Playfair Display", "Playfair", serif;
	font-style: italic;
	font-size: 20px;
	line-height: 1.4;
	color: var(--color_ad);
	margin: 0 0 30px;
}

.hm_bulletin-col .imgBulletin { margin: 0 auto 30px; }

.hm_bulletin-col a.button01.latest_bulletin {
	display: inline-block;
	width: auto;
	max-width: none;
	background: var(--color_p);
	border-color: var(--color_p);
	color: white;
	font-size: 13px;
	letter-spacing: 1px;
	padding: 14px 34px;
	margin: 0;
	transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}

.hm_bulletin-col a.button01.latest_bulletin:hover {
	background: var(--color_pd);
	border-color: var(--color_pd);
	color: white;
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(51, 68, 104, 0.3);
}

@media screen and (max-width: 879px) {
	.hm_news section .content { flex-direction: column; }

	.hm_news_4 { padding: 36px 20px; }

	/* Center the prev/next pair as a row below the carousel instead of the
	   two divs stacking on top of each other (their default block display) */
	.hm_news_4 #news_rotator_content { text-align: center; }

	.hm_news_4 .swiper-button-prev,
	.hm_news_4 .swiper-button-next {
		position: static;
		transform: none;
		display: inline-flex;
		width: 44px;
		height: 44px;
		margin: 24px 6px 0;
		background: var(--color_cl);
	}

	.hm_news_4 hgroup {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10px;
		padding-right: 0;
	}

	.hm_bulletin-col { flex: none; max-width: none; width: 100%; padding: 36px 20px; }
}