/* ==========================================================
   Travel Route 24 Core — Responsive
   Breakpoint adjustments. Loaded last so it can override the
   component defaults.

   Breakpoints:
     Tablet  : max-width 1024px
     Mobile  : max-width 767px
========================================================== */

/* ===========================
   Tablet
=========================== */

@media (max-width: 1024px) {

	.columns-3,
	.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.tr24-grid-3,
	.tr24-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.tr24-feature-grid.layout-grid.columns-3 .tr24-feature-grid__list,
	.tr24-feature-grid.layout-grid.columns-4 .tr24-feature-grid__list,
	.tr24-feature-grid.layout-grid.columns-5 .tr24-feature-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* ===========================
   Mobile
=========================== */

@media (max-width: 767px) {

	.columns-2,
	.columns-3,
	.columns-4 {
		grid-template-columns: 1fr;
	}

	.tr24-grid-2,
	.tr24-grid-3,
	.tr24-grid-4 {
		grid-template-columns: 1fr;
	}

	.tr24-business-card__header {
		flex-direction: column;
		text-align: center;
	}

	.tr24-business-card__buttons {
		justify-content: center;
	}

	.tr24-booking-methods__list {
		grid-template-columns: 1fr;
	}

	.tr24-contact-card__actions,
	.tr24-map__actions {
		flex-direction: column;
	}

	.tr24-contact-card__actions .tr24-btn,
	.tr24-map__actions .tr24-btn {
		width: 100%;
	}

	.tr24-lightbox {
		padding: 12px;
		gap: 6px;
	}

	.tr24-lightbox__nav {
		width: 40px;
		height: 40px;
	}

	.tr24-feature-grid.layout-grid .tr24-feature-grid__list {
		grid-template-columns: 1fr;
	}

	.tr24-hero {
		min-height: 340px;
	}

	.tr24-hero__overlay {
		padding: 24px;
	}

	.tr24-hero__title {
		font-size: 28px;
	}

	.tr24-hero__actions {
		gap: 8px;
	}

}