/*
 * Turbo Cooling Solutions — responsive image system v3
 * Loaded after the original project styles from seo-head.php.
 *
 * Principles:
 * 1. Illustration heroes are always shown in full (contain).
 * 2. Photographic cards use deliberate crops (cover), never distortion.
 * 3. Every fixed-height legacy image receives an explicit aspect-ratio stage.
 * 4. Mobile layouts disable floating image animation to prevent overflow.
 */

:root {
  --tc-media-surface: #f2faed;
  --tc-media-line: rgba(31, 155, 8, 0.14);
  --tc-media-radius: 22px;
}

:where(img, svg, video) {
  max-width: 100%;
}

:where(picture, figure) {
  min-width: 0;
  max-width: 100%;
}

/* Header and footer logos must retain their intrinsic proportions. */
.tc-logo img,
.tc-mobile-logo img,
.tc-footer-logo img,
.tc-insta-profile-mini img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/*
 * Illustration heroes
 * The source files range from 1.46:1 to 2.77:1. Keeping height automatic on
 * large screens preserves each source ratio; smaller screens use a consistent
 * stage with object-fit: contain so no AC unit is stretched or cut off.
 */
.tc-hero-img,
.service-hero-img,
.single-hero-img,
.hero-about-img,
.contact-hero-img,
.industries-hero-img,
.gallery-hero-img,
.blog-hero-img {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
}

.tc-hero-img > img,
.service-hero-img > img,
.single-hero-img > img,
.hero-about-img > img,
.contact-hero-img > img,
.industries-hero-img > img,
.gallery-hero-img > img,
.blog-hero-img > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Photographic industry hero: crop inside a predictable frame. */
.industry-detail-hero-img {
  width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.industry-detail-hero-img > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* About/service photography: replace legacy fixed heights with 4:3 frames. */
.single-about-img,
.industry-detail-about-img,
.about-main-img {
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
  background: #edf3ea;
}

.single-about-img > img,
.industry-detail-about-img > img,
.about-main-img > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit;
}

/* Product/service cards use contain so equipment is never cropped. */
.service-img {
  display: grid !important;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  padding: 8px;
  overflow: hidden;
  border-radius: 14px;
  background: #f4f8f3;
}

.service-img > img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Industry and expertise cards share a stable 4:3 crop. */
.industry-img {
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #edf3ea;
}

.industry-img > img,
.expertise-card > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  object-position: center !important;
}

/* Work and gallery photos: consistent cards without image deformation. */
.single-work-grid img,
.gallery-item img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

.single-work-grid img {
  height: auto !important;
  aspect-ratio: 4 / 3;
}

.gallery-item {
  width: 100%;
  min-width: 0;
  height: auto !important;
  aspect-ratio: 4 / 3;
}

/* Current and legacy blog layouts use the same 16:9 media geometry. */
.tc-blog-card__media,
.tc-article-hero__media,
.blog-img,
.blog-featured-img {
  width: 100%;
  min-width: 0;
  height: auto !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e8eeea;
}

.tc-blog-card__media > img,
.tc-article-hero__media > img,
.blog-img > img,
.blog-featured-img > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

.recent-blog img,
.tc-article-recent img {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Poster and video media retain their designed crop without stretching. */
.tc-modern-poster-image,
.tc-insta-phone-video,
.tc-insta-video-thumb {
  min-width: 0;
  overflow: hidden;
}

.tc-modern-poster-image > img,
.tc-insta-phone-video > img,
.tc-insta-video-thumb > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Lightbox images must always fit inside the viewport. */
.lightbox-img-wrap img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 88vh !important;
  object-fit: contain !important;
}

@media (max-width: 991px) {
  /* Ensure the content column remains visible before the hero image. */
  .tc-hero .col-lg-5,
  .service-hero .col-lg-5,
  .single-service-hero .col-lg-5,
  .about-hero .col-lg-5,
  .contact-hero .col-lg-5,
  .industries-hero .col-lg-5,
  .gallery-hero .col-lg-5,
  .blog-hero .col-lg-5 {
    display: block !important;
    visibility: visible !important;
  }

  .tc-hero,
  .service-hero,
  .single-service-hero,
  .about-hero,
  .contact-hero,
  .industries-hero,
  .gallery-hero,
  .blog-hero {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .tc-hero-img,
  .service-hero-img,
  .single-hero-img,
  .hero-about-img,
  .contact-hero-img,
  .industries-hero-img,
  .gallery-hero-img,
  .blog-hero-img {
    aspect-ratio: 16 / 10;
    margin-top: 24px;
    padding: clamp(8px, 2vw, 16px);
    border: 1px solid var(--tc-media-line);
    border-radius: var(--tc-media-radius);
    background:
      radial-gradient(circle at 82% 18%, rgba(85, 183, 15, 0.14), transparent 31%),
      linear-gradient(145deg, #f8fff4, var(--tc-media-surface));
  }

  .tc-hero-img > img,
  .service-hero-img > img,
  .single-hero-img > img,
  .hero-about-img > img,
  .contact-hero-img > img,
  .industries-hero-img > img,
  .gallery-hero-img > img,
  .blog-hero-img > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    animation: none !important;
    transform: none !important;
  }

  .industry-detail-hero-img {
    aspect-ratio: 16 / 10;
    border-radius: 22px;
  }

  .industry-detail-hero-img::before {
    display: none;
  }

  .industry-detail-hero-img > img,
  .industry-detail-about-img > img {
    height: 100% !important;
  }
}

@media (max-width: 575px) {
  /* The extra-wide homepage collage gets a slightly shorter stage. */
  .tc-hero-img {
    aspect-ratio: 16 / 9;
  }

  .tc-hero-img,
  .service-hero-img,
  .single-hero-img,
  .hero-about-img,
  .contact-hero-img,
  .industries-hero-img,
  .gallery-hero-img,
  .blog-hero-img {
    margin-top: 20px;
    border-radius: 17px;
  }

  .single-about-img,
  .industry-detail-about-img,
  .about-main-img,
  .industry-detail-hero-img {
    aspect-ratio: 16 / 10;
    border-radius: 16px;
  }

  .service-img,
  .tc-blog-card__media,
  .tc-article-hero__media,
  .blog-img,
  .blog-featured-img {
    aspect-ratio: 16 / 9;
  }

  .single-work-grid img,
  .gallery-item,
  .industry-img,
  .expertise-card > img {
    aspect-ratio: 4 / 3;
  }

  .recent-blog img {
    width: 84px;
    height: 64px;
  }

  .lightbox-img-wrap img {
    max-height: 78vh !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-hero-img img,
  .service-hero-img img,
  .single-hero-img img,
  .hero-about-img img,
  .contact-hero-img img,
  .industries-hero-img img,
  .gallery-hero-img img,
  .blog-hero-img img {
    animation: none !important;
    transform: none !important;
  }
}