/* ==========================================================================
   responsive.css — every @media block for the theme

   Base (desktop-first) rules live in style.css. This file holds nothing but
   breakpoint overrides, and is enqueued from functions.php with style.css as a
   declared dependency, so it always loads second and its rules win.

   Blocks are ordered widest breakpoint first (1180 → 991 → 980 → 767 → 600).
   That matters: 991 and 980 both apply below 980px, as do 767 and 600 below
   600px, so the narrower block has to come last to take precedence. No
   selector is currently duplicated across two breakpoints, but keep the order
   if you add rules.

   Breakpoints in use:
     1180px  post grid 3 → 2 columns
      991px  enquiry form 3 → 2 columns
      980px  content/sidebar layout collapses to one column
      767px  enquiry form → single column
      600px  phones: type scale down, cards full width
   ========================================================================== */

/* ==========================================================================
   1180px — post grid drops a column
   ========================================================================== */

@media (max-width: 1180px) {

	.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blog-card--wide .blog-card-title { font-size: 1.35rem; }

}

/* ==========================================================================
   991px — enquiry form drops to two columns
   ========================================================================== */

@media (max-width: 991px) {

	.travel-form .formwrapper { grid-template-columns: repeat(2, 1fr); }

}

/* ==========================================================================
   980px — sidebar moves below the content
   ========================================================================== */

@media (max-width: 980px) {

	/* Banner */
	.crystal-banner { padding: 24px 20px; }
	.crystal-banner:has(.crystal-banner-heading) { padding: 56px 20px; }
	.crystal-banner-heading { font-size: 32px; line-height: 42px; }

	/* Listings */
	.blog-layout { grid-template-columns: 1fr; gap: 34px; }
	.blog-sidebar { position: static; }
	.custom-blog-template .blog-container { padding: 36px 20px; }

	/* Single post */
	.crystal-single .blog-container { padding: 30px 20px 0; }

}

/* ==========================================================================
   767px — enquiry form to a single column
   ========================================================================== */

@media (max-width: 767px) {

	.travel-form { padding: 24px 18px; }
	.travel-form h2 {
		font-size: 23px;
		line-height: 32px;
		margin-bottom: 24px;
	}
	.travel-form .formwrapper {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.travel-form .space-y { padding: 20px 18px; }
	.travel-form .space-y h3 {
		font-size: 18px;
		line-height: 26px;
		margin-bottom: 18px;
	}
	/* On one column the full destination list would push the button far down. */
	.travel-form .space-y .grid { max-height: 260px; }
	.travel-form .btnwrapper { margin-top: 26px; }
	.travel-form .submit-form { width: 100%; }

}

/* ==========================================================================
   600px — phones
   ========================================================================== */

@media (max-width: 600px) {

	/* Banner */
	.crystal-banner { padding: 18px; }
	.crystal-banner:has(.crystal-banner-heading) { padding: 38px 18px; }
	.crystal-breadcrumb { font-size: 0.78rem; gap: 6px; }
	.crystal-banner-heading { font-size: 25px; line-height: 34px; }
	.crystal-banner-heading + .crystal-breadcrumb { margin-top: 12px; }
	.crystal-banner-sub { font-size: 0.9rem; margin-top: 12px; }

	/* Listings */
	.blog-grid { grid-template-columns: 1fr; }
	.blog-card--wide .blog-card-thumb { aspect-ratio: 16 / 10; }
	.blog-card--wide .blog-card-body { padding: 20px; }
	.blog-card--wide .blog-card-title { font-size: 1.2rem; }
	.blog-card--wide .blog-card-excerpt { font-size: 0.92rem; }
	.custom-blog-template .blog-container { padding: 28px 16px; }

	/* 404 */
	.crystal-404-card { padding: 34px 22px; }
	.crystal-404-code { font-size: 60px; margin-bottom: 14px; }
	.crystal-404-title { font-size: 21px; line-height: 30px; }
	.crystal-404-text { font-size: 0.94rem; margin-bottom: 22px; }
	.crystal-404-actions { flex-direction: column; }
	.crystal-404-suggest-title { font-size: 19px; line-height: 28px; margin-top: 34px; }

	/* Single post */
	.crystal-single .blog-container { padding: 24px 16px 0; }
	.crystal-single-container { padding: 24px; }
	.crystal-single-title { font-size: 26px; line-height: 36px; }
	/* Same relative spacing as the desktop scale, shifted down one step. */
	.crystal-single-content h1 { font-size: 26px; line-height: 36px; }
	.crystal-single-content h2 { font-size: 22px; line-height: 31px; }
	.crystal-single-content h3 { font-size: 19px; line-height: 28px; }
	.crystal-single-content h4 { font-size: 17px; line-height: 26px; }
	.crystal-single-nav {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.crystal-nav-next {
		grid-column: 1;
		text-align: left;
		align-items: flex-start;
	}

}