/* =====================================================
   HOME – PAGE MARKETING
   File: public/assets/css/home-page-marketing.css
   CLEAN + CONSOLIDATED (REPLACE ENTIRE FILE)
   ===================================================== */


/* =====================================================
   DESKTOP ONLY — Home Marketing
   Scope: ≥1200px ONLY
   ===================================================== */
@media (min-width: 1200px) {

  section.home-marketing .content-2images p {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  .home-section-heading {
    font-size: 32px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  .home-section-subheading {
    font-size: 18px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: #555 !important;
  }

  .home-benefit-title {
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  section.home-marketing .content-image h2,
  section.home-marketing .container-image .content-image>h2 {
    font-size: 32px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
  }

  section.home-marketing .content-3images.col-md-4 p:last-of-type {
    margin-bottom: 0 !important;
  }

  section.home-marketing .h2heading,
  section.home-marketing .h2heading.row {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }



  section.home-marketing .home-final-cta a.home-hero-cta,
  section.home-marketing .home-final-cta .home-hero-cta {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;

    padding-left: 48px !important;
    padding-right: 48px !important;

    min-width: 320px !important;
    /* CHANGE THIS: 260–360 */
    justify-content: center !important;
    align-items: center !important;
  }

  /* =====================================================
     DESKTOP (≥1200px) — Final CTA layout + spacing
     ===================================================== */
  section.home-marketing .home-final-cta {
    text-align: center !important;
    /* centers inline/inline-flex button */
    margin-top: 36px !important;
    /* CONTROL: 24–48 */
  }

  /* =====================================================
     DESKTOP (≥1200px) — Reduce bottom gap under 3-images block
     Affects space before "Why Online Dating with Netthub Works?"
     ===================================================== */
  section.home-marketing .container-3images.row {
    margin-bottom: 24px !important;
    /* was ~80px via Bootstrap */
    padding-bottom: 0 !important;
  }

  /* =====================================================
     DESKTOP (≥1200px) — Add spacing under 3-cards block
     Section: Start Your Journey Today
     ===================================================== */
  section.home-marketing .container-3images.row {
    margin-bottom: 70px !important;
    /* adjust 24–40 if needed */
  }

}


/* =====================================================
   FIX — Remove forced paragraph heights (≤1400px)
   ===================================================== */
@media (max-width: 1400px) {
  section.home-marketing .content-3images p {
    height: auto !important;
    min-height: 0 !important;
  }
}


/* =====================================================
   736px DEVTOOLS FIX WINDOW (735px–737px)
   ===================================================== */
@media (min-width: 735px) and (max-width: 737px) {

  section.home-marketing .container-1image.row {
    flex-direction: column !important;
  }

  section.home-marketing .container-1image.row>img.col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  section.home-marketing .container-1image.row>.content-1image {
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }

  section.home-marketing .container-1image.row>.content-1image>h2 {
    white-space: nowrap !important;
    font-size: 32px !important;
    margin-bottom: 14px !important;
  }

  section.home-marketing .container-1image.row>.content-1image>p {
    margin-bottom: 16px !important;
  }

  section.home-marketing .container-1image.row>.content-1image>p:last-of-type {
    margin-bottom: 0 !important;
  }

  section.home-new-layout .home-section-heading,
  section.home-new-layout .home-section-subheading,
  section.home-marketing .home-benefit-title {
    text-align: left !important;
  }

  section.home-new-layout .home-section-subheading {
    font-size: 18px !important;
  }

  section.home-new-layout h3.home-benefit-title {
    font-size: 20px !important;
  }

  section.home-new-layout p.home-benefit-text {
    font-size: 17px !important;
  }
}


/* =====================================================
   736px ONLY — container-1bimage alignment
   ===================================================== */
@media (min-width: 736px) and (max-width: 736px) {

  section.home-marketing .container-1bimage.row {
    justify-content: flex-start !important;
  }

  section.home-marketing .container-1bimage .content-1bimage {
    width: 100% !important;
    padding-left: 0 !important;
    text-align: left !important;
  }
}


/* =====================================================
   TABLET PORTRAIT — SINGLE SOURCE OF TRUTH
   Scope: 768–1024px ONLY
   File: public/assets/css/home-page-marketing.css
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* GLOBAL RESET (tablet) */
  section.home-marketing {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Paragraph spacing (tablet) */
  section.home-marketing p {
    margin-bottom: 12px !important;
  }

  /* Discover Love paragraph control */
  section.home-marketing .container-image .content-image>p {
    font-size: 17px !important;
  }

  /* remove empty <p></p> */
  section.home-marketing .container-image .content-image>p:empty {
    display: none !important;
  }

  /* INTRO PARAGRAPH (NORMAL TEXT + SPACING) */
  section.home-marketing .container-image .content-image>p:first-of-type {
    margin-bottom: 16px !important;
    position: static !important;
    color: inherit !important;
  }

  /* "Why Netthub Is Different" */
  section.home-new-layout h2.home-section-heading {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  section.home-new-layout p.home-section-subheading {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  section.home-new-layout h3,
  section.home-new-layout .home-benefit-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  section.home-new-layout .home-benefit-title {
    max-width: 220px !important;
    line-height: 1.25 !important;
  }

  section.home-new-layout .home-benefit-row h3.home-benefit-title {
    display: block !important;
    max-width: 150px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }

  /* Misc bold */
  .home-pg-relation_type p,
  .radio-heading {
    font-weight: 700 !important;
  }

  section.home-marketing h1 {
    font-size: 40px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  /* "Start Your Journey Today" */
  section.home-marketing .h2heading.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  section.home-marketing .h2heading.row>h2 {
    font-size: 32px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 20px 0 1px 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  section.home-marketing .h2heading.row>p {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
  }

  /* remove bottom margin after helper text */
  section.home-marketing .h2heading>p.mb-0.p-0 {
    margin-bottom: 0 !important;
  }

  /* 3 CARDS (images + headings + text) */
  section.home-marketing .container-3images {
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
  }

  section.home-marketing .content-3images {
    text-align: left !important;
  }

  section.home-marketing .content-3images img {
    display: block !important;
    margin-bottom: 16px !important;
  }

  /* FORCE ALL marketing H3 to 22px */
  section.home-marketing .container-2images h3,
  section.home-marketing .content-2images h3,
  section.home-marketing .container-3images h3,
  section.home-marketing .content-3images h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  section.home-marketing .content-3images p {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  /* Force 3-line wrap on card 3 heading only */
  section.home-marketing .container-3images .content-3images:nth-child(3) h3 {
    max-width: 190px !important;
  }

  /* reduce gap above "Discover Love" */
  section.home-new-layout {
    padding-bottom: 1px !important;
  }

  /* reduce large gap under 2-images section (ROW element) */
  section.home-marketing .container-2images.row {
    margin-bottom: 30px !important;
    padding-bottom: 0 !important;
  }

  /* container-1bimage — force 2-column layout */
  section.home-marketing>.container-fluid {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  section.home-marketing .container-1bimage.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 30px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  section.home-marketing .container-1bimage.row>img {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    display: block !important;
    height: auto !important;
    margin: 0 !important;
  }

  section.home-marketing .container-1bimage.row>.content-1bimage {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 24px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  section.home-marketing .container-1bimage .content-1bimage {
    max-width: none !important;
  }

  /* HARD RESET container-1image spacing */
  section.home-marketing .container-1image {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  section.home-marketing .container-1image.row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* reduce huge gap after content-2images column */
  section.home-marketing .content-2images.col-md-5 {
    margin-bottom: 10px !important;
  }

  /* reduce benefit text margin-bottom */
  section.home-new-layout .home-benefit-text {
    margin-bottom: 4px !important;
  }

  /* reduce mb-0 paragraphs (Bootstrap utility) */
  section.home-marketing .content-3images p.mb-0 {
    margin-bottom: 10px !important;
  }

  /* force margin for ALL paragraphs in 3-images cards */
  section.home-marketing .container-3images .content-3images p,
  section.home-marketing .container-3images .content-3images p.mb-0,
  section.home-marketing .container-3images .content-3images p.mb-2 {
    margin-bottom: 5px !important;
  }

  /* force 2-line wrap on headings in 2-images section */
  section.home-marketing .container-2images .content-2images.col-md-5 h3 {
    max-width: 260px !important;
    width: 260px !important;
    white-space: normal !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* reduce H2 size under image */
  section.home-marketing .container-1bimage h2 {
    font-size: 32px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  /* final CTA spacing (tighter) */
  section.home-marketing .home-final-cta {
    margin-top: 12px !important;
  }

  /* make final CTA button narrower */
  section.home-marketing .home-hero-cta {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
    min-width: 260px !important;
  }

  /* FINAL CTA TEXT (LEFT ALIGNED) */
  section.home-marketing .home-final-cta-text {
    text-align: left !important;
    margin-left: 34px !important;
    margin-right: 0 !important;
    margin-bottom: 6px !important;
  }

}


/* =====================================================
   MOBILE (<=480px) — Home Page Marketing
   Single source of truth for mobile overrides
   File: public/assets/css/home-page-marketing.css
   ===================================================== */
@media (max-width: 480px) {

  /* Reduce benefit paragraph spacing */
  section.home-new-layout .home-benefit-text {
    margin-top: 0 !important;
    margin-bottom: 1px !important;
    font-size: 16px !important;
  }

  /* Reduce benefit ROW bottom spacing (override Bootstrap mb-5) */
  section.home-new-layout .home-benefit-row.mb-5 {
    margin-bottom: 10px !important;
  }

  /* Left align section subheading text */
  section.home-new-layout p.home-section-subheading {
    text-align: left !important;
    font-size: 17px !important;
    margin-top: 8px !important;
  }

  /* Section headings (H2): left + bold + correct size */
  section.home-new-layout .home-section-heading {
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  /* Feature headings (H3) */
  section.home-new-layout h3,
  section.home-marketing h3,
  .home-benefit-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    text-align: left !important;
    margin: 0 0 6px 0 !important;
  }

  /* Secondary H2 (inside marketing content-image) */
  section.home-marketing .content-image h2 {
    font-size: 28px !important;
    margin: 0 0 10px 0 !important;
  }

  /* Image text section heading: "Lasting relationship with Netthub" */
  section.home-marketing .content-1bimage h2,
  section.home-marketing .content-2images h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    text-align: left !important;
    margin: 0 0 10px 0 !important;
  }

  /* Bullet list text */
  section.home-marketing .marketing-bullet-list span {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Netthub: Where Love Begins (3 images) */
  section.home-marketing .container-3images>.content-3images {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  section.home-marketing .container-3images h3,
  section.home-marketing .container-3images p {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    width: 100% !important;
  }

  /* Force left alignment everywhere */
  section.home-new-layout .text-center,
  section.home-marketing .text-center {
    text-align: left !important;
  }

  /* ONE gutter system for BOTH blocks */
  section.home-marketing .container-image.row {
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  section.home-marketing .container-image.row>.content-image {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  section.home-marketing .container-image.row>.content-image>h2,
  section.home-marketing .container-image.row>.content-image>p {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
  }

  /* Start Your Journey row */
  section.home-marketing .h2heading.row {
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    text-align: left !important;
  }

  section.home-marketing .h2heading.row>h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
  }

  section.home-marketing .h2heading.row>p {
    margin: 0 0 14px 0 !important;
    margin-left: 20px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  section.home-marketing .h2heading p:last-of-type {
    margin-bottom: 2px !important;
  }

  /* container-1bimage layout (stack) */
  section.home-marketing .container-1bimage.row {
    justify-content: unset !important;
    margin-top: 1px !important;
    flex-direction: column !important;
  }

  /* reduce huge bottom spacing under container-2images */
  section.home-marketing .container-2images {
    padding-bottom: 50px !important;
  }

  /* Marketing paragraphs font size + spacing (mobile) */
  section.home-marketing p {
    font-size: 17px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
    /* overrides Bootstrap reboot 1rem */
  }

  /* Reduce gap after "Could you be our next success story?" ONLY */
  section.home-marketing-section .content-image p:last-of-type {
    margin-bottom: 6px !important;
  }

  /* GAP between IMAGE and FOLLOWING TEXT (3-images) */
  section.home-marketing .content-3images img {
    display: block !important;
    margin-bottom: 16px !important;
  }

  /* Center align final CTA text */
  section.home-marketing .home-final-cta-text {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 16px !important;
  }

  /* Push heading left only: "How Netthub Makes Dating Easier?" */
  section.home-marketing .content-2images h3 {
    margin-left: -12px !important;
  }

  section.home-marketing .content-2images p+p {
    margin-top: 12px !important;
  }

  /* Add margin after paragraph (text → image gap) */
  section.home-marketing .content-3images p:last-of-type {
    margin-bottom: 10px !important;
  }

  section.home-marketing .content-2images p:last-of-type {
    margin-bottom: 10px !important;
  }

  /* =====================================================
     MOBILE (<=480px) — Center text inside CTA button
     Target: "Join Free Today"
     ===================================================== */
  section.home-marketing a.home-hero-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

}