/* index.css — responsive overrides for index page
   Breakpoints: 1000px, 900px, 750px, 500px
*/

/* Base: ensure no horizontal overflow and desktop defaults */
#cards .ninehundred, .split-card-ninehundred { max-width: 900px; box-sizing: border-box; margin-left: auto; margin-right: auto; }

/* Quote form: ensure inputs fit and do not overflow on desktop */
.quote-inline-form { max-width: 900px; box-sizing: border-box; }

/* Ensure service card logos keep a constant visual size */
#cards .service-overview .card-graphic img { width: 160px; max-width: 160px; height: auto; display: block; margin-left: auto; margin-right: auto; }

/* Base split-card widths (desktop) — ensure selectors match HTML structure */
.split-card-ninehundred .split-left {
  width: 450px;
  flex: 0 0 450px;
}
.split-card-ninehundred .split-right {
  width: 350px;
  flex: 0 0 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.split-card-ninehundred .split-right img { max-width: 350px; width: 100%; height: auto; display: block; }

h1.index-title {
  display: table !important;
  width: auto !important;
  margin: 0.5rem auto 0.5rem auto !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--brand-blue) !important;
  text-align: center !important;
  padding-bottom: 0.125rem !important;
  border-bottom: 2px solid var(--brand-red) !important;
  white-space: normal !important;
}
h2.index-title {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 1rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
  color: var(--brand-blue) !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 2px solid var(--brand-red) !important;
    text-align: center !important;
}
h2.index-title-white {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 1rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--brand-gold) !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 2px solid var(--brand-red) !important;
    text-align: center !important;
}

/* At 1000px: begin shrinking the split-card columns */
@media (max-width:1000px) {
  .split-card-ninehundred { gap: 8px; }
  .split-card-ninehundred .split-left {
    width: 450px;
    flex: 0 0 450px;
    max-width: 60%;
  }
  .split-card-ninehundred .split-right {
    width: auto;
    flex: 0 0 350px;
    max-width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .split-card-ninehundred .split-right img {
    width: 100%;
    height: auto;
    display: block;
    /* do not reduce the declared max below 350px here — container will control visible size */
    max-width: 350px;
  }

  /* Services: move from 4-up to 2-up (centered) using grid for robust centering
     Restrict to the services section so other .ninehundred usages aren't affected */
  /* Target the cards container specifically so rules override theme defaults */
  #cards .background-blue > .ninehundred { display: flex; flex-wrap: wrap; justify-content: center !important; gap: 16px; align-items: stretch; width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; box-sizing: border-box; padding-left: 12px; padding-right: 12px; }
  #cards .service-overview { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem; }
  #cards .service-overview h4 { width: 100%; text-align: center; }
  /* Stronger centering rules in case theme or other CSS is more specific */
  #cards .service-overview .general-button { align-self: center; margin: 1rem auto 0 !important; }
  #cards .service-overview h4, #cards .service-overview .h4, #cards .service-overview h4 a { text-align: center !important; width: 100% !important; margin: 0 auto !important; }
  #cards .service-overview .card-graphic { display: flex; justify-content: center; }

} 

/* At 900px: stack the two columns vertically and tighten quote form */
@media (max-width:900px) {
  /* Quote form adjustments before stacking */
  .quote-inline-form { gap: 10px; }
  .quote-inline-form input[type="text"] { flex: 0 0 150px; max-width: 180px; }
  .quote-inline-form textarea { flex: 1 1 300px; min-width: 180px; }

  /* Split intro stacks at this point */
  .split-card-ninehundred { flex-direction: column; gap: 12px; align-items: stretch; }
  .split-card-ninehundred .split-left, .split-card-ninehundred .split-right { width: auto; flex: 0 0 auto; max-width: 700px; margin-left: auto; margin-right: auto; }
  .split-card-ninehundred .split-right { display: flex; justify-content: center; }
  .split-card-ninehundred .split-right img { width: auto; height: auto; max-width: 350px; display: block; }

  /* Force visual centering of the stacked split-card inside its padded wrapper */
  .split-card-ninehundred {
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

    /* Services: move from 4-up to 2-up (centered)
      Restrict these rules to the services container so other .ninehundred areas (quote banner, info blocks) are unaffected */
  /* More specific selector to override theme-level #cards .ninehundred */
  #cards .background-blue > .ninehundred { display: flex; flex-wrap: wrap; justify-content: center !important; gap: 16px; align-items: stretch; width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; box-sizing: border-box; padding-left: 12px; padding-right: 12px; }
  #cards .service-overview { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem; }
  #cards .service-overview h4 { width: 100%; text-align: center; }
  /* Stronger centering rules in case theme or other CSS is more specific */
  #cards .service-overview .general-button { align-self: center; margin: 1rem auto 0 !important; }
  #cards .service-overview h4, #cards .service-overview .h4, #cards .service-overview h4 a { text-align: center !important; width: 100% !important; margin: 0 auto !important; }
  #cards .service-overview .card-graphic { display: flex; justify-content: center; }

}  


/* At 750px: stack smaller sections and make quote form vertical */
@media (max-width:750px) {
  /* Quote form: keep compact two-column layout on small screens
     - Full Name and Contact stay side-by-side (each 150px)
     - Work (textarea) is flexible but keeps a fixed height
     - Button is fixed 200px and sits beside the textarea */
  .quote-inline-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
  }
  .quote-inline-form input[type="text"] { height: 40px; line-height: 1; padding: 8px 10px; box-sizing: border-box; }
  .quote-inline-form textarea { height: 40px; min-height: 40px; max-height: 80px; resize: none; overflow: auto; padding: 8px 10px; box-sizing: border-box; }
  /* keep name/contact on row 1 */
  .quote-inline-form input#quote-name, .quote-inline-form input#quote-contact { flex: 0 0 150px !important; min-width: 150px !important; order: 1; }
  /* move work + button to row 2 and make work same width as name/contact */
  .quote-inline-form textarea#quote-work { flex: 0 0 150px !important; min-width: 150px !important; order: 2; }
  .quote-inline-form .general-button { flex: 0 0 200px !important; min-width: 200px !important; height: 40px; align-self: center; order: 2; }
  /* Ensure the status/message below the form stays full-width and centered */
  #quote-form-message { width: 100%; text-align: center; margin-top: 6px; }

  /* Split intro: ensure stacked */
  .split-card-ninehundred { flex-direction: column; }
  .split-card-ninehundred .split-left { width: 480px !important; }
  .split-card-ninehundred .split-right { width: 100% !important; }

  /* Services: 1-column per row, centered */
  /* Ensure services container stacks into a single column and cannot overflow
     Also remove large outer padding from the background wrapper that can shift centering */
  #cards .background-blue.background-spacing { padding-left: 12px !important; padding-right: 12px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  #cards .background-blue > .ninehundred {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 700px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #cards .service-overview { width: 100% !important; max-width: 500px; margin-left: auto; margin-right: auto; }

}  

/* At 500px: mobile touch sizing and spacing */
@media (max-width:500px) {
  /* Ensure no overflow and comfortable touch sizes */
  .quote-inline-form input[type="text"], .quote-inline-form textarea, .quote-inline-form .general-button { padding: 10px 12px; font-size: 1rem; }
  .quote-inline-form { padding-left: 8px; padding-right: 8px; }

    .split-card-ninehundred .split-left { width: 350px !important; }

  /* Services: ensure 1-column stacking and spacing */
  #cards .service-overview { width: 100% !important; margin-left: auto; margin-right: auto; }

  /* Footer stacking handled in footing.css */
}

@media (max-width: 360px) {
  .split-card-ninehundred .split-left { width: 300px !important; }
}

/* Reserve layout space for the hero/LCP image to avoid CLS and ensure predictable sizing */
.lcp-image, .split-card-ninehundred .split-right img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  display: block;
}