/* Global image normalization for cards / galleries / sliders */

/* Standard wrapper class for all card media blocks */
.sg-card-media,
.image-frame,
.card-media,
.service-card__media,
.gallery__item,
.project-card__media,
.service-thumb,
.rot-holder,
.swiper-slide {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  height: clamp(220px, 24vw, 280px);
  background: #131821 url("../img/placeholders/ph-4x3.svg") center / cover no-repeat;
}

/* Standard image behavior */
.sg-card-media > img,
.image-frame > img,
.card-media > img,
.service-card__media > img,
.gallery__item > img,
.project-card__media > img,
.service-thumb > img,
.rot-holder > img,
.swiper-slide > img,
.slick-slide > img,
.carousel-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Keep the placeholder hidden once image has loaded */
.sg-card-media > img {
  background: transparent;
}

/* Background-image based wrappers/slides */
.sg-card-media,
.image-frame,
.card-media,
.service-card__media,
.gallery__item,
.project-card__media,
.service-thumb,
.rot-holder,
.hero .bg,
.hero-bg,
.bg-cover,
.has-bg-cover,
.swiper-slide,
.slick-slide,
.carousel-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Non-cropped media (logos/icons) */
.fit-contain {
  object-fit: contain !important;
  object-position: center !important;
  background: #111 !important;
}

/* Keep brand/logo/QR images safe from cover rules */
.site-logo,
.custom-logo,
.logo img,
.brand img,
.qr-row img,
.qr-home img,
.logo-item img {
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

/* Uniform card/image grids: desktop 3, tablet 2, mobile 1 */
.gallery,
.portfolio-grid,
.service-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Keep all service/portfolio card images inside a strict, uniform frame */
.service-cards-grid .service-card {
  display: flex;
  flex-direction: column;
}

.service-cards-grid .service-thumb.sg-card-media {
  margin: 0 0 14px;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  height: auto !important;
  min-height: 0;
}

.service-cards-grid .service-actions {
  margin-top: auto;
}

.portfolio-grid .rot-holder.sg-card-media {
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  height: auto !important;
  min-height: 0;
}

.portfolio-grid .rot-holder.sg-card-media .rot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gallery .frame .sg-card-media {
  aspect-ratio: 4 / 3;
  height: auto !important;
  min-height: 0;
}

/* Final hard lock: card images stay perfectly uniform on every page */
.service-cards-grid .service-thumb.sg-card-media,
.portfolio-grid .rot-holder.sg-card-media,
.gallery .frame .sg-card-media,
.grid .card .sg-card-media,
.card figure .sg-card-media {
  width: 100%;
  height: 260px !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  border-radius: 16px;
}

.service-cards-grid .service-thumb.sg-card-media > img,
.portfolio-grid .rot-holder.sg-card-media > img,
.gallery .frame .sg-card-media > img,
.grid .card .sg-card-media > img,
.card figure .sg-card-media > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* Tablet */
@media (max-width: 1024px) {
  .sg-card-media,
  .image-frame,
  .card-media,
  .service-card__media,
  .gallery__item,
  .project-card__media,
  .service-thumb,
  .rot-holder,
  .swiper-slide {
    height: 260px;
  }

  .gallery,
  .portfolio-grid,
  .service-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-cards-grid .service-thumb.sg-card-media,
  .portfolio-grid .rot-holder.sg-card-media,
  .gallery .frame .sg-card-media {
    aspect-ratio: auto !important;
    height: 230px !important;
  }
}

/* Mobile (required rules) */
@media (max-width: 768px) {
  .card-media,
  .service-card__media,
  .gallery__item,
  .swiper-slide,
  .project-card__media,
  .sg-card-media,
  .image-frame,
  .service-thumb,
  .rot-holder {
    height: 210px;
  }

  .sg-card-media > img,
  .card-media > img,
  .service-card__media > img,
  .gallery__item > img,
  .swiper-slide > img,
  .project-card__media > img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .fit-contain,
  .site-logo,
  .custom-logo,
  .logo img,
  .brand img,
  .qr-row img,
  .qr-home img,
  .logo-item img {
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .card,
  .service-card,
  .review-card,
  .global-contact-block {
    padding: 14px !important;
  }

  .card h3,
  .service-card h3,
  .review-head h3 {
    font-size: clamp(16px, 4.3vw, 18px);
    line-height: 1.6;
  }

  .card p,
  .lead,
  .card li,
  .review-card p,
  .comment-content p {
    font-size: clamp(14px, 3.8vw, 15px);
    line-height: 1.9;
  }

  .btn,
  .cta .btn,
  .service-actions .btn,
  .journey-next-actions .btn,
  .calc-box .btn {
    min-height: 48px;
  }

  .cta .btn,
  .service-actions .btn,
  .journey-next-actions .btn,
  .contact-grid .btn {
    width: 100%;
  }

  /* Slider behavior on mobile */
  .swiper-slide {
    width: 100% !important;
    margin-right: 12px !important;
  }

  .swiper-wrapper {
    gap: 12px;
  }

  .swiper-button-next,
  .swiper-button-prev,
  .slick-arrow {
    display: none !important;
  }

  .swiper-pagination,
  .slick-dots {
    display: block !important;
  }

  .gallery,
  .portfolio-grid,
  .service-cards-grid {
    grid-template-columns: 1fr;
  }

  .service-cards-grid .service-thumb.sg-card-media,
  .portfolio-grid .rot-holder.sg-card-media,
  .gallery .frame .sg-card-media {
    aspect-ratio: auto !important;
    height: 200px !important;
    border-radius: 14px;
  }
}

@media (max-width: 480px) {
  .card-media,
  .service-card__media,
  .gallery__item,
  .swiper-slide,
  .project-card__media,
  .sg-card-media,
  .image-frame,
  .service-thumb,
  .rot-holder {
    height: 190px;
    border-radius: 16px;
  }

  .service-cards-grid .service-thumb.sg-card-media,
  .portfolio-grid .rot-holder.sg-card-media,
  .gallery .frame .sg-card-media,
  .grid .card .sg-card-media,
  .card figure .sg-card-media {
    height: 180px !important;
    border-radius: 14px;
  }
}

/* JetSEO visual consistency overrides */
.service-cards-grid,
.portfolio-grid,
.gallery {
  align-items: stretch;
}

.service-cards-grid > .card,
.portfolio-grid > .card,
.gallery > .frame {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sg-card-media,
.service-thumb.sg-card-media,
.rot-holder.sg-card-media,
.gallery .frame .sg-card-media {
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  height: auto !important;
}

.sg-card-media > img,
.service-thumb.sg-card-media > img,
.rot-holder.sg-card-media > img,
.gallery .frame .sg-card-media > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 1024px) {
  .service-cards-grid,
  .portfolio-grid,
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .service-cards-grid,
  .portfolio-grid,
  .gallery {
    grid-template-columns: 1fr;
  }
  .sg-card-media,
  .service-thumb.sg-card-media,
  .rot-holder.sg-card-media,
  .gallery .frame .sg-card-media {
    min-height: 210px;
  }
}

@media (max-width: 480px) {
  .sg-card-media,
  .service-thumb.sg-card-media,
  .rot-holder.sg-card-media,
  .gallery .frame .sg-card-media {
    min-height: 190px;
    border-radius: 14px;
  }
}