/* =========================================================
   TINK HOME — FINAL QUALITY PASS
   Loaded last on every page for one consistent visual system.
   ========================================================= */

:root{
  --th-radius:28px;
  --th-radius-sm:18px;
  --th-shadow:0 24px 70px rgba(7,22,30,.12);
}

/* Unified hero language — same composition as the homepage */
.hero,
.page-hero,
.about-hero,
.contact-hero,
.product-hero,
.service-hero{
  min-height:760px !important;
  height:100svh;
  max-height:980px;
  position:relative;
  display:flex;
  align-items:center !important;
  overflow:hidden;
  background:#0b1419;
  color:#fff;
}

.product-hero-media,
.page-hero-bg,
.hero-media{
  position:absolute;
  inset:-3%;
}

.product-hero-media img,
.page-hero-bg img,
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.product-hero-media img{
  filter:brightness(.5) saturate(.83) contrast(1.02);
  transform:scale(1.04);
  animation:heroBreath 12s ease-in-out infinite alternate;
}

.product-hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 58% 44%,transparent 0,rgba(4,9,12,.08) 34%,rgba(4,9,12,.7) 100%),
    linear-gradient(90deg,rgba(4,9,12,.86),rgba(4,9,12,.16) 72%),
    linear-gradient(0deg,rgba(4,9,12,.7),transparent 50%);
}

.product-hero-content{
  position:relative;
  z-index:3;
  width:100%;
  padding:94px 0 56px !important;
}

.product-kicker{margin:0}

.product-hero .hero-title,
.page-hero h1,
.contact-hero .hero-title,
.about-hero .hero-title,
.service-hero .hero-title{
  font:700 clamp(58px,8vw,116px)/.86 Manrope,sans-serif !important;
  letter-spacing:-.075em !important;
  max-width:900px !important;
  margin:25px 0 28px !important;
  text-wrap:balance;
}

.product-hero .hero-title em,
.page-hero h1 em{
  color:#82d0f6;
  font-style:italic;
  font-weight:500;
}

.product-hero-copy{
  max-width:570px;
  margin:0 0 26px;
  color:rgba(255,255,255,.74);
  font-size:14px;
  line-height:1.9;
}

.product-hero-meta{
  width:min(620px,100%);
  gap:34px;
  margin-top:24px;
  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.16);
}

/* Services overview: images remain cinematic but never oversized */
.service-detail{
  min-height:0 !important;
  margin-block:18px;
}
.service-detail-image{
  min-height:0 !important;
  height:clamp(390px,42vw,560px) !important;
}
.service-detail-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Repeatable gallery system: works with 1, 10, 30 or more images */
.product-section{
  padding:clamp(82px,8vw,112px) 0 !important;
}

.gallery-grid{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  gap:14px !important;
  margin-top:48px !important;
}

.gallery-item,
.gallery-item-single{
  grid-column:span 6 !important;
  min-height:0 !important;
  height:clamp(290px,28vw,410px) !important;
  border-radius:var(--th-radius-sm);
  overflow:hidden;
  background:#dfe5e7;
  box-shadow:0 12px 34px rgba(7,22,30,.07);
}

.gallery-item:nth-child(6n+1),
.gallery-item:nth-child(6n+4){grid-column:span 7 !important}

.gallery-item:nth-child(6n+2),
.gallery-item:nth-child(6n+3){grid-column:span 5 !important}

.gallery-item:nth-child(6n+5),
.gallery-item:nth-child(6n+6){grid-column:span 6 !important}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s ease;
  filter:saturate(.92) contrast(1.015);
}

.gallery-item:hover img{transform:scale(1.035)}

.gallery-item::after{
  content:"";
  position:absolute;
  inset:45% 0 0;
  background:linear-gradient(transparent,rgba(4,9,12,.4));
  pointer-events:none;
}

.gallery-number,.gallery-caption{z-index:3}

/* Videos keep a controlled footprint */
.video-layout{gap:clamp(36px,6vw,72px)}
.video-frame,
.video-frame video{
  min-height:0 !important;
  height:clamp(340px,38vw,520px) !important;
  border-radius:var(--th-radius);
}
.video-frame video{object-fit:cover}

/* CTA */
.product-cta{
  min-height:0 !important;
  height:auto !important;
  margin:18px;
  border-radius:var(--th-radius);
  overflow:hidden;
}
.product-cta-media{min-height:520px}
.product-cta-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Floating WhatsApp becomes a clean icon */
.whatsapp{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:900;
  width:54px !important;
  height:54px !important;
  min-width:54px;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center;
  color:#fff !important;
  background:#20b866 !important;
  box-shadow:0 16px 38px rgba(16,143,76,.3) !important;
  border:1px solid rgba(255,255,255,.28);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}
.whatsapp svg{width:25px;height:25px;display:block}
.whatsapp:hover{
  transform:translateY(-4px) scale(1.04);
  background:#18aa5a !important;
  box-shadow:0 20px 44px rgba(16,143,76,.38) !important;
}

.product-intro{gap:clamp(42px,7vw,80px)}
.product-intro-copy{max-width:510px}
.spec-card{border-radius:20px}

/* Tablet */
@media(max-width:950px){
  .hero,.page-hero,.about-hero,.contact-hero,.product-hero,.service-hero{
    min-height:680px !important;
    height:88svh;
  }
  .product-hero-content{padding:108px 0 54px !important}
  .service-detail-image{height:460px !important}
  .gallery-item,
  .gallery-item-single,
  .gallery-item:nth-child(n){
    grid-column:span 6 !important;
    height:340px !important;
  }
  .product-cta-media{min-height:470px}
}

/* Mobile */
@media(max-width:600px){
  .hero,.page-hero,.about-hero,.contact-hero,.product-hero,.service-hero{
    min-height:620px !important;
    height:86svh;
    max-height:none;
  }
  .product-hero-content{padding:112px 0 44px !important}
  .product-hero .hero-title,
  .page-hero h1,
  .contact-hero .hero-title,
  .about-hero .hero-title,
  .service-hero .hero-title{
    font-size:clamp(46px,13vw,66px) !important;
    line-height:.9 !important;
    max-width:100% !important;
    margin:20px 0 22px !important;
  }
  .product-hero-copy{font-size:13px;line-height:1.75}
  .product-hero-meta{gap:16px 24px;margin-top:18px}
  .service-detail{margin:10px}
  .service-detail-image{height:360px !important}
  .gallery-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:36px !important;
  }
  .gallery-item,
  .gallery-item-single,
  .gallery-item:nth-child(n){
    grid-column:1 !important;
    width:100% !important;
    height:clamp(300px,100vw,420px) !important;
    min-height:0 !important;
    border-radius:16px;
  }
  .video-frame,.video-frame video{height:340px !important}
  .product-cta{margin:10px;border-radius:20px}
  .product-cta-media{min-height:430px}
  .whatsapp{
    left:14px;
    bottom:14px;
    width:50px !important;
    height:50px !important;
    min-width:50px;
  }
  .whatsapp svg{width:23px;height:23px}
}

@media(prefers-reduced-motion:reduce){
  .product-hero-media img{animation:none!important}
}