/*
 * Native static page mobile/tablet readability fixes.
 *
 * Owner-approved departures from the live WordPress captures, scoped to the
 * nine static pages (/, /about/, /contact-us/, /destinations/, /faq/,
 * /get-quote/, /recommended-products/, /services/, /thank-you/) by their
 * WordPress page-id body classes. Loaded as the last entry of each static
 * page's headCss array in src/data/native-seo.json.
 *
 * Blog baseline at 390px: body column ~351px, 18px/32.4px body text,
 * h2 32px with 48px/16px margins, lists padded ~40px.
 *
 * General readability fixes apply below 981px. The recommended-products
 * hero and introduction also have page-scoped desktop layout rules.
 */

/* ================================================================
   MOBILE (<=767px) — blog-like readability
   ================================================================ */
@media only screen and (max-width: 767px) {

  /* ---- Body copy: 16px/27.2px -> 17px/1.7em on content text modules ---- */
  body.home .et_pb_text_inner p,
  body.page-id-61 .et_pb_text_inner p,
  body.page-id-63 .et_pb_text_inner p,
  body.page-id-323 .et_pb_toggle_content p,
  body.page-id-67 .et_pb_text_inner p,
  body.page-id-1951 .et_pb_text_inner p,
  body.page-id-394 .et_pb_text_inner p {
    font-size: 17px;
    line-height: 1.7em;
  }

  /* ---- List items: match body copy size/leading ---- */
  body.home .et_pb_text_inner li,
  body.page-id-61 .et_pb_text_inner li,
  body.page-id-63 .et_pb_text_inner li,
  body.page-id-323 .et_pb_toggle_content li,
  body.page-id-67 .et_pb_text_inner li,
  body.page-id-1951 .et_pb_text_inner li,
  body.page-id-394 .et_pb_text_inner li {
    font-size: 17px;
    line-height: 1.7em;
  }

  /* ---- Fix center-aligned bullet lists (services) ----
     The captured Divi markup sets text-align:center on the ul, which
     detaches the bullets from the text. Left-align items and pad the
     list so bullets attach to text, matching how blog lists read. */
  body.page-id-63 .et_pb_text_inner ul {
    text-align: left;
    padding-left: 1.5em;
  }
  body.page-id-63 .et_pb_text_inner ul li {
    text-align: left;
  }

  /* ---- List padding: bullets flush to edge -> 1.5em ---- */
  body.home .et_pb_text_inner ul,
  body.page-id-61 .et_pb_text_inner ul,
  body.page-id-323 .et_pb_toggle_content ul {
    padding-left: 1.5em;
  }

  /* ---- Heading margins: zero -> blog-like rhythm ---- */
  body.home .et_pb_text_inner h2,
  body.page-id-61 .et_pb_text_inner h2,
  body.page-id-63 .et_pb_text_inner h2,
  body.page-id-67 .et_pb_text_inner h2,
  body.page-id-1951 .et_pb_text_inner h2,
  body.page-id-394 .et_pb_text_inner h2 {
    margin-top: 1.2em;
    margin-bottom: 0.5em;
  }

  /* ---- recommended-products: nested 90% rows -> full width ---- */
  body.page-id-1951 .et_pb_row_1,
  body.page-id-1951 .et_pb_row_2 {
    width: 100%;
  }

  /* ---- home hero subtitle: 24px/27.2px -> blog-like 18px/1.7em ---- */
  body.home .et_pb_text_1 p {
    font-size: 18px;
    line-height: 1.7em;
  }

  /* ---- get-quote / thank-you hero h1: 28px/28px -> breathable line-height ---- */
  body.page-id-637 .getquote-banner-head h1,
  body.page-id-1829 .getquote-banner-head h1 {
    line-height: 1.2em;
  }
}

/* ================================================================
   TABLET + MOBILE (<=980px) — layout fixes
   ================================================================ */
@media only screen and (max-width: 980px) {

  /* ---- home airline-logo strip: 1-per-row -> 3-column grid ----
     Divi stacks the six 1/6 columns vertically below 981px, wasting
     the tablet-width row. Flex them into a centered 3-column wrap. */
  body.home .et_pb_row_5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  body.home .et_pb_row_5 .et_pb_column {
    width: 30% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    float: none;
  }

  /* ---- services decorative backgrounds: remove below 981px ----
     The orange/green abstract background images on sections 1-4 use
     background-size:cover. On narrow viewports the art crops hard at the
     viewport edge, producing a "bleeding circle" that reads as a layout
     bug. The section text sits on white regardless — the art is pure
     decoration. Remove it below 981px; keep overflow:hidden as a safety
     clip for any module-level bleed. */
  body.page-id-63 .et_pb_section_1,
  body.page-id-63 .et_pb_section_2,
  body.page-id-63 .et_pb_section_3,
  body.page-id-63 .et_pb_section_4 {
    background-image: none !important;
    overflow: hidden;
  }
}

/* ================================================================
   RECOMMENDED-PRODUCTS PAGE (all viewports)
   ================================================================ */

body.page-id-1951 .et_pb_section_0 .et_pb_row_0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.page-id-1951 .et_pb_section_0 .et_pb_column_0 {
  padding-top: 120px;
  padding-bottom: 120px;
}
body.page-id-1951 .products-banner-head h1 {
  position: relative;
  display: inline-block;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.page-id-1951 .products-banner-head h1:after {
  width: 22px;
  height: 20px;
  content: "";
  position: absolute;
  background: url("https://images.transconpet.com/img/sha256/04b96256cd34d6ffe6bb159c2b91caf04d49d9082e936bb1aae6c6b3d2320b8e.png") no-repeat center;
  top: -10px;
  left: 50%;
}

@media only screen and (max-width: 980px) {
  body.page-id-1951 .products-banner-head {
    text-align: center;
  }
  body.page-id-1951 .et_pb_section_0 .et_pb_column_0 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* ---- Intro section: share the shopping-list section box ----
   Both sections use width 90% / max-width 1024px, with a 90% row that
   expands to 100% below 768px. The intro's old 900px row sat 11px inside
   the list at 1366px and 1920px. Match both section and row boxes. */
body.page-id-1951 .et_pb_section_intro {
  width: 90%;
  max-width: 1024px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 60px;
  padding-bottom: 60px;
}
body.page-id-1951 .et_pb_row_intro {
  width: 90%;
  max-width: none;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media only screen and (max-width: 767px) {
  body.page-id-1951 .et_pb_row_intro {
    width: 100%;
  }
}
body.page-id-1951 .et_pb_text_intro p {
  margin-bottom: 1em;
  font-size: 17px;
  line-height: 1.7;
}

/* ---- Shopping list: preserve the h2/h3 visual hierarchy ----
   The long list title uses 32px/1.2 and category headings use 26px/1.2,
   rather than copying the short 40px services section titles. Leads and
   the disclaimer remain body-size paragraphs. */
body.page-id-1951 .products-shopping-list h2,
body.page-id-1951 .products-shopping-list h3 {
  text-decoration: none;
  line-height: 1.2;
  font-weight: 600;
}
body.page-id-1951 .products-shopping-list h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 32px;
}
body.page-id-1951 .products-shopping-list h3 {
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  font-size: 26px;
}
body.page-id-1951 .products-shopping-list p,
body.page-id-1951 .products-shopping-list li {
  font-size: 17px;
  line-height: 1.7;
}
@media only screen and (max-width: 980px) {
  body.page-id-1951 .products-shopping-list h2 {
    font-size: 28px;
    line-height: 1.2;
  }
  body.page-id-1951 .products-shopping-list h3 {
    font-size: 24px;
    line-height: 1.2;
  }
}
@media only screen and (max-width: 767px) {
  body.page-id-1951 .products-shopping-list h2 {
    font-size: 26px;
  }
  body.page-id-1951 .products-shopping-list h3 {
    font-size: 22px;
    line-height: 1.2;
  }
}

/* ---- Gallery: CSS Grid instead of Divi's percentage float grid ----
   The captured .et_pb_gallery_item elements float at a percentage width
   Divi computes for a 4-column gutter-1 grid, and CSS Grid replaces that
   with an exact column count. Divi has no 4-column rule for its tablet
   breakpoint: the gutter-1 rule drops to width:33.333% while the generic
   rule keeps a 7.5% right margin, so three items plus two margins
   overflow 100% and every row after the first holds only two items.
   Measured on the real page at 834px: a 2+2 grid with a ragged hole
   where the third item should be, and at 390px the 4-per-page grid
   shows as a single column under a pagination control.

   A CSS Grid track list is exact at every width -- the tracks divide the
   row and `gap` IS the gutter, so nothing can overflow and no percentage
   has to sum to 100%. Desktop stays the captured 4-across row at 981px
   and wider. The earlier 3-column tablet track left a 3+1 orphan because
   pagination still shows 4 items; 480–980px is now 2 columns so those 4
   items form a 2×2 group. Below 480px the grid is one column, where a
   two-up portrait tile would be under 160px wide.

   Scoped to body.page-id-1951 (/recommended-products/) exactly like the
   rest of this file. The post gallery in src/pages/[slug].astro carries
   the same class vocabulary but retains its own three-column tablet rule.
   These product-specific tracks do not change that blog presentation. */
body.page-id-1951 .et_pb_gallery_items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
body.page-id-1951 .et_pb_gallery_items .et_pb_gallery_item {
  display: block;
  float: none;
  width: auto;
  margin: 0;
}
@media only screen and (max-width: 980px) and (min-width: 480px) {
  body.page-id-1951 .et_pb_gallery_items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}
@media only screen and (max-width: 479px) {
  body.page-id-1951 .et_pb_gallery_items {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Gallery thumbnails: blog-card curved corners ----
   Match the /blog/ post-card image treatment: 8px radius + overflow
   hidden. The gallery images are already uniform 400x516 portraits,
   so no object-fit crop is needed — the radius is purely cosmetic.
   The radius is set on the wrapper AND the img: the wrapper's own 8px
   only clips what it paints, and the <img> is a stacking child whose
   square corners otherwise sit inside a rounded frame. The img is also
   made a block filling the tile, which is what keeps every corner in
   the grid the same radius instead of leaving inline-image baseline
   slack under the shorter pictures. */
body.page-id-1951 .et_pb_gallery_items .et_pb_gallery_image {
  border-radius: 8px;
  overflow: hidden;
}
body.page-id-1951 .et_pb_gallery_items .et_pb_gallery_image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}