/* =====================================================================
   Otway Tree Care — modern service cards (homepage)
   Applied by otc-cards.js, which tags each service column .otc-service-card
   ===================================================================== */
/* The 3-up row that lays the cards out — make it a proper stretch grid
   so every card in a row matches the tallest one. */
.otc-service-card{
  position:relative;
  display:flex !important;
  flex-direction:column;
  align-self:stretch;
  background:#fff;
  border:1px solid #e7ece7;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,32,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  padding:0 !important;
  margin:0 !important;
  min-height:0;
  cursor:pointer;
}
.otc-service-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 34px rgba(16,24,32,.13);
  border-color:#cfe0d2;
}

/* inner wrapper (image + text row) fills the card via flex, not % height
   (percentage heights through several nested layers are unreliable).
   GHL's own ".vertical" class sets justify-content:center — override to
   flex-start everywhere it appears inside a card (it recurs at more
   than one nesting level) so text sits at the top, not centred. */
.otc-service-card .vertical.inner{
  justify-content:flex-start !important;
}
.otc-service-card > .vertical.inner{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}

/* image — full-bleed top, fixed height, no gap, subtle zoom on hover */
.otc-service-card .c-image,
.otc-service-card .image-container{ margin:0 !important; padding:0 !important; border-radius:0 !important; overflow:hidden; line-height:0; flex:0 0 auto; }
.otc-service-card img{
  display:block !important;
  width:100% !important;
  height:190px !important;
  object-fit:cover !important;
  border-radius:0 !important;
  margin:0 !important;
  transition:transform .35s ease;
}
.otc-service-card:hover img{ transform:scale(1.05); }

/* text row grows to fill remaining space so footers/edges align */
.otc-service-card > .vertical.inner > .c-row.c-wrapper{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start !important;
  min-height:0;
}
.otc-service-card > .vertical.inner > .c-row.c-wrapper > .inner{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start !important;
  min-height:0;
}
.otc-service-card > .vertical.inner > .c-row.c-wrapper > .inner > .c-column{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start !important;
  min-height:0;
}

/* text area padding */
.otc-service-card .c-row > .inner{ padding:22px 24px 26px !important; }

/* the grid row that holds the 3 cards per line: stretch to equal height
   and add a real gap so cards don't touch */
.c-row > .inner:has(> .otc-service-card){
  align-items:stretch !important;
  gap:24px;
}
/* extra breathing room between stacked rows of cards */
.c-row.c-wrapper:has(> .inner > .otc-service-card){
  margin-bottom:24px;
}

/* title becomes a link with an arrow that slides in on hover */
.otc-service-card h3{ margin:0 0 8px !important; }
.otc-card-title-link{
  color:#1e3a24 !important;
  text-decoration:none !important;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:color .15s ease;
}
.otc-service-card:hover .otc-card-title-link{ color:#039855 !important; }
.otc-card-title-link::after{
  content:"\2192";
  font-weight:700;
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .2s ease, transform .2s ease;
}
.otc-service-card:hover .otc-card-title-link::after{ opacity:1; transform:translateX(0); }

/* the tagline (green caps label) */
.otc-service-card h4{ margin:0 0 10px !important; letter-spacing:.4px; }

/* hidden Learn More button */
.otc-hidden{ display:none !important; }