/* ============================================================
   ALL ISLAND RESTORATION - PHASE 3: SERVICES GRID  (v2)
   ------------------------------------------------------------
   - Service tiles: solid #000000 card so black icon squares blend in
   - Brighter visible border (rgba(255,255,255,.14))
   - Hover: subtle lift + lighter black + blue glow + top accent line
   - Icon sizing consistency (130px desktop, 110px mobile)
   - Responsive: 2 col tablet, 1 col phone

   Depends on: foundation.css, dark-theme.css, hero.css
   Services section is the .black-bg-section that is NOT .equal-height
   (the hero is .equal-height), so we scope with :not(.equal-height).
============================================================ */


/* ============================================================
   SECTION HEADER REFINEMENT
   (the "SERVICES / RELIABILITY & EXPERIENCE..." block)
============================================================ */

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) > .section_wrapper > .wrap:first-child p {
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  color: var(--air-gray-lt) !important;
  max-width: 60ch;
  margin: 0 auto 1em !important;
}

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) > .section_wrapper > .wrap:first-child h2:last-child {
  margin-top: 1.2em !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.08em !important;
}

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) > .section_wrapper > .wrap:first-child h2 a {
  color: var(--air-blue) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
  border-bottom: 1px solid transparent;
}

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) > .section_wrapper > .wrap:first-child h2 a:hover {
  color: var(--air-blue-lt) !important;
  border-bottom-color: var(--air-blue-lt);
}


/* ============================================================
   SERVICE TILE CARDS
   Each .wrap.one-fourth becomes a solid-black card.
============================================================ */

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth {
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 32px 16px 28px !important;
  margin-bottom: 24px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Top accent line — appears on hover */
body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--air-blue), transparent);
  transition: transform 0.35s ease;
  z-index: 2;
}

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth:hover::before {
  transform: translateX(-50%) scaleX(1);
}

/* Card hover state — stays pure black, just lifts + glows */
body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth:hover {
  transform: translateY(-6px);
  background: #000000 !important;
  border-color: rgba(74, 159, 212, 0.45);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(74, 159, 212, 0.18);
}


/* ============================================================
   SERVICE ICONS
============================================================ */

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth .column_image {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 18px !important;
}

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth:hover .column_image {
  transform: scale(1.06);
}

/* Image frame — strip Betheme's default styles so the black icon sits flush */
body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth .image_frame,
body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth .image_wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* The icon image itself — uniform 130px square */
body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth img {
  border-radius: 0 !important;
  width: 130px !important;
  height: 130px !important;
  max-width: 130px !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto !important;
}


/* ============================================================
   SERVICE TITLES (H4)
============================================================ */

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth h4 {
  font-family: var(--air-font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  text-align: center;
  min-height: 2.6em;  /* keep titles aligned even if one wraps to 2 lines */
  display: flex;
  align-items: center;
  justify-content: center;
}

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth h4 a {
  color: var(--air-white) !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
  display: inline-block;
}

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth:hover h4 a {
  color: var(--air-blue-lt) !important;
}

/* Make the entire card clickable via expanded H4 link hit area */
body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth .column_column {
  position: static;
}

body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth h4 a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}


/* ============================================================
   RESPONSIVE - TABLET (2 columns)
============================================================ */

@media only screen and (max-width: 1023px) and (min-width: 600px) {
  body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth {
    width: calc(50% - 12px) !important;
    margin: 0 6px 20px !important;
    display: inline-block !important;
    vertical-align: top;
    float: none !important;
  }
}


/* ============================================================
   RESPONSIVE - MOBILE (1 column)
============================================================ */

@media only screen and (max-width: 599px) {
  body.redesign .section.mcb-section.black-bg-section:not(.equal-height) {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
  }

  body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 24px 16px 20px !important;
  }

  body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth img {
    width: 110px !important;
    height: 110px !important;
    max-width: 110px !important;
  }

  body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap.one-fourth h4 {
    font-size: 1rem !important;
    min-height: 0;
  }
}


/* =================================================================
   SERVICE PAGES — v5
   -----------------------------------------------------------------
   Applies to BOTH /services/ (page-id-24) and
   /all-island-restoration-services/ — the photo-cards v2 snippet
   adds body class .air-photo-page on those pages and tags:
     .air-photo-section  (each service section)
     .air-photo-card     (the column holding the photo)
     .air-photo-text     (the text column)
     .air-photo-spacer   (empty filler columns — hidden)
   ================================================================= */

/* ---- Dark background COLOR (photo cards excluded) ---- */
body.redesign.page-id-24 #Content,
body.redesign.air-photo-page #Content,
body.redesign.page-id-24 #Content .section,
body.redesign.air-photo-page #Content .section,
body.redesign.page-id-24 #Content .section .section_wrapper,
body.redesign.air-photo-page #Content .section .section_wrapper,
body.redesign.page-id-24 #Content .mcb-section,
body.redesign.air-photo-page #Content .mcb-section,
body.redesign.page-id-24 #Content .mcb-wrap:not(.air-photo-card),
body.redesign.air-photo-page #Content .mcb-wrap:not(.air-photo-card){
  background-color:#0a0c0f !important;
}
body.redesign #Content .mcb-wrap.air-photo-card,
body.redesign #Content .mcb-wrap.air-photo-card *{
  background-color:transparent !important;
}

/* ---- Text colors ---- */
body.redesign.page-id-24 #Content,
body.redesign.air-photo-page #Content,
body.redesign.page-id-24 #Content p,
body.redesign.air-photo-page #Content p,
body.redesign.page-id-24 #Content li,
body.redesign.air-photo-page #Content li,
body.redesign.page-id-24 #Content .column_attr,
body.redesign.air-photo-page #Content .column_attr,
body.redesign.page-id-24 #Content .column_attr *,
body.redesign.air-photo-page #Content .column_attr *{
  color:#c9d6e2 !important;
}
body.redesign.page-id-24 #Content h1, body.redesign.air-photo-page #Content h1,
body.redesign.page-id-24 #Content h2, body.redesign.air-photo-page #Content h2,
body.redesign.page-id-24 #Content h3, body.redesign.air-photo-page #Content h3,
body.redesign.page-id-24 #Content h4, body.redesign.air-photo-page #Content h4,
body.redesign.page-id-24 #Content h2 a, body.redesign.air-photo-page #Content h2 a,
body.redesign.page-id-24 #Content h3 a, body.redesign.air-photo-page #Content h3 a{
  color:#ffffff !important;
}
body.redesign.page-id-24 #Content a,
body.redesign.air-photo-page #Content a{ color:#6db8e8 !important; }
body.redesign.page-id-24 #Content a:hover,
body.redesign.air-photo-page #Content a:hover{ color:#8fcbee !important; }


/* ---- LAYOUT: photo card | text, vertically centered ----
   Keyed purely to the air- classes, so it works on every page
   the snippet processes. ---- */

body.redesign #Content .air-photo-section > .section_wrapper{
  display:flex !important;
  align-items:center !important;
  gap:40px;
  flex-wrap:nowrap;
  max-width:1240px !important;   /* keep content on the grid now that the wrapper is full width */
  margin:0 auto !important;
}

/* Empty spacer columns — gone (this was the white strip) */
body.redesign #Content .air-photo-section .mcb-wrap.air-photo-spacer{
  display:none !important;
}

/* The photo card — uniform, rounded, always LEFT */
body.redesign #Content .mcb-wrap.air-photo-card{
  order:1;
  flex:0 0 42% !important;
  width:42% !important;
  height:320px !important;
  min-height:320px !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 12px 36px rgba(0,0,0,0.45);
}

/* The text column — right side, takes remaining width */
body.redesign #Content .mcb-wrap.air-photo-text{
  order:2;
  flex:1 1 auto !important;
  width:auto !important;
  float:none !important;
  margin:0 !important;
}

/* Consistent vertical rhythm between service blocks */
body.redesign #Content .section.air-photo-section{
  padding-top:36px !important;
  padding-bottom:36px !important;
}


/* ---- RESPONSIVE ---- */

@media only screen and (max-width: 1023px) and (min-width: 768px){
  body.redesign #Content .air-photo-section > .section_wrapper{
    gap:24px;
  }
  body.redesign #Content .mcb-wrap.air-photo-card{
    flex-basis:45% !important;
    width:45% !important;
    height:260px !important;
    min-height:260px !important;
  }
}

@media only screen and (max-width: 767px){
  body.redesign #Content .air-photo-section > .section_wrapper{
    flex-direction:column;
    gap:20px;
  }
  body.redesign #Content .mcb-wrap.air-photo-card{
    flex-basis:auto !important;
    width:100% !important;
    height:220px !important;
    min-height:220px !important;
    border-radius:16px !important;
  }
  body.redesign #Content .mcb-wrap.air-photo-text{
    width:100% !important;
    text-align:center;
  }
}

/* ============================================================
   HOMEPAGE SERVICES HEADER — RESIDENTIAL / COMMERCIAL BUTTONS (v3)
   v3: strips the builder's inline horizontal padding on the wrap
   and columns (it was positioning the buttons off-center) and
   centers with flex on mobile — immune to margin/padding offsets.
============================================================ */

/* kill positional padding the builder set for the old layout */
html body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap:has(.column_button),
html body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .column_button{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* the wrap holding the button columns centers its children */
html body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .wrap.mcb-wrap:has(.column_button){
  text-align:center !important;
}

/* desktop: each button column shrinks to content, sits inline, centered pair */
html body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .column_button{
  float:none !important;
  display:inline-block !important;
  width:auto !important;
  margin:0 10px 12px !important;
  vertical-align:middle !important;
}

html body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .column_button .button_align{
  text-align:center !important;
}

html body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .column_button a.button{
  float:none !important;
  margin:0 !important;
  text-align:center !important;
}

/* mobile: flex-centered, stacked, equal width */
@media only screen and (max-width: 767px){
  html body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .column_button{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
    margin:0 0 4px !important;
  }
  html body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .column_button .button_align{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
  }
  html body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .column_button a.button{
    display:block !important;
    width:82% !important;
    max-width:320px !important;
    margin:0 0 12px !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }
  html body.redesign .section.mcb-section.black-bg-section:not(.equal-height) .column_button a.button .button_label{
    float:none !important;
    display:inline-block !important;
    text-align:center !important;
    width:100% !important;
  }
}

/* ---- End of services.css (Phase 3 v2 + service pages v5) ---- */