/* === This cards.css file is located in website root /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;
  }
}

/* === Surgical Product Cards on Taxonomy Pages === */
@media only screen and (min-width: 768px) {
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) {
    padding: 16px 0 96px !important;
  }
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    gap: 16px !important;
    align-items: start !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .image {
    width: 200px !important;
    height: auto !important;
    align-self: start !important;
    margin-top: 0 !important;
    aspect-ratio: 1 / 1 !important; /* Enforce square */
    overflow: hidden !important;
  }
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .image picture,
  body.surgical-page .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;
  }
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .content {
    padding: 0 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .content h3 {
    margin-top: 0 !important;
  }
}
@media only screen and (max-width: 767px) {
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) {
    padding: 16px 32px 48px !important;
  }
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 12px !important;
  }
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .image {
    width: 80px !important;
    height: auto !important;
    align-self: start !important;
    margin-top: 0 !important;
    aspect-ratio: 1 / 1 !important; /* Enforce square */
    overflow: hidden !important;
  }
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .image picture,
  body.surgical-page .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;
  }
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .content {
    padding: 0 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }
  body.surgical-page .taxonomy-view.cards:not(.taxonomy-products) .card.surgical-product .content h3 {
    margin-top: 0 !important;
  }
}

/* === Recovery Product Cards on Taxonomy Pages === */
@media only screen and (min-width: 768px) {
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    gap: 16px !important;
    align-items: start !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image {
    width: 200px !important;
    height: auto !important;
    align-self: start !important;
    margin-top: 0 !important;
    aspect-ratio: 1 / 1 !important; /* Enforce square */
    overflow: hidden !important;
  }
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image picture,
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .content {
    padding: 0 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .content h3 {
    margin-top: 0 !important;
  }
}
@media only screen and (max-width: 767px) {
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) {
    padding: 16px 32px 48px !important;
  }
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 12px !important;
  }
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image {
    width: 80px !important;
    height: auto !important;
    align-self: start !important;
    margin-top: 0 !important;
    aspect-ratio: 1 / 1 !important; /* Enforce square */
    overflow: hidden !important;
  }
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image picture,
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .content {
    padding: 0 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }
  body.recovery-page .taxonomy-view.cards:not(.taxonomy-products) .card.recovery-product .content h3 {
    margin-top: 0 !important;
  }
}

/* ——————————————————————————————  */
/* Recovery images: rounded corners, no border */
/* —————————————————————————————— */
@media only screen and (min-width: 768px) {
  .recovery-page .cards .card.recovery-card .image img {
    border: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .recovery-page .cards .card.recovery-card .image img {
    border: none !important;
  }
}

/* === Section: News Posts (Final Fixed Version) === */
@media only screen and (min-width: 768px) {
  .news-posts .cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
}
@media only screen and (min-width: 1280px) {
  .news-posts .cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.news-posts .card.card-image {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  background-color: #f9f9f9 !important;
  border: 1px solid transparent !important;
  height: 100% !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.news-posts .card.card-image:hover {
  border: 1px solid #f9ba13 !important;
  background-color: #eaeaea !important;
}

.news-posts .card.card-image:hover .content,
.news-posts .card.card-image:hover .read-more {
  background-color: #eaeaea !important;
  transition: background-color 0.3s ease !important; /* Add transition to children for sync */
}

.news-posts .card.card-image .image {
  width: 100% !important;
  margin: 0 !important;
}

.news-posts .card.card-image .image img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  aspect-ratio: 3 / 2 !important;
}

.news-posts .card.card-image .content {
  padding: 16px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  width: 100%;
}

.news-posts .card.card-image .content p:empty {
  display: none !important;
}

.news-posts .card.card-image .read-more {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  padding: 12px 16px !important;
  border-top: 1px solid #d0d1d5 !important;
  width: 100%;
  box-sizing: border-box !important;
}

.news-posts .card.card-image .read-more span {
  font-weight: 700;
  color: #132c3f;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.news-posts .card.card-image .read-more a.btn {
  background-color: #f9ba13 !important;
  border: 1px solid #f9ba13 !important;
  color: #132c3f !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  min-width: auto !important;
  height: auto !important;
}

.news-posts .card.card-image .read-more a.btn:hover {
  background-color: transparent !important;
  border-color: #f9ba13 !important;
  color: #f9ba13 !important;
}

/* ————————————————————————————————
   News card buttons: smaller size, normal font weight
   ———————————————————————————————— */

/* Mobile (max-width: 767px) */
@media only screen and (max-width: 767px) {
  .news-posts .card-image .read-more .btn {
    font-size: 14px !important;
    padding: 8px 12px !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    padding-top: 8px !important;
    display: inline-block !important;
    font-family: "Nunito-Regular", sans-serif !important;
  }
}

/* Tablet+ (min-width: 768px) */
@media only screen and (min-width: 768px) {
  .news-posts .card-image .read-more .btn {
    font-size: 14px !important;
    padding: 8px 12px !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    padding-top: 8px !important;
    display: inline-block !important;
    font-family: "Nunito-Regular", sans-serif !important;
  }
  .news-posts .card-image .content span {
    min-height: auto !important;
  }
}

/* Desktop (min-width: 1280px) */
@media only screen and (min-width: 1280px) {
  .news-posts .card-image .read-more .btn {
    font-size: 14px !important;
    padding: 10px 14px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    padding-top: 10px !important;
    font-family: "Nunito-Regular", sans-serif !important;
  }
  .news-posts .card-image .content span {
    min-height: 50px !important; /* Set to 50px as per user preference for perfect look on desktop */
  }
}

/* === Override: Remove padding from team cards on meet-the-team page === */
@media only screen and (min-width: 768px) {
  body.team-page .team-posts .cards {
    padding: 0 !important;
  }
}

/* =========================
   RELATED PRODUCTS — 3:2 images only (scoped, hardened)
   ========================= */
.container.related-products .cards.related-products-swiper .swiper-wrapper .swiper-slide.card.basic-card .image {
  position: relative;
  width: 100%;
  height: auto !important;       /* override any fixed height like 180px */
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.container.related-products .cards.related-products-swiper .swiper-wrapper .swiper-slide.card.basic-card .image img.product-card__img {
  display: block;
  width: 100%;
  height: 100% !important;       /* ensure it fills the box */
  object-fit: cover !important;  /* override any object-fit: fill */
}

/* Fallback when aspect-ratio unsupported */
@supports not (aspect-ratio: 3 / 2) {
  .container.related-products .cards.related-products-swiper .swiper-wrapper .swiper-slide.card.basic-card .image {
    padding-top: 66.6667%;
    height: 0 !important;
  }
  .container.related-products .cards.related-products-swiper .swiper-wrapper .swiper-slide.card.basic-card .image img.product-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* =========================
   SURGICAL LANDING — icon cards layout fix (scoped)
   ========================= */
body.surgical-page .icon-cards a.card {
  display: grid !important;
  grid-template-columns: 104px 1fr !important; /* 80px icon + gutter */
  column-gap: 24px !important;
  align-items: start !important;               /* don't vertically centre the row */
}

body.surgical-page .icon-cards a.card .icon-title {
  display: contents !important;                /* let children occupy the card grid */
}

/* Icon (left column) */
body.surgical-page .icon-cards a.card .icon-title img {
  grid-column: 1 !important;
  align-self: start !important;
  width: 80px !important;
  height: 80px !important;
}

/* Title (right column, first row) */
body.surgical-page .icon-cards a.card .icon-title h2,
body.surgical-page .icon-cards a.card .icon-title .h3 {
  grid-column: 2 !important;
  margin: 0 0 8px !important;
}

/* Content + button (right column, below title) */
body.surgical-page .icon-cards a.card .content {
  grid-column: 2 !important;
}