/* Cool Engineering mobile layout fix 1.0.3
 * Fixes Android horizontal clipping of the complete home hero (text + image).
 */
@media (max-width: 820px) {
  /* Do not let the desktop overflow rule cut mobile content. */
  .ce-main {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* The desktop hero is a 2-column grid. On phones use a real one-column
     flex layout so grid min-content sizing cannot make the section wider
     than the visual viewport (seen especially in Android Chromium). */
  .ce-hero {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .ce-hero > .ce-hero-copy,
  .ce-hero > .ce-hero-media {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .ce-hero-copy {
    order: 2 !important;
    padding: 42px 20px 48px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .ce-hero-media {
    order: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    overflow: hidden !important;
  }

  .ce-hero-media .ce-section-photo {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .ce-hero-media::after {
    display: none !important;
  }

  /* Let the heading wrap according to the actual phone width instead of
     forcing the desktop line breaks. */
  .ce-hero-copy .ce-title,
  .ce-hero-copy .ce-lead,
  .ce-hero-copy .ce-eyebrow,
  .ce-hero-copy .ce-hero-tags,
  .ce-hero-copy .ce-btn-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .ce-hero-copy .ce-title br {
    display: none !important;
  }

  .ce-title-xl {
    font-size: clamp(30px, 9.4vw, 38px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .ce-hero-copy .ce-lead,
  .ce-hero-copy .ce-eyebrow,
  .ce-hero-copy .ce-btn,
  .ce-hero-copy strong,
  .ce-hero-copy span {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Tags were adjacent inline spans without whitespace in the HTML. Flex
     wrapping gives Android explicit legal wrap points. */
  .ce-hero-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    line-height: 1.5 !important;
  }
  .ce-hero-tags span {
    display: inline-flex !important;
    min-width: 0 !important;
  }
  .ce-hero-tags span + span::before {
    content: "•" !important;
    margin: 0 9px 0 0 !important;
    flex: 0 0 auto;
  }

  .ce-btn-row {
    max-width: 100% !important;
  }
  .ce-btn {
    max-width: 100% !important;
  }

  /* Other large theme photos: preserve the full image on phones. */
  .ce-split-image,
  .ce-partner-note-image {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background-image: none !important;
    overflow: hidden !important;
  }

  .ce-split-image .ce-section-photo,
  .ce-partner-note-image .ce-section-photo {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Lomé panorama */
  .ce-lome-strip {
    min-height: 0 !important;
    aspect-ratio: 1400 / 420;
    background-image: none !important;
  }
  .ce-lome-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  .ce-lome-strip .ce-wrap { padding-bottom: 18px; }
  .ce-lome-strip strong { font-size: clamp(16px, 5.2vw, 24px); }
  .ce-lome-strip span { font-size: clamp(10px, 3.3vw, 14px); }

  /* Generic safeguards for WordPress blocks. */
  img,
  picture,
  figure,
  .wp-block-image,
  .wp-block-image img {
    max-width: 100% !important;
  }
  img,
  .wp-block-image img { height: auto !important; }
}

@media (max-width: 380px) {
  .ce-hero-copy { padding-left: 16px !important; padding-right: 16px !important; }
  .ce-title-xl { font-size: 30px !important; }
}