/*
 * pages-st.css
 * Shared styles for Smart Technology sub-pages:
 *   template-st-lighting.php, template-st-audiovisual.php,
 *   template-st-connectivity.php, template-st-security.php,
 *   template-st-guest-experience.php
 *
 * @package Prysmedge
 */

/* ── TILE MOSAIC ── */
.st-mosaic-wrap { position:relative; width:100%; max-width:500px; height:420px; flex-shrink:0; }
.st-tile {
    position:absolute; border-radius:1.25rem; overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,0.22);
    transition: box-shadow 0.5s ease, z-index 0s;
    will-change:transform;
}
.st-tile-1 { width:65%; aspect-ratio:4/3; top:0; left:0; z-index:1; animation:st-float-1 7s ease-in-out infinite; }
.st-tile-2 { width:50%; aspect-ratio:3/4; top:6%; right:0; z-index:3; animation:st-float-2 9s ease-in-out infinite; }
.st-tile-3 { width:46%; aspect-ratio:16/9; bottom:0; left:14%; z-index:2; animation:st-float-3 5.5s ease-in-out infinite; }
@keyframes st-float-1 { 0%,100%{transform:translateY(0) rotate(-2.5deg)} 50%{transform:translateY(-14px) rotate(-1deg)} }
@keyframes st-float-2 { 0%,100%{transform:translateY(0) rotate(2deg)} 50%{transform:translateY(-10px) rotate(3.5deg)} }
@keyframes st-float-3 { 0%,100%{transform:translateY(0) rotate(-0.5deg)} 50%{transform:translateY(-18px) rotate(1deg)} }

/* Image: greyscale → colour on tile hover, slight scale zoom */
.st-tile img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) brightness(0.8); transition:filter 0.7s ease, transform 0.7s ease; }
.st-tile:hover { animation-play-state:paused; z-index:30 !important; box-shadow:0 16px 56px rgba(249,115,22,0.32) !important; }
.st-tile:hover img { filter:grayscale(0) brightness(1); transform:scale(1.07); }

/* Badges */
@keyframes st-badge-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.st-badge { position:absolute; background:white; border:1px solid rgba(0,0,0,0.08); border-radius:0.75rem; padding:0.55rem 0.9rem; box-shadow:0 4px 16px rgba(0,0,0,0.12); animation:st-badge-in 0.5s ease-out forwards; opacity:0; z-index:20; white-space:nowrap; }
.st-badge-1 { animation-delay:0.7s; top:-0.75rem; right:1.5rem; }
.st-badge-2 { animation-delay:1.0s; bottom:18%; left:-1rem; }
.st-badge-3 { animation-delay:1.3s; bottom:-0.5rem; right:1.5rem; }

/* Specialities section */
.specialities-section { background:#0a0a0a; }
.spec-item { border-bottom:1px solid #1f1f1f; }
.spec-item:last-child { border-bottom:none; }
.spec-num { font-family:'JetBrains Mono',monospace; color:#f97316; font-size:0.75rem; font-weight:600; letter-spacing:0.1em; }
.spec-title { font-family:'Barlow',sans-serif; font-weight:700; font-size:1.2rem; color:#fafaf9; }
.spec-desc { color:#a3a3a3; line-height:1.7; font-size:0.9rem; }
.spec-tag { background:#1a1a1a; border:1px solid #2a2a2a; color:#a8a29e; font-family:'JetBrains Mono',monospace; font-size:0.68rem; padding:0.22rem 0.6rem; border-radius:0.375rem; }
.brand-pill { font-size:0.72rem; color:#d4d4d4; background:#1a1a1a; border:1px solid #2d2d2d; padding:0.2rem 0.6rem; border-radius:0.35rem; display:inline-block; }

/* Metrics */
.metrics-strip { background:#0f0f0f; }
.metric-val { font-family:'Barlow',sans-serif; font-weight:800; font-size:2.25rem; color:#f97316; line-height:1; }
.metric-label { color:#737373; font-size:0.8rem; margin-top:0.4rem; }

/* === From: template-smart-technology.php === */
@keyframes bubbleFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.bubble-a { animation: bubbleFloat 5.0s ease-in-out 0.0s infinite; }
.bubble-b { animation: bubbleFloat 4.0s ease-in-out 1.0s infinite; }
.bubble-c { animation: bubbleFloat 3.5s ease-in-out 0.5s infinite; }
.bubble-d { animation: bubbleFloat 6.0s ease-in-out 1.8s infinite; }

/* ── Mobile guards: hide decorative floaters that cause overflow / dead space ── */
@media (max-width: 767px) {
    /* Mosaic tile stack in ST hero — complex float layout collapses on mobile */
    .st-mosaic-wrap { display: none; }
}