.pth-wrapper { --pth-mobile-header-offset: 88px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; min-height: 420px; padding-top: 50px; }
.wp-block-shortcode .pth-wrapper,
.entry-content .pth-wrapper,
.post-content .pth-wrapper {
	max-width: 100vw !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.pth-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; width: 100%; padding: 8px 0; }
.pth-hero, .pth-grid { margin: 0; }
.pth-wrapper > * { position: relative; z-index: 1; }
.pth-wrapper::before,
.pth-wrapper::after { content: ""; position: absolute; top: 0; bottom: 0; width: 220px; background-repeat: repeat-y; background-size: 220px auto; pointer-events: none; z-index: 0; }
.pth-wrapper::before { left: 0; background-image: url("../../images/left-pattern.svg"); background-position: left top; }
.pth-wrapper::after { right: 0; background-image: url("../../images/right-pattern.svg"); background-position: right top; }
.pth-logo { width: 140px; height: auto; margin-bottom: 80px; }
.pth-datetime { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pth-date { position: relative; display: block; font-size: 16px; color: #314C57; line-height: 1.3; min-height: 22px; margin: 4px 0; font-weight: 600; font-family: "Source Sans 3", Sans-Serif; }
.pth-date-greg, .pth-date-hijri { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; transition: opacity 1.6s ease, filter 1.6s ease; display: block; }
.pth-date-greg { opacity: 1; filter: blur(0px); }
.pth-date-hijri { opacity: 0; filter: blur(2px); }
.pth-date.is-hijri .pth-date-greg { opacity: 0; filter: blur(2px); }
.pth-date.is-hijri .pth-date-hijri { opacity: 1; filter: blur(0px); }
.pth-time { font-size: 60px; font-weight: 600; color: #314C57; font-family: ct_font_trajan_pro3, sans-serif; }
.pth-grid { display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 16px; width: min(1200px, 100%); max-width: 100%; padding-top: 60px; }
.pth-card { border: 1px solid transparent; border-radius: 4px; padding: 12px; background: rgba(255, 255, 255, 0.4); text-align: center; box-sizing: border-box; transition: border-color .4s ease; }
.pth-grid .pth-card { max-width: none; flex: 1 1 0; min-width: 140px; }
.pth-card-title { font-weight: 400; color: #314C57; margin-bottom: 6px; font-family: ct_font_trajan_pro3, sans-serif; font-size: 24px; text-transform: uppercase; }
.pth-time-row { display: inline-flex; gap: 8px; align-items: baseline; justify-content: center; }
.pth-card-time { font-size: 32px; font-weight: 400; color: #314C57; font-family: ct_font_trajan_pro3, sans-serif; }
.pth-offset { font-size: 12px; font-weight: 700; color: #314C57; }
.pth-card-subline { margin-top: 6px; font-size: 12px; color: #64748b; }
.pth-card.is-next { border-color: #314C57; }
@media (max-width: 900px) {
	.pth-wrapper::before, .pth-wrapper::after { width: 180px; background-size: 180px auto; }
	.pth-wrapper {
		box-sizing: border-box;
		height: auto;
		min-height: 100svh;
		min-height: 100dvh;
		padding-top: calc(var(--pth-mobile-header-offset) + env(safe-area-inset-top));
		padding-bottom: 24px;
		justify-content: flex-start;
		gap: 12px;
	}
}
@media (max-width: 640px) {
	.pth-wrapper::before, .pth-wrapper::after { display: none; }
	.pth-time { font-size: 60px; }
}
@media (max-width: 900px) {
	.pth-grid { width: 100%; }
	.pth-grid { flex-direction: column; align-items: stretch; gap: 8px; }
	.pth-grid .pth-card { max-width: 350px; flex: 0 0 auto; width: 100%; margin-left: auto; margin-right: auto; }
	.pth-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; grid-column-gap: 6px; grid-row-gap: 2px; grid-template-areas: "title time" "subline subline"; text-align: left; padding: 10px; }
	.pth-card-title { grid-area: title; margin-bottom: 0; }
	.pth-time-row { grid-area: time; display: inline-flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
	.pth-card-subline { grid-area: subline; font-size: 13px; line-height: 1.4; margin-top: 4px; }
}