/* === This cards.css file is located in theme folder /assests/css/  === */

/* === Section: Card Styles for All Pages (Excluding Team, Basic, Video Cards) === */

/* Desktop styles (min-width: 768px) */
@media only screen and (min-width: 768px) {
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products),
  body.recovery-page .cards.taxonomy-view:not(.taxonomy-products),
  body.tax-surgical .cards.taxonomy-view,
  body.tax-recovery .cards.taxonomy-view:not(.taxonomy-products),
  .products .cards,
  .events .cards,
  .icon-cards,
  .news-posts .cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    padding: 64px 0 96px !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
  }
}

/* Common styles for Surgical and Recovery Product Cards */
body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .content,
body.tax-recovery .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  align-self: stretch !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .content h3,
body.tax-recovery .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .content h3 {
  margin-top: 0 !important;
}

/* Common styles for Surgical Product Images */
body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .image {
  height: auto !important;
  margin-top: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .image picture,
body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Common styles for Recovery Product Images */
body.tax-recovery .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image {
  background-color: #fff !important;
  border: 1px solid #d1d1d1 !important;
  border-radius: 8px !important;
  height: auto !important;
  margin-top: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
body.tax-recovery .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image picture,
body.tax-recovery .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* === Surgical Product Cards on Taxonomy Pages === */
@media only screen and (min-width: 768px) {
  body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) {
    padding: 16px 0 96px !important;
  }
  body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }
  body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .image {
    width: 200px !important;
  }
}

@media only screen and (max-width: 767px) {
  body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) {
    padding: 16px 32px 48px !important;
  }
  body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 12px !important;
  }
  body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .image {
    width: 80px !important;
  }
}

/* === Recovery Product Cards on Taxonomy Pages === */
@media only screen and (min-width: 768px) {
  body.tax-recovery .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }
  body.tax-recovery .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image {
    width: 200px !important;
  }
  body.tax-recovery .taxonomy-view.cards:not(.taxonomy-products) {
    padding: 16px 0 40px !important;
  }
}

@media only screen and (max-width: 767px) {
  body.tax-recovery .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 12px !important;
  }
  body.tax-recovery .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image {
    width: 80px !important;
  }
}

/* ===== Surgical landing cards – inner layout only (scoped; no colours) ===== */
@media (min-width: 768px) {
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    grid-auto-rows: auto !important;
    column-gap: 16px !important;
    align-items: start !important;
  }
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card > .icon-title { 
    display: contents !important; 
  }
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card > .icon-title > img {
    grid-column: 1 !important;
    width: 200px !important;
    height: 200px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    display: block !important;
  }
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card > .icon-title > h2,
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card > h2.h3 {
    grid-column: 2 !important;
    margin: 0 0 8px 0 !important;
  }
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card > .content {
    grid-column: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
  }
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card p.recovery-btn {
    margin-top: 12px !important;
  }
}
@media (max-width: 767.98px) {
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    column-gap: 12px !important;
    align-items: start !important;
  }
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card > .icon-title { 
    display: contents !important; 
  }
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card > .icon-title > img {
    grid-column: 1 !important;
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    display: block !important;
  }
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card > .icon-title > h2,
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card > h2.h3 {
    grid-column: 2 !important;
    margin: 0 0 8px 0 !important;
  }
  body.surgical-page .cards.taxonomy-index.taxonomy-view > .card > .content {
    grid-column: 2 !important;
  }
}

/* ===== Surgical landing ONLY – make inner layout match Recovery (no colour changes) ===== */
/* Container on /surgical/ is: <div class="cards taxonomy-index taxonomy-view"> ... */
body.surgical-page .cards.taxonomy-index.taxonomy-view > a.card{
  /* kill the legacy grid that’s breaking the inner alignment */
  display: block !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  column-gap: unset !important;
}

/* Put icon + title on the same row, like Recovery */
body.surgical-page .cards.taxonomy-index.taxonomy-view > a.card .icon-title{
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 0 8px !important;
}

/* Fix icon size/spacing only inside the title row */
body.surgical-page .cards.taxonomy-index.taxonomy-view > a.card .icon-title img{
  width: 80px !important;
  height: 80px !important;
  flex: 0 0 80px !important;
  margin: 0 !important;
}

/* Use the existing h2 styles; just remove extra spacing */
body.surgical-page .cards.taxonomy-index.taxonomy-view > a.card .icon-title h2,
body.surgical-page .cards.taxonomy-index.taxonomy-view > a.card .icon-title .h3{
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* Tighten copy + give CTA a modest gap */
body.surgical-page .cards.taxonomy-index.taxonomy-view > a.card .content p:first-of-type{
  margin-top: 0 !important;
}
body.surgical-page .cards.taxonomy-index.taxonomy-view > a.card .content .recovery-btn{
  margin-top: 12px !important;
}

/* Surgical taxonomy grid: match Recovery padding (desktop) */
@media only screen and (min-width: 768px) {
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products),
  body.tax-surgical .taxonomy-view.cards:not(.taxonomy-products) {
    padding: 16px 0 40px !important;
  }
}

/* Home page ONLY — make the icon cards 3-up on tablet+ */
@media (min-width: 768px) {
  .home .cards.icon-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* === page.php bottom slider only: fix basic-card image box === */
/* Scope: .certifications > .certifications-swiper (unique to this section) */
.certifications .certifications-swiper .swiper-slide.card.basic-card { 
  display: flex;               /* prevent weird slide stretching */
  flex-direction: column;
}

.certifications .certifications-swiper .swiper-slide.card.basic-card .image {
  height: 164px !important;    /* rectangular like original */
  overflow: hidden;
}

.certifications .certifications-swiper .swiper-slide.card.basic-card .image img {
  width: 100%;
  height: 100% !important;
  object-fit: contain !important;  /* keep tall/square assets inside the box */
}

/* Slightly smaller on phones */
@media (max-width: 767px) {
  .certifications .certifications-swiper .swiper-slide.card.basic-card .image {
    height: 140px !important;
  }
}

/* === Related product cards ONLY === */
.container.related-products .cards.related-products-swiper .swiper-slide.card.basic-card {
  border: none !important; /* remove outer border */
}

.container.related-products .cards.related-products-swiper .swiper-slide.card.basic-card .content {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.container.related-products .cards.related-products-swiper .swiper-slide.card.basic-card .image {
  border: 1px solid #d0d1d5 !important; /* keep border only around image */
  border-radius: 8px !important;
  overflow: hidden;
}


/* === RELATED PRODUCT CARDS ONLY (safe scope to the slider) === */

/* Hide the outer card border */
.cards.related-products-swiper .swiper-slide.card.basic-card,
.container.related-products .cards.related-products-swiper .swiper-slide.card.basic-card {
  border: none !important;
  box-shadow: none !important;
}

/* Add side padding to the body copy only (keep top/btm as-is) */
.cards.related-products-swiper .swiper-slide.card.basic-card .content,
.container.related-products .cards.related-products-swiper .swiper-slide.card.basic-card .content {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Keep a border on the IMAGE ONLY */
.cards.related-products-swiper .swiper-slide.card.basic-card .image,
.container.related-products .cards.related-products-swiper .swiper-slide.card.basic-card .image {
  border: 1px solid #d0d1d5 !important;
  border-radius: 8px !important;
  overflow: hidden;
}