/* ==========================================================================
   TRISTAR — FINAL FIXES (loaded last on every page)
   gallery · video band · awards · project frames · mobile cards · whatsapp · contact map
   ========================================================================== */

/* ---------- WhatsApp: no green backgrounds anywhere ---------- */
.whatsapp-button,
.side-actions a[href*="wa.me"],
.mobile-cta a[href*="wa.me"]{
    background:#fff !important; color:var(--navy,#0b2e40) !important;
    border:1px solid rgba(11,46,64,.18) !important; box-shadow:none !important;
}
.whatsapp-button:hover,
.side-actions a[href*="wa.me"]:hover,
.mobile-cta a[href*="wa.me"]:hover{ background:#f3f7fa !important; }
.whatsapp-button i,.side-actions a[href*="wa.me"] i,.mobile-cta a[href*="wa.me"] i{ color:#25D366 !important; }
.featured-card .whatsapp-button{ background:rgba(255,255,255,.08) !important; color:#fff !important; border-color:rgba(255,255,255,.35) !important; }

/* ---------- Shared lightbox sits above everything ---------- */
.g-lightbox{ z-index:2000000 !important; }
.g-lightbox img{ background:#fff; max-height:78vh; }
[data-lightbox]{ cursor:zoom-in; }

/* ---------- GALLERY: always visible, never cropped ---------- */
.gallery-photos{ padding-top:10px; }
.gallery-count{ display:block; margin:-18px 0 22px; font-size:12px; font-weight:700; color:var(--muted,#5b6b78); }
.gallery-masonry{ column-count:4; column-gap:16px; }
.gallery-masonry .g-tile{
    opacity:1 !important; transform:none !important;
    animation:gTileIn .6s ease both;
    break-inside:avoid; margin:0 0 16px; position:relative; overflow:hidden;
    border-radius:14px; background:#eef3f7; display:block;
}
.gallery-masonry .g-tile.g-hidden{ display:none !important; }
.gallery-masonry .g-tile img{ width:100%; height:auto; display:block; transition:transform .6s ease; }
.gallery-masonry .g-tile:hover img{ transform:scale(1.05); }
@keyframes gTileIn{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@media (max-width:1100px){ .gallery-masonry{ column-count:3; } }
@media (max-width:760px){ .gallery-masonry{ column-count:2; column-gap:10px; } .gallery-masonry .g-tile{ margin-bottom:10px; border-radius:10px; } }
@media (max-width:420px){ .gallery-masonry{ column-count:1; } }

/* ---------- FULL-WIDTH VIDEO BAND (only one video section) ---------- */
.video-band{
    width:100%; background:linear-gradient(160deg,#071d2b,#0b2e40 60%,#0f4a63);
    padding:64px 0 56px; color:#fff; overflow:hidden;
}
.video-band-head{ padding:0 6%; margin-bottom:26px; }
.video-band-head h2{ color:#fff; margin:8px 0 0; }
.video-band-head h2 em{ color:#8fd0f2; }
.video-slider{ position:relative; width:100%; }
.vs-stage{ position:relative; width:100%; aspect-ratio:16/9; max-height:82vh; background:#000; }
.vs-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; display:none; }
.vs-video.active{ display:block; }
.vs-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
    background:rgba(7,29,43,.6); color:#fff; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px);
    transition:background .25s ease, transform .25s ease;
}
.vs-nav:hover{ background:var(--blue,#0878ae); transform:translateY(-50%) scale(1.08); }
.vs-prev{ left:22px; } .vs-next{ right:22px; }
.vs-meta{ display:flex; justify-content:space-between; gap:16px; padding:16px 6% 0; font-weight:700; }
.vs-num{ opacity:.7; font-size:13px; letter-spacing:1px; }
.vs-dots{ display:flex; gap:8px; justify-content:center; padding:14px 6% 0; }
.vs-dot{ width:34px; height:4px; border:0; border-radius:4px; background:rgba(255,255,255,.3); cursor:pointer; padding:0; }
.vs-dot.active{ background:#8fd0f2; }
@media (max-width:700px){
    .video-band{ padding:44px 0 36px; }
    .vs-stage{ aspect-ratio:16/10; }
    .vs-nav{ width:42px; height:42px; font-size:15px; }
    .vs-prev{ left:10px; } .vs-next{ right:10px; }
}

/* ---------- AWARDS: framed, uncropped, clickable ---------- */
.award-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.award-card{ background:#fff; border:1px solid var(--line,#dfe8ee); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .35s ease, box-shadow .35s ease; }
.award-card:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(11,46,64,.16); }
.award-image-wrap{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:100%; aspect-ratio:4/3; padding:14px; border:0; cursor:zoom-in;
    background:linear-gradient(145deg,#f4f8fb,#e6eef4);
}
.award-image-wrap img{ max-width:100%; max-height:100%; width:auto !important; height:auto !important; object-fit:contain !important; border-radius:6px; box-shadow:0 8px 24px rgba(11,46,64,.18); transition:transform .5s ease; }
.award-card:hover .award-image-wrap img{ transform:scale(1.04); }
.award-badge{ position:absolute; top:12px; left:12px; background:var(--navy,#0b2e40); color:#fff; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:5px 11px; border-radius:100px; }
.award-zoom{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--navy,#0b2e40); display:flex; align-items:center; justify-content:center; font-size:13px; opacity:0; transition:opacity .3s ease; }
.award-card:hover .award-zoom{ opacity:1; }
.award-card-body{ padding:18px 20px 22px; }
.award-card-body h3{ font-size:18px; margin:0 0 6px; }
.award-card-body p{ margin:0; font-size:13px; color:var(--muted,#5b6b78); line-height:1.6; }
@media (max-width:1000px){ .award-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .award-grid{ grid-template-columns:1fr; gap:16px; } .award-image-wrap{ aspect-ratio:4/3; } .award-zoom{ opacity:1; } }

/* ---------- PROJECT IMAGES: full image inside a frame (no cropping) ---------- */
.project-card .card-photo,
.featured-card-image{
    background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important;
    background-color:#eaf1f6; cursor:zoom-in; position:relative;
}
.project-card .card-photo{ height:auto !important; aspect-ratio:4/3; }
.project-card .card-photo::after,.featured-card-image::after{
    content:"\f065"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; right:12px; top:12px;
    width:34px; height:34px; border-radius:50%; background:#fff; color:#0b2e40; font-size:13px;
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.featured-card-image{ min-height:0 !important; aspect-ratio:1/1; align-self:center; margin:28px; border-radius:14px; }

/* projects slider buttons (added by js/project-slider.js) */
.proj-nav{ display:flex; gap:10px; justify-content:flex-end; margin:0 0 14px; }
.proj-nav button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line,#dfe8ee); background:#fff; color:var(--navy,#0b2e40); cursor:pointer; font-size:14px; transition:.25s; }
.proj-nav button:hover{ background:var(--navy,#0b2e40); color:#fff; }
@media (min-width:901px){ .proj-nav{ display:none; } }

/* ---------- MOBILE: smaller cards, nothing cropped ---------- */
@media (max-width:900px){
    .projects-grid{ display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding:4px 4px 16px; -webkit-overflow-scrolling:touch; }
    .project-card{ flex:0 0 78% !important; max-width:78% !important; scroll-snap-align:center; }
    .project-card .card-body{ padding:16px !important; }
    .project-card h3{ font-size:20px !important; margin:4px 0 10px !important; }
    .project-card .project-facts{ gap:8px !important; font-size:11px; }
    .project-card .card-body > p{ font-size:12px !important; }
    .project-actions{ gap:8px !important; flex-wrap:wrap; }
    .project-actions .button,.project-actions .whatsapp-button{ padding:10px 12px !important; font-size:10px !important; }
    .featured-card{ grid-template-columns:1fr !important; min-height:0 !important; }
    .featured-card-image{ margin:14px 14px 0; aspect-ratio:4/3; }
    .featured-card-content{ padding:22px 6% 26px !important; }
    .featured-card h3{ font-size:30px !important; margin-bottom:14px !important; letter-spacing:-1px !important; }
    .featured-facts{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
}
@media (max-width:480px){ .project-card{ flex-basis:86% !important; max-width:86% !important; } }

/* ---------- CONTACT: logo removed, wide map ---------- */
.contact-image,.contact-photo{ display:none !important; }
.contact-map{ display:block !important; margin-top:28px; }
.contact-map .map-frame{ width:100%; height:460px; border:0; border-radius:16px; box-shadow:0 18px 44px rgba(11,46,64,.16); }
@media (max-width:700px){ .contact-map .map-frame{ height:340px; } }

/* awards strip: show full certificates */
.awards-track img{ object-fit:contain !important; background:#eef3f7; }

/* ==========================================================================
   PROJECT CARD BUTTONS — Enquire + WhatsApp always fit inside the card
   (overrides the old icon-only 48px WhatsApp box on mobile)
   ========================================================================== */
.project-actions{ display:flex !important; flex-wrap:wrap; gap:10px !important; align-items:stretch; width:100%; }
.project-actions .button,
.project-actions .whatsapp-button{
    flex:1 1 140px !important; min-width:0; width:auto !important; height:auto !important; min-height:46px;
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px !important;
    padding:12px 16px !important; margin:0 !important; border-radius:100px !important;
    font-size:11px !important; letter-spacing:1px; line-height:1.2; white-space:nowrap; box-sizing:border-box;
}
.project-actions .whatsapp-button{
    background:#fff !important; color:var(--navy,#0b2e40) !important;
    border:1.5px solid rgba(11,46,64,.25) !important; box-shadow:none !important;
}
.project-actions .whatsapp-button i{ font-size:17px !important; color:#25D366 !important; flex:0 0 auto; position:static; }
@media (max-width:768px){
    .project-actions .button,
    .project-actions .whatsapp-button{ font-size:11px !important; padding:12px 10px !important; flex-basis:120px !important; }
}
@media (max-width:340px){ .project-actions .button,.project-actions .whatsapp-button{ flex-basis:100% !important; } }

/* ==========================================================================
   FOOTER — contact details visible on every page & every screen size
   (old css hid the Contact column at tablet/mobile widths)
   ========================================================================== */
.footer-main>div:last-child{ display:block !important; }
.footer-main .footer-contact{ word-break:break-word; overflow-wrap:anywhere; margin-bottom:10px; }
@media (max-width:1000px){ .footer-main{ grid-template-columns:1fr 1fr !important; gap:30px !important; } .footer-main>div:first-child{ grid-column:1 / -1 !important; } }
@media (max-width:640px){
    .footer-main{ grid-template-columns:1fr 1fr !important; }
    .footer-main>div:last-child{ grid-column:1 / -1 !important; padding-top:6px; border-top:1px solid rgba(255,255,255,.14); }
}