/**
 * responsive.css — loads on every page (site-wide nav collapse lives
 * here too). Astro-specific responsive rules are grouped at the
 * bottom and only matter on pages where astro.css is also loaded.
 */

/* ---------------- Header / nav (all pages) ---------------- */
@media (max-width: 900px) {
	.ll-header__toggle {
		display: inline-block;
	}
	.ll-nav {
		display: none;
		width: 100%;
		order: 3;
	}
	.ll-nav.is-open {
		display: block;
	}
	.ll-nav__list,
	.ll-astro-nav__list {
		flex-direction: column;
		gap: 4px;
		padding: 14px 0;
	}
	.ll-header__inner {
		flex-wrap: wrap;
	}
	.ll-header__right {
		margin-left: auto;
	}
}

/* ---------------- Travel homepage ---------------- */
@media (max-width: 900px) {
	.ll-modules-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.ll-modules-grid,
	.ll-content-grid {
		grid-template-columns: 1fr;
	}
}

/* ====================================================
 * Astro module — spec section 19:
 * "Desktop: two-column hero. Tablet: responsive two-column.
 *  Mobile: single column. Order: Heading, Description,
 *  Birth Form, Features."
 * ==================================================== */

/* Tablet: keep two columns but tighten the gap */
@media (max-width: 1080px) {
	.ll-astro-hero__grid {
		gap: 30px;
	}
	.ll-birth-form__row--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile: single column, and re-order so the form appears
   right after the heading/description, ahead of the feature
   chips — done with flex `order` since the grid becomes a
   single-column flow container below. */
@media (max-width: 860px) {
	.ll-astro-hero__grid {
		display: flex;
		flex-direction: column;
	}
	.ll-astro-hero__copy {
		display: flex;
		flex-direction: column;
	}
	.ll-astro-hero__title,
	.ll-astro-hero__sub {
		order: 0;
	}
	.ll-astro-hero__card {
		order: 1;
		margin: 22px 0;
	}
	.ll-astro-features {
		order: 2;
	}
	.ll-astro-badge {
		order: -1;
	}
	/* Baby Names page: birth form right after the heading, then the
	   "already know the nakshatra?" picker, features and links. */
	.ll-names-page .ll-astro-hero__copy {
		display: contents;
	}
	.ll-names-page .ll-names-nakpick {
		order: 2;
		margin-top: 0;
	}
	.ll-names-page .ll-astro-features {
		order: 3;
		margin-top: 18px;
	}
	.ll-names-page .ll-astro-hero__porondam-link {
		order: 4;
	}

	.ll-birth-form__row--3,
	.ll-birth-form__row--2,
	.ll-manual-fields-wrap .manual-fields {
		grid-template-columns: 1fr 1fr;
	}

	.ll-tabs__nav {
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.ll-tabs__btn {
		flex: 0 0 auto;
	}

	.varga-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 480px) {
	.ll-birth-form__row--3,
	.ll-manual-fields-wrap .manual-fields {
		grid-template-columns: 1fr;
	}
}

/* Touch target sizing (spec: "Buttons must be touch-friendly") */
@media (pointer: coarse) {
	.ll-btn,
	.ll-tabs__btn,
	.ll-select-wrap select,
	.ll-field input,
	.ll-place-search {
		min-height: 44px;
	}
}

/* Right-to-left (Arabic) — mirror of the header rule above. */
@media (max-width: 900px) {
	[dir='rtl'] .ll-header__right {
		margin-left: 0;
		margin-right: auto;
	}
}

/* ---------------- Tours / Hotels / Experiences ---------------- */
@media (max-width: 1024px) {
	.ll-travel-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ll-travel-single__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.ll-booking-box {
		position: static;
	}
	/* Booking box first on tablet/phone so price + Book Now are
	   visible without scrolling past the whole itinerary. */
	.ll-travel-single__aside {
		order: -1;
	}
}
@media (max-width: 640px) {
	.ll-travel-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
	.ll-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 14px;
		gap: 10px;
	}
	/* Two compact rows of dropdowns, then price + search full width. */
	.ll-filters__field--price {
		order: 5;
		grid-column: 1 / -1;
	}
	.ll-filters__actions {
		order: 6;
		grid-column: 1 / -1;
	}
	.ll-filters__field label,
	.ll-filters__label {
		margin-bottom: 4px;
		font-size: 11px;
	}
	.ll-travel-split {
		grid-template-columns: minmax(0, 1fr);
	}
	.ll-featured__header {
		flex-direction: column;
		align-items: flex-start;
	}
	.ll-travel-hero.has-image {
		padding-top: 110px;
	}
	.ll-travel-archive__header {
		padding: 40px 0 34px;
	}
}

/* ---------------- Homepage photo hero (phones) ---------------- */
@media (max-width: 640px) {
	.ll-hero-travel {
		min-height: 560px;
		align-items: flex-end;
		padding: 120px 0 44px;
	}
	/* Keep Sigiriya + the traveller in frame on a tall, narrow screen. */
	.ll-hero-travel__img {
		object-position: 60% center;
	}
	.ll-hero-travel::after {
		background: linear-gradient(0deg, rgba(11, 20, 36, 0.92) 0%, rgba(11, 20, 36, 0.6) 45%, rgba(11, 20, 36, 0.1) 80%);
	}
	.ll-hero-travel__sub {
		font-size: 16px;
	}
}