/* ==========================================================================
   Mobile UX layer (≤ 1024px tablet, ≤ 767px phone)
   - App-style bottom dock (Register · WhatsApp · Call · Menu)
   - Swipeable snap carousels for cards and people
   - Back-to-top with reading-progress ring
   - Tighter, organised rhythm and type for small screens
   ========================================================================== */

/* ---------- Bottom dock ---------- */
.afro-dock { display: none; }
.afro-totop { display: none; }

@media (max-width: 1024px) {
	.afro-dock {
		position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 98;
		display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 6px; align-items: center;
		padding: 7px; border-radius: 22px;
		background: rgba(17,17,17,.82); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
		border: 1px solid rgba(249,178,24,.28); box-shadow: 0 18px 40px -12px rgba(0,0,0,.8);
		transition: transform .5s var(--afro-ease), opacity .4s;
	}
	.afro-dock.is-hidden { transform: translateY(140%); opacity: 0; }
	.afro-dock__item { display: grid; justify-items: center; gap: 3px; padding: 8px 4px 6px; border-radius: 15px; color: #fff; text-decoration: none !important; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; min-height: 52px; -webkit-tap-highlight-color: transparent; transition: background .25s, transform .2s; border: 0; background: transparent; cursor: pointer; font-family: var(--afro-font-text); }
	.afro-dock__item .afro-icon { width: 20px; height: 20px; color: var(--afro-yellow); }
	.afro-dock__item:active { transform: scale(.94); background: rgba(255,255,255,.06); }
	.afro-dock__item--cta { grid-auto-flow: column; justify-content: center; align-items: center; gap: 8px; background: var(--afro-gold); color: var(--afro-black) !important; font-size: .72rem; letter-spacing: .08em; box-shadow: 0 8px 24px -8px rgba(249,178,24,.7); position: relative; overflow: hidden; }
	.afro-dock__item--cta .afro-icon { color: var(--afro-black); }
	.afro-dock__item--cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg); animation: afro-dock-sheen 4.5s ease-in-out infinite; }
	@keyframes afro-dock-sheen { 0%, 70% { left: -60%; } 100% { left: 140%; } }
	.afro-dock__price { display: block; font-size: .58rem; opacity: .75; letter-spacing: .04em; }
	body.afro { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
	.afro-nav-open .afro-dock { transform: translateY(140%); opacity: 0; }

	/* Back to top with progress ring */
	.afro-totop { display: grid; place-items: center; position: fixed; right: 14px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 97; width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; background: rgba(17,17,17,.85); color: var(--afro-yellow); cursor: pointer; opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .35s, transform .35s var(--afro-ease); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
	.afro-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
	.afro-totop svg.afro-totop__ring { position: absolute; inset: 0; width: 46px; height: 46px; transform: rotate(-90deg); }
	.afro-totop__ring circle { fill: none; stroke-width: 3; }
	.afro-totop__ring .bg { stroke: rgba(255,255,255,.12); }
	.afro-totop__ring .fg { stroke: var(--afro-yellow); stroke-linecap: round; stroke-dasharray: 125.6; stroke-dashoffset: 125.6; }
	.afro-totop .afro-icon { transform: rotate(-90deg); width: 18px; height: 18px; }

	/* Header: lighter on small screens, announcement compact */
	.afro-header__inner { gap: 1rem; }
	.afro-wordmark__mark { --mark: 40px; }
	.afro-wordmark__name { font-size: 1.25rem; }
	.afro-nav__mobile-extra .afro-contact a { color: #fff; }

	/* Menu: numbered big links */
	.afro-nav__list { counter-reset: navi; }
	.afro-nav__list > li > a { display: flex !important; align-items: baseline; gap: 1rem; }
	.afro-nav__list > li > a::before { counter-increment: navi; content: "0" counter(navi); font-family: var(--afro-font-serif); font-style: italic; font-size: 1rem; color: var(--afro-yellow); }

	/* Hero */
	.afro-hero { min-height: auto !important; padding-top: 2.5rem !important; padding-bottom: 3rem !important; }
	.afro-hero .afro-hero__title .elementor-heading-title { font-size: clamp(2.6rem, 10.5vw, 4rem) !important; }
	.afro-mega .elementor-heading-title { font-size: clamp(3rem, 15vw, 5.5rem) !important; }
	.afro-hero-lines { display: none; }

	/* Section rhythm */
	.e-con.afro-sec { padding-block: 4.25rem !important; }
	.e-con.afro-sec--tight { padding-block: 3rem !important; }
	.afro-h2 .elementor-heading-title, .afro-h2 { font-size: clamp(1.75rem, 7vw, 2.4rem) !important; }
	.afro-statement .elementor-heading-title { font-size: clamp(1.5rem, 6.2vw, 2.1rem) !important; }
	.afro-lede, .afro-lede p { font-size: 1.02rem; }
}

@media (max-width: 767px) {
	/* Announcement: single line */
	.afro-announce p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: .9rem; }
	.afro-announce strong { display: none; }

	/* Cards + people become swipeable snap carousels */
	.afro-snapscroll, .afro-people.afro-people--grid {
		display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px !important;
		margin-inline: calc(-1 * var(--afro-gutter)); padding: 4px var(--afro-gutter) 18px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.afro-snapscroll::-webkit-scrollbar, .afro-people.afro-people--grid::-webkit-scrollbar { display: none; }
	.afro-snapscroll > .e-con, .afro-snapscroll > .elementor-element { flex: 0 0 80% !important; width: 80% !important; max-width: 80% !important; scroll-snap-align: center; }
	.afro-people.afro-people--grid > .afro-person { flex: 0 0 74%; scroll-snap-align: center; margin-top: 0 !important; }
	.afro-swipe-hint { display: flex; justify-content: center; gap: 6px; margin-top: -4px; }
	.afro-swipe-hint i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); transition: width .3s, background .3s; }
	.afro-swipe-hint i.is-on { width: 20px; border-radius: 4px; background: var(--afro-yellow); }
	.afro-card { min-height: 360px !important; }

	/* Event rows: compact ticket style */
	.afro-event-row { border-radius: 16px; }
	.afro-event-row__title { font-size: 1.15rem !important; }
	.afro-event-row__theme { font-size: .85rem; }

	/* Facts: 2-up tiles */
	.afro-facts dd { font-size: 1rem; }

	/* Countdown fits one row */
	.afro-countdown { gap: .4rem; }
	.afro-countdown__unit { padding: .7rem .2rem .6rem; border-radius: 12px; }
	.afro-countdown__num { font-size: 1.7rem; }
	.afro-countdown__label { font-size: .52rem; letter-spacing: .12em; }

	/* CTAs full width, comfortable taps */
	.afro-cta-group { width: 100%; }
	.afro-cta-group .afro-btn, .afro-el-btn .elementor-button { width: 100%; min-height: 52px; }
	.elementor-widget-button.afro-el-btn { width: 100%; }

	/* Flyer deck: swipe hint */
	.afro-deck-wrap { width: min(340px, 84vw); margin-top: .5rem; }
	.afro-deck__nav { margin-top: 1.1rem; }

	/* Slats: fixed height so the image block never collapses under the counters */
	.afro-slats { aspect-ratio: auto; height: min(78vw, 340px); margin-bottom: 1.25rem; }

	/* Counters: stat tiles on their own row, clear of the image */
	.afro-counters { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; margin-top: 1.5rem !important; padding-top: 1.5rem !important; border-top: 0 !important; }
	.afro-counters::before { top: 0; }
	.afro-counters > .afro-counter { width: auto !important; max-width: none !important; margin: 0 !important; padding: 1rem .9rem !important; border: 1px solid var(--afro-border) !important; border-radius: 16px; background: linear-gradient(160deg, rgba(249,178,24,.10), rgba(255,255,255,.02) 60%); }
	.afro-counters > .afro-counter:first-child { grid-column: 1 / -1; }
	.afro-counter .elementor-counter { flex-direction: column; align-items: flex-start; gap: .35rem; }
	.afro-counter .elementor-counter-number-wrapper { font-size: 2.2rem !important; line-height: 1 !important; }
	.afro-counter .elementor-counter-title { font-size: .74rem !important; line-height: 1.3 !important; max-width: none; text-align: left !important; }

	/* Overflowing carousels must start at the left edge (centred overflow hides the first card) */
	.afro-snapscroll, .afro-people.afro-people--grid { justify-content: flex-start !important; scroll-padding-inline: var(--afro-gutter); overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
	.afro-people.afro-people--grid > .afro-person { transform: none !important; opacity: 1 !important; }

	/* Giant title */
	.afro-giant .elementor-heading-title { font-size: 18vw !important; }

	/* Collage tidy */
	.afro-snap > figure figcaption { font-size: .82rem !important; }

	/* Crossing strips */
	.afro-xstrips { height: 150px; }
	.afro-xstrip__track { font-size: 1.15rem; gap: 1.4rem; }
	.afro-xstrip__track span::after { margin-left: 1.4rem; }

	/* Forms */
	.afro-field input:not([type="checkbox"]), .afro-field select { font-size: 16px; } /* prevents iOS zoom */

	/* Footer */
	.afro-newsband { padding-top: 3rem; padding-bottom: 2.5rem; }
	.afro-newsband h2 { font-size: 1.9rem; }
	.afro-newsband .afro-cta-group .afro-btn { width: 100%; }
	.afro-ticker__track { font-size: 2.2rem; }
	.afro-footer__inner { gap: 2.25rem; padding-block: 2.5rem; }
	.afro-footer__legal { padding-bottom: 1.25rem; }

	/* Breadcrumbs scroll instead of wrapping */
	.afro-crumbs ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
}

@media (max-width: 380px) {
	.afro-dock { grid-template-columns: 1fr 1fr 1fr 1.4fr; }
	.afro-dock__item { font-size: .56rem; }
	.afro-counters { grid-template-columns: 1fr; }
	.afro-counters > .afro-counter:first-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.afro-dock__item--cta::after { animation: none; }
}