/* Sections with two photo columns and one text column: from 769px to 1279px the three columns sat side by
   side and squeezed the text into a narrow strip. There, put the two photos side by side on top and the
   text full width underneath. The photos are background images with no height of their own, so give
   their columns one. */
@media (min-width: 769px) and (max-width: 1279px) {
  [data-photo-text-row] { flex-wrap: wrap !important; }
  [data-photo-text-row] > [data-photo-col] { order: 0; width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; min-height: clamp(320px, 50vw, 560px); }
  [data-photo-text-row] > [data-text-col] { order: 1; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  /* Photo / text / photo sections (bathroom, whole-house "Designed Specifically For You"): first photo with
     the text beside it, second photo full width underneath */
  [data-photo-text-row]:has(> [data-text-col]:nth-child(2)) > [data-photo-col]:first-child { order: 0; }
  [data-photo-text-row]:has(> [data-text-col]:nth-child(2)) > [data-text-col] { order: 1; width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; display: flex; flex-direction: column; justify-content: center; }
  [data-photo-text-row]:has(> [data-text-col]:nth-child(2)) > [data-photo-col]:last-child { order: 2; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; min-height: clamp(320px, 45vw, 520px); }
  /* Two-column sections that read better as one column here: kitchen remodeling process steps; whole-house
     "Looking For a Professional Contractor" text; home additions "The Process of Building Home Additions"
     (heading and photos, then the steps); whole-house services and "Our Unique Process" (photo on top,
     text underneath); Tributer Bay "The Cutalong Lifestyle" (text, then video) and "Custom Homes Designed for the Cutalong
     Lifestyle" (photo on top) */
  [data-stack-tablet] { flex-wrap: wrap !important; }
  [data-stack-tablet] > * { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  /* a stacked background photo (whole-house services and "Our Unique Process"; home additions "Is Your Current
     Home Not Working For You?" and "Second-Story Home Addition"
     and "Master Bedroom Addition") goes first, with a height of its own */
  [data-stack-tablet] > [data-photo-col] { order: -1; min-height: clamp(320px, 45vw, 520px); }
  /* stacked media (Tributer Bay "The Cutalong Lifestyle" video, "Building in a Premier Lake Anna Community"
     photos) goes after the text, as on phones. A video is shown at 16:9 rather than the square box the theme
     gives it, which would be taller than the screen at full width */
  [data-stack-tablet] > [data-media-col] { order: 1; }
  [data-stack-tablet] > [data-media-col] :has(> iframe) { aspect-ratio: 16 / 9 !important; height: auto !important; }
  [data-stack-tablet] > [data-media-col] iframe { width: 100%; height: 100% !important; }
  /* sections with no bottom padding here (Tributer Bay "Custom Homes Designed for the Cutalong Lifestyle"):
     90px, as from 1280px */
  [data-pad-bottom-tablet] { padding-bottom: 90px !important; }
  /* Three columns where the last one moves to its own full-width row (Fine Details "We Aren't Just Building
     a House": heading and first text side by side, second text underneath) */
  [data-wrap-last-tablet] { flex-wrap: wrap !important; }
  [data-wrap-last-tablet] > :not(:last-child) { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; }
  [data-wrap-last-tablet] > :last-child { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}

/* Heading beside paragraph, "Our Previous ... Remodeling Projects" and "About Spartan Homes" (Bathroom, Kitchen,
   Whole House): heading column 40%, paragraph 60% */
@media (min-width: 769px) and (max-width: 1279px) {
  [data-split-40-60-tablet] { flex-wrap: nowrap !important; }
  [data-split-40-60-tablet] > :first-child { width: 40% !important; max-width: 40% !important; flex: 0 0 40% !important; }
  [data-split-40-60-tablet] > :last-child { width: 60% !important; max-width: 60% !important; flex: 0 0 60% !important; }
}

/* Standard Features "Links" sidebar: hidden from 769px to 1279px so "All Standard Features" uses the full width,
   as on phones (the original already hides the column up to 768px). This also hides the box the capture had
   frozen in Elementor's sticky state (position: fixed; top: 100px) on top of the page at 601-1025px. */
@media (min-width: 769px) and (max-width: 1279px) {
  [data-hide-tablet] { display: none !important; }
  [data-full-tablet] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}

/* Four boxes in one row were only 190-260px wide from 769px to 1024px (Custom Homes "House Plans We Offer":
   Lifestyle / Frank Betz / Don Gardner / Custom Plans). Show them as two rows of two there. */
@media (min-width: 769px) and (max-width: 1024px) {
  [data-grid-2x2-tablet] { flex-wrap: wrap !important; row-gap: 40px; }
  [data-grid-2x2-tablet] > * { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; }
}

/* Homepage service cards (Kitchen / Bathroom / Whole-House; Second-Story / Master Bedroom / Guest Suite): three
   narrow cards in a row from 769px. Show two per row there, the third underneath on the left. */
@media (min-width: 769px) and (max-width: 1279px) {
  [data-cards-2col-tablet] { flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: 20px; }
  [data-cards-2col-tablet] > * { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; }
}

/* Intro column followed by cards (Why Hire Spartan "What Sets Us Apart"): intro full width on top, cards two per row */
@media (min-width: 769px) and (max-width: 1279px) {
  [data-intro-cards-tablet] { flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: 20px; }
  [data-intro-cards-tablet] > :first-child { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  [data-intro-cards-tablet] > :not(:first-child) { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; }
  /* a captured rule caps their container at 420px up to ~779px */
  :has(> [data-intro-cards-tablet]), :has(> [data-cards-2col-tablet]) { max-width: none !important; }
}