/* =========================================================================
   FKG UNAIR E-Conference — MOBILE-FRIENDLY POLISH LAYER
   -------------------------------------------------------------------------
   Loaded LAST (after custom-conference.css / event-detail.css / Porto skins).

   GOLDEN RULE: every single rule below lives inside a max-width media
   query, so the desktop layout (>= 992px) is 100% untouched. This file
   only reshapes phones (<= 767px) and tablets (768–991px).

   Mobile UX goals (JSPS / UCG-conference style):
   - one clean column, generous vertical rhythm, nothing clipped
   - big thumb-friendly tap targets (buttons full-width where it helps)
   - carousels with arrows BELOW the cards (no overlap, no side overflow)
   - tables wrap/scroll inside their card instead of breaking the page
   - sticky section jump-nav stays reachable while scrolling
   ========================================================================= */

/* ========================================================================
   TABLETS & PHONES (<= 991px) — hamburger nav appears in this range
   ======================================================================== */
@media (max-width: 991.98px) {

	/* --- Page foundations ------------------------------------------------ */
	html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
	body { overflow-x: hidden; overflow-x: clip; }

	/* --- Header: compact top strip + comfortable hamburger drawer -------- */
	#ecfHeaderTopBar { min-height: 0 !important; padding-top: 4px; padding-bottom: 4px; }
	#ecfHeaderTopBar a { font-size: 0.82rem; }
	.header-nav-bar .header-row { padding-top: 8px !important; padding-bottom: 8px !important; }
	#header .header-nav-main nav {
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 18px 30px -18px rgba(11, 35, 64, 0.35);
	}
	#header .header-nav-main nav > ul > li > a {
		padding: 12px 20px !important;
		font-size: 0.95rem;
		border-bottom: 1px solid #F1F4F8;
	}
	#header .header-btn-collapse-nav { padding: 10px 14px; font-size: 1rem; }
	#header .btn.btn-modern { padding: 9px 16px; font-size: 0.75rem; }
	#header a, #header button, #header .btn { -webkit-tap-highlight-color: transparent; }

	/* --- Hero: shorter, breathing, readable ------------------------------ */
	.ecf-hero { padding: 96px 0 60px; }
	.ecf-hero--event { padding: 96px 0 56px; }

	/* --- Section rhythm --------------------------------------------------- */
	.ecf-ev-section { padding: 52px 0; }
	.ecf-showcase { padding: 56px 0; }
	.ecf-showcase__panel, .ecf-showcase__list { padding: 32px 26px; }

	/* --- Home events carousel: arrows below the cards (no overlap) ------- */
	.ecf-events-carousel .owl-nav {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin-top: 18px !important;
	}
	.ecf-events-carousel .owl-nav button.owl-prev,
	.ecf-events-carousel .owl-nav button.owl-next {
		position: static !important;
		transform: none !important;
		width: 42px;
		height: 42px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* --- Inline action rows (buttons + divider) stack vertically --------- */
	.section .hstack.gap-4 { flex-direction: column; align-items: stretch; gap: 16px !important; }
	.section .hstack.gap-4 .vr { display: none; }

	/* --- "1928" decorative figure: keep inside the viewport -------------- */
	.custom-text-1 { font-size: 7rem !important; line-height: 1 !important; top: 0; display: inline-block; }
}

/* ========================================================================
   PHONES (<= 767px) — the main mobile experience
   ======================================================================== */
@media (max-width: 767.98px) {

	/* --- SHARED: tap targets & touch behavior ----------------------------- */
	.ecf-btn { padding: 13px 26px; font-size: 0.8rem; }
	.btn-arrow-effect-1, .ecf-btn, .ecf-ev-cta-btn { -webkit-tap-highlight-color: transparent; }
	.ecf-event-card:hover, .ecf-feature-card:hover, .ecf-ev-session-card:hover,
	.ecf-ev-detail:hover, .ecf-ev-wa-card:hover, .ecf-ev-pill:hover,
	.ecf-ev-style-card:hover, .ecf-ev-cta-btn:hover { transform: none; }

	/* --- HERO (home + event detail) --------------------------------------- */
	.ecf-hero { padding: 78px 0 52px; }
	.ecf-hero__eyebrow { font-size: 0.68rem; padding: 7px 14px; letter-spacing: 0.3px; }
	.ecf-hero__title { font-size: 2.2rem; margin: 16px 0 12px; }
	.ecf-hero__subtitle { font-size: 0.95rem; max-width: 540px; margin-left: auto; margin-right: auto; margin-bottom: 24px; }
	.ecf-hero__actions { justify-content: center; }
	.ecf-hero__actions .btn { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
	.ecf-hero__meta { justify-content: center; gap: 8px; margin-bottom: 22px; }
	.ecf-hero__meta span { font-size: 0.72rem; padding: 6px 12px; }
	.ecf-hero--event .ecf-hero__title { font-size: 1.7rem; margin: 14px 0 10px; }
	.ecf-hero--event .ecf-hero__subtitle { font-size: 0.92rem; }

	/* --- TRUST STRIP ------------------------------------------------------- */
	.trust-item { align-items: flex-start; gap: 12px; }
	.trust-item h5 { font-size: 0.9rem; }

	/* --- ABOUT / SEARCH ------------------------------------------------------ */
	.section .hstack.gap-4 { gap: 14px !important; }
	.custom-text-1 { font-size: 6rem !important; }

	/* --- HOME EVENTS CAROUSEL ------------------------------------------------- */
	.ecf-event-card__media { aspect-ratio: 16 / 9; }
	.ecf-event-card__body { padding: 18px 18px 20px; }
	.ecf-event-card__title { min-height: 0; font-size: 1.05rem; }

	/* --- CTA BANNER / FEATURE CARDS / NEWS -------------------------------------- */
	.ecf-cta-banner h2 { font-size: 1.7rem; }
	.ecf-cta-banner .text-lg-end { text-align: left !important; }
	.ecf-feature-card { padding: 26px 22px; }
	.ecf-feature-card__icon { width: 58px; height: 58px; border-radius: 16px; margin-bottom: 14px; }
	.news-thumb-wrap { aspect-ratio: 16 / 9; }

	/* --- SHOWCASE ------------------------------------------------------------------ */
	.ecf-showcase { padding: 50px 0; }
	.ecf-showcase__panel, .ecf-showcase__list { padding: 30px 22px; border-radius: 20px; }
	.ecf-showcase__panel h3 { font-size: 1.45rem; }
	.ecf-showcase__list h3 { font-size: 1.3rem; }
	.ecf-showcase__stats { gap: 22px; margin-top: 24px; }
	.ecf-showcase__stats strong { font-size: 1.5rem; }

	/* --- FAQ ------------------------------------------------------------------------- */
	.ecf-faq .accordion-toggle { padding: 15px 42px 15px 16px; font-size: 0.95rem !important; }
	.ecf-faq .card-body { padding: 0 16px 18px; font-size: 0.92rem; }

	/* --- CONTACT (Get in Touch) + FORM ------------------------------------------------ */
	.ecf-contact h2 { font-size: 2rem; }
	.ecf-contact .card-body.m-4 { margin: 1rem !important; padding: 1.4rem 1.15rem !important; }
	.ecf-contact .form-group { margin-bottom: 0.9rem; }
	.ecf-contact .card-body .form-control { font-size: 16px; min-height: 46px; } /* 16px stops iOS auto-zoom */
	.ecf-contact input[type="submit-demo"] { width: 100%; }
	.ecf-contact span.opacity-2 img { height: 104px; }

	/* --- FOOTER -------------------------------------------------------------------------- */
	.ecf-footer .container > .row.pt-5 { row-gap: 26px; }
	.ecf-footer h3 { font-size: 1.1rem; margin-bottom: 12px !important; }
	.footer-copyright .col { margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 18px !important; }

	/* === EVENT DETAIL: sticky jump-nav ===================================== */
	section[id] { scroll-margin-top: 64px; }
	.ecf-ev-nav { gap: 5px; padding: 10px 0; }
	.ecf-ev-nav a { padding: 8px 14px; font-size: 0.74rem; }

	/* === EVENT DETAIL: sections ============================================= */
	.ecf-ev-section { padding: 44px 0; }
	.ecf-ev-section__head { margin-bottom: 24px; }
	.ecf-ev-section__head h3 { font-size: 1.45rem; }

	/* === EVENT DETAIL: banner + overview ===================================== */
	.ecf-ev-banner { aspect-ratio: 16 / 9; border-radius: 14px; margin-bottom: 24px; }
	#info .container .container { padding-left: 0; padding-right: 0; }
	#info .row.py-4, #info .row.py-5 { padding-top: 12px !important; padding-bottom: 12px !important; }
	#info .row.g-5 { --bs-gutter-x: 1rem; --bs-gutter-y: 1.5rem; }
	#info h4.mt-5 { margin-top: 1.5rem !important; }

	/* === EVENT DETAIL: fact grid =============================================== */
	.ecf-ev-detail-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ecf-ev-detail { padding: 12px 14px; gap: 10px; align-items: center; }
	.ecf-ev-detail__icon { width: 36px; height: 36px; border-radius: 10px; font-size: 0.85rem; }
	.ecf-ev-detail__label { font-size: 0.62rem; }
	.ecf-ev-detail__value { font-size: 0.85rem; }

	/* === EVENT DETAIL: video / venue ============================================== */
	.ecf-ev-video__play { width: 58px; height: 58px; font-size: 1.3rem; }
	.ecf-ev-venue-card { padding: 22px 20px; }
	.ecf-ev-map, .ecf-ev-map iframe { min-height: 240px; }

	/* === EVENT DETAIL: rundown rows ================================================ */
	.ecf-ev-session-row { flex-direction: column; gap: 4px; padding: 12px 14px; }
	.ecf-ev-session-row__time {
		flex: 0 0 auto;
		align-self: flex-start;
		background: var(--ecf-bg-soft);
		border-radius: 8px;
		padding: 5px 10px;
		font-size: 0.8rem;
	}
	.ecf-ev-session-row__title { font-size: 0.98rem; }
	.ecf-ev-session-row__meta { gap: 4px 14px; font-size: 0.8rem; }

	/* === EVENT DETAIL: hands-on cards ================================================= */
	.ecf-ev-session-card__head { padding: 16px 16px 12px; }
	.ecf-ho-image { margin: 0 16px 14px; }
	.ecf-ev-session-card__bar { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 16px; font-size: 0.9rem; }
	.ecf-ev-session-card__body { padding: 14px 16px 18px; }
	.ecf-ev-person-row { flex-direction: column; gap: 2px; }
	.ecf-ev-person-label { flex: 0 0 auto; }

	/* === EVENT DETAIL: registration band ================================================= */
	.ecf-ev-reg-band { padding: 52px 0; }
	.ecf-ev-reg-band h2 { font-size: 1.55rem; }
	.ecf-ev-reg-band .d-flex.gap-3 { gap: 10px !important; }
	.ecf-ev-reg-band .btn { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }

	/* === EVENT DETAIL: contact cards + similar events ====================================== */
	.ecf-ev-contact-grid { grid-template-columns: 1fr; gap: 16px; }
	.ecf-ev-wa-card { padding: 26px 20px; }
	.ecf-ev-wa-card .btn { width: 100%; }
	.ecf-similar-grid { grid-template-columns: 1fr; gap: 18px; }

	/* === ABSTRACT: CTA buttons full width ==================================================== */
	.ecf-ev-cta-btn { width: 100%; justify-content: flex-start; text-align: left; padding: 14px 20px; font-size: 0.78rem; line-height: 1.4; }
	.ecf-ev-cta-btn i.me-2 { flex: 0 0 auto; }

	/* === ABSTRACT: deadline rows stacked ====================================================== */
	.ecf-ev-deadline-card { padding: 20px 18px; }
	.ecf-ev-deadline-row { display: block; padding: 8px 0; }
	.ecf-ev-deadline-row span { display: block; }
	.ecf-ev-deadline-row span:last-child { margin-top: 2px; font-size: 0.95rem; }

	/* === ABSTRACT: blocks / cards / tables ===================================================== */
	.ecf-ev-block { padding: 22px 16px; border-radius: 16px; margin-bottom: 18px; }
	.ecf-ev-block > h4 { font-size: 1.05rem; margin-bottom: 14px; padding-bottom: 10px; }
	.ecf-ev-style-card { padding: 18px 16px; }
	.ecf-ev-style-card li { font-size: 0.85rem; }
	.ecf-ev-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: normal; }
	.ecf-ev-table th, .ecf-ev-table td { white-space: normal; padding: 10px 12px; font-size: 0.85rem; }
	.ecf-ev-table td a { word-break: break-word; }

	/* === ABSTRACT: alerts / checklists / pills / boxes ========================================== */
	.ecf-ev-alert { padding: 13px 15px; font-size: 0.88rem; }
	.ecf-ev-check-list li { padding: 9px 0 9px 30px; font-size: 0.88rem; }
	.ecf-ev-check-list li i { left: 4px; top: 11px; }
	.ecf-ev-pill { font-size: 0.75rem; padding: 6px 13px; margin: 0 6px 6px 0; }
	.ecf-ev-coi-box, .ecf-ev-contact-box { padding: 18px 16px; }
	.ecf-ev-empty { padding: 40px 18px; }

	/* === SHARED: bigger collapse toggles ("Read More") on touch ================================ */
	.btn-link[data-bs-toggle="collapse"] { padding-top: 6px !important; padding-bottom: 6px !important; }
}

/* ========================================================================
   SMALL PHONES (<= 575px) — final fine-tuning
   ======================================================================== */
@media (max-width: 575.98px) {

	/* Hero */
	.ecf-hero__eyebrow { font-size: 0.63rem; }
	.ecf-hero__title { font-size: 1.9rem; }
	.ecf-hero--event .ecf-hero__title { font-size: 1.5rem; }

	/* "1928" */
	.custom-text-1 { font-size: 4.6rem !important; }

	/* Headings */
	.ecf-ev-section__head h3 { font-size: 1.3rem; }
	.ecf-cta-banner h2 { font-size: 1.45rem; }
	.ecf-contact h2 { font-size: 1.7rem; }
	.ecf-ev-reg-band h2 { font-size: 1.35rem; }

	/* Showcase stats */
	.ecf-showcase__stats { gap: 16px; }
	.ecf-showcase__stats strong { font-size: 1.3rem; }

	/* Fact grid */
	.ecf-ev-detail-grid { gap: 8px; }
	.ecf-ev-detail__value { font-size: 0.8rem; }

	/* Jump-nav pills */
	.ecf-ev-nav a { padding: 7px 12px; font-size: 0.7rem; }

	/* Buttons */
	.ecf-btn { padding: 12px 20px; }
}

/* ========================================================================
   MOBILE-ONLY EXTRAS (hidden on desktop by default, revealed <= 767px)
   - .ecf-mobile-cta  : sticky bottom "Register / Explore" action bar
   - .ecf-mobile-top  : floating scroll-to-top button
   ======================================================================== */
.ecf-mobile-cta,
.ecf-mobile-top { display: none; }

@media (max-width: 767.98px) {

	/* --- Sticky bottom action bar (event detail) -------------------------- */
	.ecf-mobile-cta {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1040;
		gap: 10px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		box-shadow: 0 -8px 24px -12px rgba(11, 35, 64, 0.35);
		transform: translateY(110%);
		transition: transform 0.28s ease;
	}
	.ecf-mobile-cta.is-visible { transform: translateY(0); }
	.ecf-mobile-cta .btn {
		flex: 1 1 auto;
		width: 100%;
		margin: 0;
		padding: 13px 16px;
		font-size: 0.82rem;
		border-radius: 12px;
	}
	.ecf-mobile-cta .btn + .btn { flex: 0 0 auto; width: auto; }
	/* ghost button is white-on-gradient on desktop; give it contrast on the white bar */
	.ecf-mobile-cta .ecf-btn--ghost {
		border-color: var(--ecf-navy, #0B2340);
		color: var(--ecf-navy, #0B2340);
		background: transparent;
		padding: 13px 15px;
	}
	.ecf-mobile-cta .ecf-btn--ghost:hover { background: var(--ecf-navy, #0B2340); color: #fff; }
	body.has-mobile-cta { padding-bottom: 76px; }

	/* --- Scroll-to-top ------------------------------------------------------ */
	.ecf-mobile-top {
		display: inline-flex;
		position: fixed;
		right: 14px;
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
		z-index: 1035;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--ecf-navy, #0B2340);
		color: #fff;
		box-shadow: 0 10px 22px -10px rgba(11, 35, 64, 0.5);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: all 0.25s ease;
		text-decoration: none;
		font-size: 0.9rem;
		-webkit-tap-highlight-color: transparent;
	}
	.ecf-mobile-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

	/* --- Poster / speaker carousels: arrows below the slides ---------------- */
	.ecf-ev-poster-carousel .owl-nav,
	.ecf-ev-speaker-carousel .owl-nav {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin-top: 14px !important;
	}
	.ecf-ev-poster-carousel .owl-nav button,
	.ecf-ev-speaker-carousel .owl-nav button {
		position: static !important;
		transform: none !important;
		width: 42px;
		height: 42px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* --- Info lists / generic tables: never break the page width ------------ */
	.ecf-ev-block table, .ecf-ev-coi-box table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.ecf-ev-block img { max-width: 100%; height: auto; }

	/* --- Long URLs / emails wrap instead of overflowing ---------------------- */
	.ecf-ev-link, .ecf-ev-contact-box a, .ecf-footer a { word-break: break-word; }
}

/* ========================================================================
   LANDING: "1928" HEADLINE — fit phone screens (desktop keeps 10rem)
   Placed LAST so it wins over every earlier rule for the same class.
   ======================================================================== */
@media (max-width: 767.98px) {
	/* Hide the "EDUCATION IN DENTISTRY SINCE / 1928" block entirely on phones */
	.ecf-since-block { display: none !important; }
}

/* ========================================================================
   LANDING: EVENTS CAROUSEL — make "swipeable" obvious on phones
   (dots, prominent arrows below cards, swipe hint). Desktop untouched.
   ======================================================================== */
.ecf-swipe-hint { display: none; }

@media (max-width: 767.98px) {

	/* Swipe hint under the carousel (injected by the mobile JS only) */
	.ecf-swipe-hint {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 14px 0 0;
		font-size: 0.82rem;
		font-weight: 700;
		letter-spacing: 0.3px;
		color: #5a6472;
	}
	.ecf-swipe-hint i { color: var(--ecf-green, #2E9E4F); font-size: 1rem; }

	/* Visible page indicator so "there is more than one event" is obvious */
	.ecf-events-carousel .owl-dots {
		display: block !important;
		margin-top: 12px;
		text-align: center;
		line-height: 0;
	}
	.ecf-events-carousel .owl-dot span {
		width: 10px !important;
		height: 10px !important;
		margin: 0 4px !important;
		background: #C7D2DC !important;
	}
	.ecf-events-carousel .owl-dot.active span { background: var(--ecf-green, #2E9E4F) !important; transform: scale(1.15); }

	/* Big, obvious prev/next buttons right under the cards */
	.ecf-events-carousel .owl-nav button.owl-prev,
	.ecf-events-carousel .owl-nav button.owl-next {
		width: 48px;
		height: 48px;
		border-radius: 50% !important;
		background: var(--ecf-navy, #0B2340) !important;
		color: #fff !important;
		box-shadow: 0 8px 18px -8px rgba(11, 35, 64, 0.55);
		font-size: 1.1rem !important;
	}
	.ecf-events-carousel .owl-nav button.owl-prev:hover,
	.ecf-events-carousel .owl-nav button.owl-next:hover { background: var(--ecf-green, #2E9E4F) !important; }

	/* Card: clearly tappable + slight edge peek of the next card */
	.ecf-event-card { cursor: pointer; }
	.ecf-events-carousel .owl-stage { display: flex; }
	.ecf-events-carousel .owl-item { display: flex; }
	.ecf-events-carousel .owl-item > * { width: 100%; }
}
}