/* home-updates.css - SKY SRI WEB PRODUCTIONS front-end update (Oct 2026). Load AFTER style.css. */

html{ scroll-padding-top:150px; }

.tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:fit-content; max-width:calc(100% - 32px); margin:14px auto; background:rgba(11,11,11,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:10px 16px; border:1px solid var(--line-strong, rgba(174,184,194,.28)); border-radius:40px; box-shadow:0 14px 34px rgba(0,0,0,.45); }
.tabs a{ border:1px solid var(--line-strong, rgba(174,184,194,.28)); padding:8px 16px; border-radius:20px; font-size:.78rem; font-weight:700; color:var(--steel, #aeb8c2); white-space:nowrap; flex:none; text-decoration:none; transition:color .18s, border-color .18s; }
.tabs a:hover,
.tabs a.is-current{ color:var(--paper, #f2f1ec); border-color:var(--signal, #c99a4a); }

@media (max-width:900px){
  html{ scroll-padding-top:120px; }
  .tabs{
    flex-wrap:nowrap; justify-content:flex-start; width:auto; max-width:none;
    margin:0; padding:6px var(--gutter, 20px); border:none; border-radius:0;
    border-top:1px solid var(--line, rgba(174,184,194,.14)); box-shadow:none; background:rgba(11,12,14,.92);
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:6px;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs a{ padding:4px 9px; font-size:.62rem; border-radius:16px; }
}

/* === Update 2026-10-02: hero slideshow === */
.hero{ isolation:isolate; }
.hero-slides{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--ink); }
.hero-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transform:scale(1.08); transition:opacity 1.6s ease, transform 9s linear; }
.hero-slide.is-on{ opacity:1; transform:scale(1); }
.hero-shade{ position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(11,12,14,.94) 0%, rgba(11,12,14,.82) 38%, rgba(11,12,14,.5) 72%, rgba(11,12,14,.38) 100%),
  linear-gradient(180deg, rgba(11,12,14,.55) 0%, transparent 25%, transparent 70%, var(--ink) 100%); }
@media (max-width:900px){ .hero-shade{ background:linear-gradient(180deg, rgba(11,12,14,.72) 0%, rgba(11,12,14,.84) 45%, rgba(11,12,14,.95) 100%); } }

/* Desktop: slideshow fills the right side at close to 16:9, fading into the dark behind the headline, so faces are not cropped */
@media (min-width:901px){
  .hero{ min-height:min(40vw, calc(100vh - 170px)); display:flex; align-items:center; }
  .hero > .container{ width:100%; }
  .hero-slides{ left:auto; right:0; width:72vw; background:transparent;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%); }
  .hero-slide{ object-position:center 30%; }
  .hero-shade{ background:
    linear-gradient(90deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,.25) 55%, rgba(11,12,14,.15) 100%),
    linear-gradient(180deg, rgba(11,12,14,.35) 0%, transparent 20%, transparent 78%, var(--ink) 100%); }
}
@media (prefers-reduced-motion: reduce){ .hero-slide{ transition:none; transform:none; } }
/* === Update: mobile fixes === */
@media (max-width:460px){ .brand-text{ display:none; } }
.stills-carousel__dot{ position:relative; }
.stills-carousel__dot::after{ content:""; position:absolute; inset:-10px -5px; }
.play-badge-label{ font-size:.74rem; }
/* === Update: Pearl Bay logo on a dark tile === */
.client-cell.client-cell--dark{ background:var(--panel-2); border:1px solid var(--line-strong); }

/* === Update: nav shows every link on phones (2 rows of 4, no sideways scroll) === */
@media (max-width:900px){
  .tabs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; overflow:visible; padding:8px var(--gutter); }
  .tabs a{ text-align:center; padding:6px 4px; font-size:.66rem; border-radius:14px; }
}
@media (max-width:360px){ .tabs a{ font-size:.6rem; padding:6px 2px; } }

/* === Update: stills row under each production (IMDb-style photo strip) === */
.stills-row{ grid-column:1/-1; min-width:0; margin-top:6px; }
.stills-row__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.stills-row__head h4{ font-family:var(--font-body); font-size:.74rem; font-weight:700; letter-spacing:.14em; color:var(--signal); text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.stills-row__head h4::before{ content:''; width:22px; height:1px; background:var(--signal); }
.stills-row__head h4 span{ color:var(--steel-dim); letter-spacing:.08em; font-weight:600; }
.stills-row__nav{ display:flex; gap:8px; }
.stills-row__nav button{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel); color:var(--paper); font-size:1.3rem; line-height:1; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.stills-row__nav button:hover{ background:var(--signal); border-color:var(--signal); color:#171106; }
.stills-row__track{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(220px,22vw,300px); gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:12px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; -webkit-overflow-scrolling:touch; }
.still-thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line-strong); background:var(--panel-2); scroll-snap-align:start; cursor:zoom-in; }
.still-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease, filter .3s ease; filter:saturate(.92); }
.still-thumb:hover img{ transform:scale(1.06); filter:none; }
.still-thumb--empty{ cursor:default; border-style:dashed; display:grid; place-items:center; background:transparent; }
.still-thumb--empty span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-dim); }
@media (max-width:700px){ .stills-row__track{ grid-auto-columns:72vw; } .stills-row__nav{ display:none; } }
@media (prefers-reduced-motion: reduce){ .stills-row__track{ scroll-behavior:auto; } }
/* === Update: Google sections === */
.btn svg{ width:16px; height:16px; flex:none; }
:root{ --signal-hi:#e0b062; --open:#5fbf7a; }
/* ---------- Google reviews ---------- */
.gr-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-bottom:40px}
.score{display:flex;align-items:center;gap:18px;padding:18px 22px;border:1px solid var(--line-strong);border-radius:6px;background:var(--panel)}
.score-num{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.score-num.is-empty{color:var(--steel-dim)}
.stars{display:flex;gap:3px}
.stars svg{width:18px;height:18px}
.score small{display:block;color:var(--steel);font-size:.8rem;margin-top:6px}
.g-mark{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--steel)}
.g-mark b{font-family:var(--font-body);font-size:1rem;font-weight:800;letter-spacing:-.02em}
.gr-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gr-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);min-width:0}
.gr-card .who{display:flex;align-items:center;gap:12px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--panel);border:1px solid var(--line-strong);display:grid;place-items:center;font-family:var(--font-display);color:var(--signal)}
.bar{height:9px;border-radius:5px;background:linear-gradient(90deg,var(--line-strong),var(--line))}
.lines{display:grid;gap:9px}
.gr-card .src{margin-top:auto;display:flex;justify-content:space-between;align-items:center;color:var(--steel-dim);font-size:.74rem;padding-top:14px;border-top:1px solid var(--line)}
.sample-tag{position:absolute;top:12px;right:12px;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#171106;background:var(--signal);padding:3px 8px;border-radius:3px}
/* empty state cards */
.gr-card.slot{background:transparent;border:1px dashed var(--line-strong);align-items:flex-start;justify-content:flex-start;min-height:220px}
.slot .q{font-family:var(--font-display);font-size:3.2rem;line-height:.6;color:var(--signal);opacity:.55}
.slot p{margin:0;color:var(--steel);font-size:.92rem;max-width:30ch}
.slot .stars svg{width:16px;height:16px}
.reviews-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:32px}
.reviews-cta p{margin:0;color:var(--steel-dim);font-size:.85rem}

/* ---------- Find us on Google ---------- */
.locate{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:center}
.listing{border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);overflow:hidden}
.listing-head{padding:24px 24px 18px;border-bottom:1px solid var(--line)}
.listing-head h3{font-size:1.35rem}
.listing-head .type{color:var(--steel);font-size:.86rem;margin-top:6px}
.status{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:.82rem;color:var(--steel)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--open);box-shadow:0 0 0 4px rgba(95,191,122,.15)}
.status b{color:var(--open);font-weight:700}
.facts{display:grid;margin:0;padding:6px 24px}
.facts div{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.facts div:last-child{border-bottom:0}
.facts svg{width:18px;height:18px;color:var(--signal);margin-top:3px}
.facts dt{position:absolute;left:-9999px}
.facts dd{margin:0;color:var(--paper)}
.facts dd small{display:block;color:var(--steel-dim);font-size:.78rem}
.listing-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.listing-actions a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;font-size:.78rem;font-weight:700;color:var(--steel);border-left:1px solid var(--line);transition:background .18s,color .18s;text-align:center}
.listing-actions a:first-child{border-left:0}
.listing-actions a:hover{background:var(--panel-2);color:var(--paper)}
.listing-actions svg{width:20px;height:20px;color:var(--signal)}

.chart{position:relative;border:1px solid var(--line-strong);border-radius:8px;background:radial-gradient(ellipse at 70% 60%,rgba(201,154,74,.10),transparent 60%),var(--panel);aspect-ratio:16/11;max-width:100%;overflow:hidden}
.chart canvas{position:absolute;inset:0;width:100%;height:100%}
.chart-label{position:absolute;display:flex;flex-direction:column;gap:2px;pointer-events:none}
.chart-label b{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;color:var(--paper)}
.chart-label span{font-size:.72rem;color:var(--steel)}
.chart-label.lk{right:7%;bottom:12%;text-align:right}
.chart-label.uae{left:6%;top:12%}
.chart-foot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:10px;padding:10px 14px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-dim);border-top:1px solid var(--line);background:rgba(11,12,14,.55)}
.locate-copy{display:grid;gap:22px}
.search-chip{display:flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel-2);color:var(--paper);font-size:.92rem;max-width:420px}
.search-chip svg{width:18px;height:18px;color:var(--steel);flex:none}
.search-chip .caret{width:1px;height:18px;background:var(--signal);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.search-chip .caret{animation:none}}

.gmap-frame{position:relative;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--panel);aspect-ratio:16/11;max-width:100%}
.gmap-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gmap-open{position:absolute;right:12px;bottom:12px;background:var(--signal);color:#171106;font-weight:700;font-size:.8rem;padding:9px 14px;border-radius:2px}
.gmap-open:hover{background:var(--signal-hi)}
.gmap-note{position:absolute;left:12px;bottom:12px;background:rgba(11,12,14,.8);color:var(--steel);font-size:.7rem;letter-spacing:.06em;padding:6px 10px;border-radius:3px}
@media (max-width:480px){.gmap-frame{aspect-ratio:4/3}.gmap-note{display:none}}

@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.search-chip .caret{animation:none}}
@media (max-width:480px){.gmap-frame{aspect-ratio:4/3}.gmap-note{display:none}}
@media (max-width:900px){
  .locate{grid-template-columns:1fr;gap:32px}
  .gr-top{grid-template-columns:1fr;align-items:start}
  .gr-row{grid-template-columns:1fr}
  .gr-card.slot{min-height:0}
  .gr-row .gr-card.slot:nth-child(n+2){display:none}
}
@media (max-width:480px){
  
  .listing-actions a{font-size:.72rem}
  .chart{aspect-ratio:4/3}
  .chart-foot span:last-child{display:none}
}

.gmap-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:900px){ .gr-row .gr-card.slot:nth-child(n+2){ display:none; } }

/* =====================================================================
   Update 2026-10-02 (evening): solid header that stays on screen
   while scrolling, on every page, desktop + mobile.
   (position:fixed instead of sticky - sticky was being cancelled by the
   page's overflow-x setting.) --head-h is measured by a tiny script in
   includes/header.php so the page content starts just below the bar.
   ===================================================================== */
:root{ --head-h:78px; }
.site-header{
  position:fixed !important; top:0; left:0; right:0; z-index:200;
  background:#0b0c0e !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
body{ padding-top:var(--head-h); }
html{ scroll-padding-top:calc(var(--head-h) + 12px) !important; }
.tabs{ background:#111316; }
@media (max-width:900px){
  .tabs{ background:#0b0c0e; }
}
@media (max-width:700px){
  .site-header .container{ height:62px; }
  .brand img{ height:34px; }
}

/* =====================================================================
   Mobile hero: the slideshow becomes a full-width 16:9 film frame at the
   top of the hero (whole picture visible, nothing cropped), with the
   headline and buttons on clean dark ground underneath.
   ===================================================================== */
@media (max-width:900px){
  .hero{ padding-top:0 !important; padding-bottom:56px !important; min-height:0 !important; display:block !important; }
  .hero-slides{
    position:relative !important; inset:auto !important; left:auto !important; right:auto !important;
    width:100% !important; height:0 !important; padding-bottom:56.25% !important; aspect-ratio:auto; z-index:0; overflow:hidden !important;
    -webkit-mask-image:none !important; mask-image:none !important;
    margin-bottom:28px; border-bottom:1px solid var(--line, rgba(174,184,194,.14));
  }
  .hero-slide{ object-position:center center !important; transform:scale(1.04); }
  .hero-slide.is-on{ transform:scale(1); }
  .hero-shade{ background:linear-gradient(180deg, rgba(11,12,14,.25) 0%, transparent 30%, transparent 70%, rgba(11,12,14,.85) 100%) !important; }
  .hero h1{ font-size:clamp(2.3rem, 11vw, 3.4rem); }
  .hero-lede{ font-size:1rem; margin-top:16px; }
  .hero-actions{ margin-top:24px; }
}

/* =====================================================================
   Mobile redesign (phones, up to 700px)
   - Slim solid top bar: logo + "Start a Project" only (WhatsApp / Call
     already live in the bottom bar, so they are not repeated up top).
   - Section menu: 2 tidy rows of small pills.
   - Hero: full 16:9 film frame, then headline, buttons side by side,
     and the Sri Lanka / UAE / 2006 facts as one compact 3-column row.
   ===================================================================== */
@media (max-width:700px){
  .site-header .container{ height:58px; gap:10px; }
  .brand img{ height:32px; }
  .header-actions .hotline-link,
  .header-actions .icon-link{ display:none !important; }
  .header-actions .btn{ padding:9px 14px; font-size:.74rem; }

  .tabs{ gap:5px; padding:6px 12px 8px; }
  .tabs a{ padding:5px 2px; font-size:.64rem; border-radius:12px; }

  .hero-slides{ margin-bottom:22px; }
  .hero-eyebrow{ font-size:.7rem; margin-bottom:14px; }
  .hero h1{ font-size:clamp(2.1rem, 10.5vw, 3rem); line-height:1.02; }
  .hero-lede{ font-size:.95rem; line-height:1.6; color:var(--steel, #aeb8c2); }
  .hero-actions{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px; }
  .hero-actions .btn{ width:100%; padding:13px 10px; font-size:.86rem; }
  .hero-actions .hero-wa-btn{ display:none !important; }

  .hero-meta{
    display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0;
    margin-top:30px; border-top:1px solid var(--line, rgba(174,184,194,.14));
  }
  .hero-meta > div{ padding:14px 8px 0 0; min-width:0; }
  .hero-meta > div + div{ padding-left:10px; border-left:1px solid var(--line, rgba(174,184,194,.14)); }
  .hero-meta strong{ display:block; font-size:1.05rem !important; line-height:1.2; }
  .hero-meta span{ display:block; font-size:.68rem !important; line-height:1.35; margin-top:4px; }
}

/* slide progress dots on the mobile film frame */
.hero-dots{ display:none; }
@media (max-width:900px){
  .hero-dots{ display:flex; gap:6px; position:absolute; left:50%; transform:translateX(-50%); bottom:12px; z-index:3; }
  .hero-dots i{ width:6px; height:6px; border-radius:3px; background:rgba(242,241,236,.45); transition:width .3s, background .3s; }
  .hero-dots i.is-on{ width:18px; background:var(--signal, #c99a4a); }
}

/* iPhone/Safari: make sure each slide fills the 16:9 frame */
@media (max-width:900px){
  .hero-slide{ position:absolute !important; top:0; left:0; width:100% !important; height:100% !important; object-fit:cover; }
}

/* =====================================================================
   Mobile header brand bar (phones, up to 700px): show the company name +
   "Production House · LK / UAE" next to the logo, and the call + WhatsApp
   buttons on the right, like the desktop bar. "Start a Project" lives in
   the hero and the bottom bar, so it is not repeated up here.
   ===================================================================== */
@media (max-width:700px){
  .site-header .container{ height:60px; gap:10px; }
  .brand{ gap:10px; }
  .brand img{ height:30px; }
  .brand-text{ display:block !important; font-size:clamp(.7rem, 3.3vw, .84rem) !important; letter-spacing:.02em; line-height:1.1; }
  .brand-text small{ display:block !important; font-size:clamp(.46rem, 2.1vw, .52rem) !important; letter-spacing:.1em; margin-top:3px; }
  .header-actions{ gap:6px !important; }
  .header-actions .hotline-link,
  .header-actions .icon-link{ display:inline-flex !important; width:36px; height:36px; padding:0; justify-content:center; }
  .header-actions .hotline-link span{ display:none; }
  .header-actions .btn{ display:none !important; }
}
@media (max-width:359px){
  .brand img{ display:none; }
}