/**
 * Masjid360 Core — event views. Reads the theme's design tokens (--brand, --gold,
 * etc.) with neutral fallbacks so it also looks right on a generic theme.
 */

.m360-wrap { max-width: var(--wrap, 1200px); margin: 0 auto; padding: 0 16px; }

.m360-btn {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 700; font-size: 14px; line-height: 1;
	padding: 11px 20px; border-radius: 999px;
	border: 1.5px solid var(--line, #dbe3dd);
	background: #fff; color: var(--ink, #16241d);
	text-decoration: none; cursor: pointer;
}
.m360-btn:hover { border-color: var(--brand, #0f5c43); }
.m360-btn-primary { background: var(--brand, #0f5c43); border-color: var(--brand, #0f5c43); color: #fff; }
.m360-btn-primary:hover { background: var(--brand-700, #0b4633); }

.m360-chip {
	display: inline-flex; align-items: center;
	font-size: 12px; font-weight: 700; letter-spacing: .04em;
	padding: 5px 13px; border-radius: 999px;
	background: var(--gold-soft, #f4ead0); color: var(--gold-600, #a67e22);
	text-decoration: none;
}
.m360-chip.is-active { background: var(--brand, #0f5c43); color: #fff; }
.m360-chip-sm { font-size: 10.5px; padding: 3px 9px; }

.m360-screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ---- Single event (flyer-first) ---- */
.m360-event-main { max-width: 660px; text-align: center; padding-top: 40px; padding-bottom: 40px; }
.m360-backlink { text-align: left; margin: 0 0 24px; font-weight: 700; font-size: 13.5px; }
.m360-backlink a { color: var(--brand-600, #12694e); text-decoration: none; }
.m360-event-poster { max-width: 420px; margin: 0 auto 24px; border-radius: var(--r, 16px); overflow: hidden; box-shadow: var(--shadow-lg, 0 10px 40px rgba(11,70,51,.14)); }
.m360-event-poster img { width: 100%; height: auto; display: block; }
.m360-event-title { font-size: clamp(26px, 3.8vw, 38px); margin: 8px 0 14px; }
.m360-event-meta { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.m360-event-cats { margin: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.m360-event-when { font-weight: 600; font-size: 15px; color: var(--muted, #5b6b62); margin: 0; }
.m360-event-where, .m360-event-host { font-size: 14px; color: var(--muted, #5b6b62); margin: 0; }
.m360-event-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 10px 0 0; }
.m360-event-content { text-align: left; max-width: 65ch; margin: 28px auto 0; }

/* ---- Related / list grids ---- */
.m360-related { padding: 24px 16px 56px; }
.m360-related h2 { text-align: center; margin: 0 0 20px; }
.m360-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.m360-card { background: var(--paper, #fff); border: 1px solid var(--line, #dbe3dd); border-radius: var(--r, 16px); overflow: hidden; display: flex; flex-direction: column; }
.m360-card-media { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--brand, #0f5c43); }
.m360-card-media img { width: 100%; height: 100%; object-fit: cover; }
.m360-card-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: #fff; font-weight: 700; text-align: center; }
.m360-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.m360-card-when { font-size: 12px; font-weight: 600; color: var(--muted, #5b6b62); margin: 0; }
.m360-card-title { font-size: 17px; margin: 0; }
.m360-card-title a { text-decoration: none; color: inherit; }
.m360-card-excerpt { font-size: 13.5px; color: var(--muted, #5b6b62); margin: 0; }
.m360-card-link { margin-top: auto; font-weight: 700; font-size: 13px; color: var(--brand-600, #12694e); text-decoration: none; }

/* ---- Archive ---- */
.m360-archive { padding: 40px 0 56px; }
.m360-archive-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.m360-archive-head h1 { margin: 0; }
.m360-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.m360-empty { color: var(--muted, #5b6b62); }

/* ---- Month view ---- */
.m360-calendar { margin-bottom: 36px; }
.m360-cal-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.m360-cal-label { margin: 0; font-size: 20px; }
.m360-cal-prev, .m360-cal-next { border: 1px solid var(--line, #dbe3dd); background: #fff; border-radius: 10px; width: 40px; height: 36px; cursor: pointer; font-size: 16px; }
.m360-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line, #dbe3dd); border: 1px solid var(--line, #dbe3dd); border-radius: var(--r, 16px); overflow: hidden; }
.m360-cal-dow { background: var(--bg-2, #e7eee8); padding: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted, #5b6b62); }
.m360-cal-cell { background: var(--paper, #fff); min-height: 92px; padding: 6px; font-size: 12px; }
.m360-cal-cell.is-outside { background: var(--bg, #f2f5f2); color: var(--muted, #5b6b62); }
.m360-cal-day { font-weight: 700; }
.m360-cal-events { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.m360-cal-event { display: block; background: var(--brand, #0f5c43); color: #fff; text-decoration: none; padding: 3px 6px; border-radius: 6px; font-size: 11px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m360-cal-empty { text-align: center; color: var(--muted, #5b6b62); margin-top: 14px; }

@media (max-width: 960px) { .m360-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
	.m360-grid { grid-template-columns: 1fr; }
	.m360-cal-cell { min-height: 64px; }
	.m360-cal-event { font-size: 0; padding: 4px; } /* dots on small screens */
	.m360-cal-event::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
}

/* ---- Ticker ([m360_ticker]) ---- */
.m360-ticker { display: flex; align-items: center; gap: 14px; }
.m360-ticker-tag {
	background: var(--brand, #0f5c43); color: #fff;
	font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.m360-ticker-viewport {
	overflow: hidden; position: relative; flex: 1;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.m360-ticker-track { display: inline-flex; align-items: center; white-space: nowrap; animation: m360-ticker 34s linear infinite; }
.m360-ticker-viewport:hover .m360-ticker-track { animation-play-state: paused; }
.m360-ticker-item { font-weight: 600; font-size: 14.5px; color: var(--ink, #16241d); text-decoration: none; }
.m360-ticker-item:hover { color: var(--brand-700, #0b4633); text-decoration: underline; text-underline-offset: 2px; }
.m360-ticker-sep { color: var(--gold-600, #a67e22); opacity: .5; margin: 0 20px; }
@keyframes m360-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .m360-ticker-track { animation: none; } }

/* ---- Services ---- */
.m360-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.m360-service { display: flex; gap: 12px; align-items: flex-start; background: var(--paper, #fff); border: 1px solid var(--line, #dbe3dd); border-radius: var(--r, 16px); padding: 16px; text-decoration: none; color: inherit; }
a.m360-service:hover { border-color: var(--brand, #0f5c43); }
.m360-service-icon { font-size: 22px; line-height: 1; color: var(--brand, #0f5c43); flex-shrink: 0; }
.m360-service-body { display: flex; flex-direction: column; gap: 3px; }
.m360-service-title { font-weight: 700; }
.m360-service-desc { font-size: 13.5px; color: var(--muted, #5b6b62); }

/* ---- Team ---- */
.m360-team-card .m360-card-media { aspect-ratio: 1 / 1; }

/* ---- Obituaries ---- */
.m360-obituaries { display: grid; gap: 14px; }
.m360-obituary { background: var(--paper, #fff); border: 1px solid var(--line, #dbe3dd); border-radius: var(--r, 16px); padding: 20px; text-align: center; }
.m360-obituary-arabic { font-size: 18px; color: var(--brand, #0f5c43); margin: 0 0 8px; }
.m360-obituary h3 { margin: 0 0 6px; }
.m360-obituary p { color: var(--muted, #5b6b62); margin: 0; font-size: 14px; }

/* ---- Campaigns ---- */
.m360-campaign .m360-progress { height: 8px; border-radius: 999px; background: var(--bg-2, #e7eee8); overflow: hidden; margin: 6px 0; }
.m360-campaign .m360-progress span { display: block; height: 100%; background: var(--gold, #b9902f); }

/* ---- What's On carousel ---- */
.m360-events-shortcode.is-carousel .m360-grid {
	display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: 8px; grid-template-columns: none;
}
.m360-events-shortcode.is-carousel .m360-card { flex: 0 0 280px; scroll-snap-align: start; }

/* ---- Hijri mini-calendar ---- */
.m360-hcal { background: var(--paper, #fff); border: 1px solid var(--line, #dbe3dd); border-radius: var(--r, 16px); padding: 16px; }
.m360-hcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.m360-hcal-head a { font-size: 20px; text-decoration: none; color: var(--brand-600, #12694e); padding: 0 8px; }
.m360-hcal-head > div { text-align: center; }
.m360-hcal-greg { display: block; font-weight: 700; font-family: var(--wp--preset--font-family--heading, Georgia, serif); }
.m360-hcal-hijri { display: block; font-size: 12px; color: var(--gold-600, #a67e22); font-weight: 600; }
.m360-hcal-dow, .m360-hcal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.m360-hcal-dow { margin-bottom: 4px; }
.m360-hcal-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted, #5b6b62); }
.m360-hcal-cell { min-height: 52px; border-radius: 8px; padding: 4px; background: var(--bg, #f2f5f2); display: flex; flex-direction: column; gap: 2px; }
.m360-hcal-cell.is-empty { background: transparent; }
.m360-hcal-cell.is-today { outline: 2px solid var(--gold, #b9902f); }
.m360-hcal-cell .g { font-weight: 700; font-size: 13px; }
.m360-hcal-cell .h { font-size: 10.5px; color: var(--muted, #5b6b62); }
.m360-hcal-cell .m360-hijri-wiladat { color: var(--brand-600, #12694e); font-weight: 700; }
.m360-hcal-cell .m360-hijri-shahadat { color: #8c3e3e; font-weight: 700; }
@media (max-width: 640px) { .m360-hcal-cell { min-height: 40px; } .m360-hcal-cell .h { display: none; } }

/* ---- Hero slider ([m360_hero]) ---- */
.m360-hero-slider { position: relative; height: 100%; border-radius: var(--r, 16px); overflow: hidden; min-height: 320px; }
.m360-hero-slides { height: 100%; }
.m360-hero-slide { display: none; min-height: 320px; height: 100%; padding: 52px 40px; background: var(--brand, #0f5c43); color: #fff; flex-direction: column; justify-content: center; }
.m360-hero-slide.is-active { display: flex; }
.m360-hero-slide.has-image { background-size: cover; background-position: center; position: relative; }
.m360-hero-slide.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,46,35,.35), rgba(8,46,35,.85)); }
.m360-hero-slide.has-image .m360-hero-slide-inner { position: relative; }
.m360-hero-heading { color: #fff; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); margin: 0 0 10px; }
.m360-hero-text { color: rgba(255,255,255,.9); margin: 0 0 16px; max-width: 48ch; }
.m360-hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 8px; justify-content: center; }
.m360-hero-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; }
.m360-hero-dot.is-active { background: var(--gold, #b9902f); }