/* ============================================================================
 * assets/css/responsive.css — v203600 responsive layer (every page, loads last).
 * ----------------------------------------------------------------------------
 * Breakpoints used across the theme:
 *   ≤ 380   small phones        ≤ 640   phones
 *   ≤ 1023  tablets — the header uses the menu button and panel
 *   ≥ 1024  laptops/desktops — full navigation bar
 *   ≥ 1600  large screens
 * ==========================================================================*/

/* ── Media never wider than its column ─────────────────────────────────── */
body.ogx img, body.ogx video, body.ogx iframe, body.ogx embed, body.ogx object, body.ogx svg:not(.oga-icon) { max-width: 100%; }
body.ogx img, body.ogx video { height: auto; }
body.ogx .ogx-main iframe { width: 100%; }
body.ogx .ogx-main :where(h1, h2, h3, p, li, a, td) { overflow-wrap: break-word; }
body.ogx .ogx-main :where(.entry-content, .oga-single__content) table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.ogx .ogx-main pre { max-width: 100%; overflow-x: auto; }

/* ── Header: menu panel on phones and tablets (≤ 1023px) ───────────────── */
@media (max-width: 1023px) {
	/* Dropdown buttons line up with the plain links (same padding, icon, gap). */
	.ogx-header .oga-pages-bar .oga-nav > ul > li:not(.oga-pages-bar__item--contact) > a,
	body .ogx-header .ogx-dd__btn { height: 52px; padding: 0 14px !important; gap: 12px !important; font-size: 16px !important; border-radius: var(--oga-radius-md, 8px); }
	.ogx-header .oga-pages-bar .oga-nav .oga-pages-bar__label { margin: 0 !important; padding: 0 !important; background: none !important; }
	.ogx-header .oga-pages-bar .oga-nav > ul > li > a:hover,
	body .ogx-header .ogx-dd__btn:hover { background: var(--oga-mist, #f6f8fa); }
	body .ogx-header .ogx-dd__btn .oga-pages-bar__icon { width: 20px; height: 20px; }
	.ogx-header .ogx-dd.is-current .ogx-dd__btn::before { display: none; }
	.ogx-header .oga-pages-bar .oga-nav > ul > li > a::before { display: none; }
	.ogx-header .oga-pages-bar .oga-nav > ul > li.is-current > a,
	.ogx-header .ogx-dd.is-current > .ogx-dd__btn { background: var(--oga-mist, #f6f8fa); color: var(--oga-navy) !important; font-weight: 600; }
	.ogx-header .oga-pages-bar .oga-nav > ul > li.is-current .oga-pages-bar__icon,
	.ogx-header .ogx-dd.is-current .oga-pages-bar__icon { color: var(--oga-navy); }
	.ogx-dd__menu { padding: 0 0 8px 46px; }
	/* Top row: logo · search · Ask OGAICE · menu button always fit. */
	.ogx-header__row { gap: 12px; }
	.ogx-cmd--header { flex: 1 1 180px; min-width: 0; }
	.ogx-header__actions { flex: 0 0 auto; }
	/* The panel can be taller than the screen. */
	.ogx-header .oga-pages-bar .oga-nav.is-open { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
}
/* ── Filter chips (destinations, regions, categories): wrap, never stack ─ */
@media (max-width: 640px) {
	body.ogx .oga-chip-grid { display: flex !important; flex-wrap: wrap; gap: 8px; grid-template-columns: none; }
	body.ogx .oga-chip { flex: 0 1 auto; width: auto; max-width: 100%; min-height: 40px; padding: 6px 14px; border-radius: 999px; font-size: 14.5px; white-space: normal; line-height: 1.3; box-sizing: border-box; }
	body.ogx .oga-market__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Promotion packages: white text on the coloured cards ──────────────── */
body.ogx .oga-promo-pack__card,
body.ogx .oga-promo-pack__card :where(h2, h3, h4, p, li, span, strong) { color: #fff; }
body.ogx .oga-promo-pack__card h3.oga-promo-pack__title { color: #fff !important; }
body.ogx .oga-promo-pack__card :where(p, li) { color: rgba(255, 255, 255, .86); }

/* The full-width package card reads like the others: icon, title, text, steps. */
body.ogx .oga-promo-pack__card--flagship { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; padding: 24px; }
body.ogx .oga-promo-pack__card--flagship > * { flex: 0 0 auto; }
body.ogx .oga-promo-pack__card--flagship .oga-promo-pack__num { position: absolute; top: 14px; right: 18px; }
body.ogx .oga-promo-pack__card--flagship .oga-promo-pack__audience { max-width: 60ch; margin-bottom: 14px; }

/* ── Forms: 16px inputs so phones do not zoom in on focus ──────────────── */
@media (max-width: 640px) {
	body.ogx :where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) { font-size: 16px; }
}

/* ── Footer columns ────────────────────────────────────────────────────── */
@media (min-width: 961px) {
	.ogfx__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 960px) {
	.ogfx__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Small phones ──────────────────────────────────────────────────────── */
@media (max-width: 380px) {
	:root { --ogx-gutter: 14px; }
	body.ogx .oga-market__grid { grid-template-columns: minmax(0, 1fr); }
	body.ogx .ogx-main h1 { font-size: clamp(24px, 7.4vw, 28px); }
	.ogx-header .ogx-ask { padding-inline: 10px; }
}

/* ── Large screens ─────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
	:root { --ogx-container: 1280px; }
}

/* ── Touch devices: no hover lift that sticks after a tap ──────────────── */
@media (hover: none) {
	body.ogx .ogh a.ogh-interest:hover,
	body.ogx .oga-promo-pack__card:hover { transform: none; }
}