/* Home page only — small additions on top of styles.css
   (white spec tiles on soft sections, the gallery caption scrim and the
   compact phone spec tiles now live in styles.css) */

/* Featured product: keep the tank's end face (logo + data plate) in frame */
.home-product .pf-media img{object-position:72% 50%}

/* Feature tiles under the featured product: lift on hover */
.home-specs{margin-top:28px}
.bg-soft .home-specs .spec{box-shadow:var(--shadow-sm);transition:.22s}
.bg-soft .home-specs .spec:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}

@media (max-width:560px){
  /* spec chips pair up two per row on phones */
  .home-product .pf-body .chips{gap:6px}
  .home-product .pf-body .chip{padding:.42em .78em}
  .home-product .pf-body .chip svg{display:none}
  /* the longest spec chip goes last so the shorter ones pair up */
  .home-product .pf-body .chip.ph-last{order:1}
}

/* Teaser for the 3D explainer (pressure-tanker-iso.html#explore-3d) */
.x3d-teaser{position:relative;margin-top:28px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;overflow:hidden;
  border-radius:var(--radius-lg);background:#06102a radial-gradient(ellipse 60% 90% at 0% 0%,rgba(28,74,160,.35),rgba(28,74,160,0) 70%);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.x3d-teaser:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.x3d-teaser-copy{position:relative;z-index:1;padding:44px 12px 44px 48px}
.x3d-teaser h3{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);margin:10px 0 12px}
.x3d-teaser p{color:var(--on-dark-2);margin-bottom:24px;max-width:44ch}
.x3d-teaser-link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
.x3d-teaser-media{position:relative;align-self:stretch;min-height:300px}
.x3d-teaser-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .6s ease}
.x3d-teaser-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#06102a 0%,rgba(6,16,42,0) 24%),linear-gradient(0deg,#06102a 0%,rgba(6,16,42,0) 12%),linear-gradient(180deg,#06102a 0%,rgba(6,16,42,0) 12%);pointer-events:none}
.x3d-teaser:hover .x3d-teaser-media img{transform:scale(1.035)}
.x3d-teaser:focus-within{outline:3px solid var(--green);outline-offset:3px}
.x3d-teaser .x3d-teaser-link:focus-visible{outline:none}
@media (max-width:900px){
  /* (the glow moves to the bottom-left corner: under the render it would show as a seam against
     the render's dark lower edge) */
  .x3d-teaser{grid-template-columns:minmax(0,1fr);background:#06102a radial-gradient(ellipse 90% 50% at 0% 100%,rgba(28,74,160,.3),rgba(28,74,160,0) 70%)}
  .x3d-teaser-media{order:-1;min-height:0;aspect-ratio:16/9}
  .x3d-teaser-media::before{background:linear-gradient(0deg,#06102a 0%,rgba(6,16,42,0) 34%)}
  .x3d-teaser-copy{padding:8px 24px 30px}
}
@media (prefers-reduced-motion:reduce){
  .x3d-teaser,.x3d-teaser-media img{transition:none}
  .x3d-teaser:hover,.x3d-teaser:hover .x3d-teaser-media img{transform:none}
}