/* ==========================================================
   Titan tablet layout - 768px to 980px ONLY
   ----------------------------------------------------------
   WHY THIS FILE EXISTS
   In Divi 5 a phone value that has never been set inherits the
   tablet value. Fixing tablet layout in the builder would
   therefore silently change phone layouts that were already
   signed off. Every rule here sits inside one media query that
   matches Divi's tablet band exactly, so desktop (981px+) and
   phone (767px and below) cannot be affected.

   NO COLOURS. Layout mechanics only. Gaps use the 4px scale
   (16px) and column widths are derived from Divi's own 5.5%
   row gap so spacing matches the rest of the site.

   Added 24 Oct 2026. To roll back, delete this file - the
   loader skips missing files.
   ========================================================== */

@media (min-width: 768px) and (max-width: 980px) {

  /* 1. HEADER - use the phone header on tablet.
     Tablet was showing the white logo/contact row AND the menu
     bar's own logo (two logos), with the three contact blurbs
     crushed into ~110px columns ("ADDRES / S", phone number one
     word per line). Hide that row as phone does and show the
     "Call AP Titan" strip as phone does. Applies to both Theme
     Builder headers (standard + Motor Factors inverted). */
  .et-l--header .et_pb_row_0_tb_header {
    display: none !important;
  }

  .et-l--header .et_pb_section_1_tb_header {
    display: flex !important;
  }

  /* With the top row gone, drop the tablet-only spacing that
     made room for it (30px top padding, -20px pull on the menu
     bar), which otherwise slides the menu bar over the "Call
     AP Titan" strip. Matches the phone values (both 0). */
  .et-l--header .et_pb_section_0_tb_header {
    padding-top: 0 !important;
  }

  .et-l--header .et_pb_row_1_tb_header.et_pb_row {
    margin-bottom: 0 !important;
  }

  /* 2. HERO - stack text above image.
     The 50/50 split left each column ~257px wide, so H1s ran to
     five lines and the image shrank to a thumbnail. Stacking
     matches Meet the Team and the phone layout. Targets the
     Titan hero column preset only. */
  .et_flex_row > .preset--module--divi-column--69deb213-2af0-4bef-9717-ba7c06dbbdaf {
    width: 100%;
  }

  /* 3. SERVICE CARDS (4-across on desktop) - 2 x 2 on tablet.
     They were dropping to one card per row at full width, which
     made each image ~545px wide. Home, Marine, American Imports. */
  .et_flex_row > .preset--module--divi-column--7897258d-0acf-435b-b69a-2e4d8f602017.et_flex_column_24_24_tablet {
    width: calc((100% - 5.5%) / 2);
  }

  /* 4. SERVICE CARDS (3-across on desktop) - keep 3-across.
     Two rows of three were wrapping 2 + 1, leaving an orphan
     card and a hole in each row. Agricultural PTO & Plant. */
  /* At ~160px a card's 20px heading split words mid-word
     ("Replaceme-nt"), so these rows get a 16px gap and the
     cards 16px padding, both on the 4px scale. */
  .et_flex_row:has(> .preset--module--divi-column--7897258d-0acf-435b-b69a-2e4d8f602017.et_flex_column_8_24.et_flex_column_12_24_tablet) {
    column-gap: 16px;
  }

  .et_flex_row > .preset--module--divi-column--7897258d-0acf-435b-b69a-2e4d8f602017.et_flex_column_8_24.et_flex_column_12_24_tablet {
    width: calc((100% - 32px) / 3);
  }

  .et_flex_row > .preset--module--divi-column--7897258d-0acf-435b-b69a-2e4d8f602017.et_flex_column_8_24.et_flex_column_12_24_tablet > .et_pb_text {
    padding: 16px !important;
  }

  /* 5. ICON GRIDS (4-across on desktop) - keep 4-across.
     Vehicle icons (Propshaft Services) and parts icons (Motor
     Factors) were going 2-across, turning an 8-icon block into
     four tall rows. Only columns holding a single blurb, so the
     Motor Factors button row is untouched. */
  .et_flex_row > .et_flex_column_6_24.et_flex_column_12_24_tablet:has(> .et_pb_blurb:only-child) {
    width: calc((100% - 16.5%) / 4);
  }

  /* 5b. BUTTON GRID (Motor Factors "View our..." links).
     On tablet these go 2 x 2, but each button kept its own
     width, so the grid looked ragged and long labels wrapped
     inside narrow buttons. Fill the column so all four match,
     the same equal-width look the desktop row has. */
  .et_flex_row > .et_flex_column_6_24.et_flex_column_12_24_tablet:has(> .et_pb_button_module_wrapper:only-child) > .et_pb_button_module_wrapper {
    height: 100%;
  }

  .et_flex_row > .et_flex_column_6_24.et_flex_column_12_24_tablet:has(> .et_pb_button_module_wrapper:only-child) .et_pb_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  /* 6. BUTTON ROWS - keep buttons on one line where they fit.
     Divi's legacy thirds stack below 981px, so every "Call /
     Enquiry / Visit" row became three full-width rows of one
     small button each. Only rows whose columns contain nothing
     but a button are touched. */
  .et_block_row:has(.et_pb_button_module_wrapper):not(:has(> .et_pb_column > :not(.et_pb_button_module_wrapper))) {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .et_block_row:has(.et_pb_button_module_wrapper):not(:has(> .et_pb_column > :not(.et_pb_button_module_wrapper))) > .et_pb_column {
    width: auto !important;
    margin: 0 !important;
  }

  /* 7. CONTACT MAP - 1000px tall once stacked under nothing.
     Cap it so the enquiry form is reachable without a long
     scroll past an empty map. */
  .et_pb_code iframe[src*="google.com/maps"] {
    height: 480px;
  }

  /* 8. FOOTER "GET IN TOUCH" - blurbs were centred in a 550px
     box inside the full-width column, so the email, phone,
     address and hours sat indented from their heading. */
  .et-l--footer .et_pb_blurb .et_pb_blurb_content {
    margin-left: 0;
  }
}


/* ==========================================================
   Landscape tablet / small laptop - 981px to 1199px
   ----------------------------------------------------------
   Divi treats 981px+ as desktop, so an iPad in landscape gets
   the 4-across service cards at ~140-170px wide. The 20px card
   title then has ~90-110px to sit in and words split mid-word
   ("Commerci / al", "Agricultur / al"). Words only fit from
   ~1180px, so this band carries the tablet 2 x 2 layout up to
   1199px. Same preset, same 5.5% gap as rule 3 above.
   Home, Marine, American Imports. Layout only, no colours.
   Added 26 Oct 2026. Roll back by deleting this block.
   ========================================================== */

@media (min-width: 981px) and (max-width: 1199px) {

  .et_flex_row:has(> .preset--module--divi-column--7897258d-0acf-435b-b69a-2e4d8f602017.et_flex_column_24_24) {
    flex-wrap: wrap;
  }

  .et_flex_row > .preset--module--divi-column--7897258d-0acf-435b-b69a-2e4d8f602017.et_flex_column_24_24 {
    width: calc((100% - 5.5%) / 2);
    flex: 0 0 auto;
  }

  /* 10. HERO - stack text above image (added 26 Oct 2026).
     Divi treats 981px+ as desktop, so landscape tablets got the
     50/50 split: H1 on four lines, image squeezed into half the
     row. Same stack as rule 2 at 768-980px. Hero column preset
     69deb213 only. From 1200px the desktop split is unchanged. */
  .et_flex_row:has(> .preset--module--divi-column--69deb213-2af0-4bef-9717-ba7c06dbbdaf) {
    flex-wrap: wrap;
  }

  .et_flex_row > .preset--module--divi-column--69deb213-2af0-4bef-9717-ba7c06dbbdaf {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0; /* Contact hero columns carry a 480px desktop min-height; stacked, it left a ~290px gap under the buttons */
  }

  /* 11. MEET THE TEAM HERO (added 26 Oct 2026).
     Built as a Divi block row (floated 1/2 columns) without the hero
     column preset, so rule 10 misses it. Stack it the same way Divi
     does below 981px: full width, 30px under the text. Scoped to the
     block row holding the page H1 on the hero row preset 9d15c034. */
  .et_block_row.preset--module--divi-row--9d15c034-64f8-4e3c-b8ab-18b37cb450fa:has(h1) > .et_pb_column_1_2 {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .et_block_row.preset--module--divi-row--9d15c034-64f8-4e3c-b8ab-18b37cb450fa:has(h1) > .et_pb_column_1_2.et-last-child {
    margin-bottom: 0;
  }
}

/* ==========================================================
   12. PHONE + TABLET - footer copyright clear of Back To Top (added 26 Oct 2026).
   The legal line (registered name, number, office) is long enough
   to run under Divi's fixed 40px Back To Top tab at the right edge.
   Symmetric 32px side padding keeps the centred text clear.
   Targets the footer text module holding the BeBa credit link.
   ========================================================== */

@media (max-width: 980px) {
  .et-l--footer .et_pb_text:has(a[href*="beba-group.co.uk"]) {
    padding-left: 32px;
    padding-right: 32px;
  }
}