/* ==========================================================================
   Explore Byndoor — Desktop refinements
   Loaded after the inline styles in index.html, so these rules win.

   Scope: everything here is inside @media(min-width:900px) except the
   reduced-motion block, so mobile is completely untouched.

   Design intent: the coast itself is the subject — long horizontals, a
   laterite-and-sea palette, and motion that behaves like water (slow ease,
   never bouncy). Hover states exist on desktop only, where a cursor exists.
   ========================================================================== */

/* ── Desktop-only ─────────────────────────────────────────────────────── */
@media (min-width: 900px) {

  /* ── NAV ──────────────────────────────────────────────────────────────
     Sits above the hero as a translucent bar, then gains a solid backing
     once the user scrolls (class added by desktop-polish.js).            */
  .dsk-nav{
    position:fixed;top:0;left:0;right:0;height:66px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 clamp(20px,4vw,56px);
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px) saturate(1.4);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    border-bottom:1px solid rgba(0,0,0,.06);
    z-index:500;
    transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .dsk-nav.scrolled{
    background:rgba(255,255,255,.94);
    box-shadow:0 2px 20px rgba(0,0,0,.07);
  }
  body.dark .dsk-nav{
    background:rgba(18,28,25,.78);
    border-bottom-color:rgba(255,255,255,.08);
  }
  body.dark .dsk-nav.scrolled{ background:rgba(18,28,25,.96); }

  .dsk-logo{
    font-family:'Playfair Display',serif;font-size:1.06rem;font-weight:700;
    color:var(--dark);text-decoration:none;
    display:flex;align-items:center;gap:9px;letter-spacing:-.01em;
    white-space:nowrap;
  }
  body.dark .dsk-logo{ color:#eaf3ef; }
  .dsk-dot{
    width:7px;height:7px;border-radius:50%;background:var(--p);
    box-shadow:0 0 0 0 rgba(10,124,110,.5);
    animation:dskPulse 2.8s ease-out infinite;
  }
  @keyframes dskPulse{
    0%   {box-shadow:0 0 0 0 rgba(10,124,110,.45)}
    70%  {box-shadow:0 0 0 9px rgba(10,124,110,0)}
    100% {box-shadow:0 0 0 0 rgba(10,124,110,0)}
  }

  .dsk-links{display:flex;align-items:center;gap:2px}

  .dsk-btn{
    background:none;border:none;cursor:pointer;
    font-family:'DM Sans',sans-serif;font-size:.79rem;font-weight:600;
    color:var(--muted);padding:9px 13px;border-radius:9px;
    position:relative;white-space:nowrap;
    transition:color .2s ease, background .2s ease;
  }
  .dsk-btn:hover{ color:var(--dark); background:rgba(0,0,0,.04); }
  body.dark .dsk-btn:hover{ color:#eaf3ef; background:rgba(255,255,255,.07); }

  /* Active tab marked with a short underline rather than a filled pill —
     quieter, and it echoes the shoreline motif. */
  .dsk-btn.on{ color:var(--p); }
  .dsk-btn.on::after{
    content:'';position:absolute;left:13px;right:13px;bottom:3px;height:2px;
    background:var(--p);border-radius:2px;
    animation:dskUnderline .32s cubic-bezier(.4,0,.2,1);
  }
  @keyframes dskUnderline{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

  .dsk-dark-btn{
    background:none;border:none;cursor:pointer;font-size:1rem;
    padding:7px 9px;border-radius:9px;margin-left:4px;
    transition:background .2s ease, transform .3s ease;
  }
  .dsk-dark-btn:hover{ background:rgba(0,0,0,.05); transform:rotate(-18deg); }

  .dsk-ai{
    margin-left:10px;background:var(--p);color:#fff;text-decoration:none;
    font-family:'DM Sans',sans-serif;font-size:.79rem;font-weight:700;
    padding:9px 17px;border-radius:22px;white-space:nowrap;
    box-shadow:0 3px 12px rgba(10,124,110,.28);
    transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
  }
  .dsk-ai:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(10,124,110,.4);
  }

  /* ── HERO ─────────────────────────────────────────────────────────────
     Full-bleed, with the copy anchored low-left and a gradient scrim so
     text stays legible over the video regardless of frame.               */
  .hero-bg{
    min-height:88vh;
    padding:0 clamp(28px,6vw,88px) clamp(56px,7vh,96px);
    display:flex;flex-direction:column;justify-content:flex-end;
    position:relative;
  }
  .hero-bg::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(6,20,17,.78) 0%,rgba(6,20,17,.28) 42%,rgba(6,20,17,.12) 100%);
  }
  .hero-body{max-width:760px;position:relative;z-index:2}

  .hero-title{
    font-size:clamp(3.2rem,5.4vw,5rem);
    line-height:.98;letter-spacing:-.022em;
    text-shadow:0 3px 30px rgba(0,0,0,.35);
  }
  .hero-sub{
    font-size:1rem;line-height:1.7;max-width:560px;
    margin-bottom:30px;opacity:.94;
  }

  /* Staged entrance — the page assembles rather than popping in. */
  .hero-body > *{
    opacity:0;transform:translateY(22px);
    animation:heroRise .95s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-body > *:nth-child(1){ animation-delay:.12s }
  .hero-body > *:nth-child(2){ animation-delay:.24s }
  .hero-body > *:nth-child(3){ animation-delay:.36s }
  .hero-body > *:nth-child(4){ animation-delay:.48s }
  @keyframes heroRise{ to{opacity:1;transform:translateY(0)} }

  .hbtn-primary,.hbtn-ghost{
    padding:14px 30px;font-size:.88rem;
    transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease;
  }
  .hbtn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(10,124,110,.42); }
  .hbtn-ghost:hover{ transform:translateY(-3px); background:rgba(255,255,255,.2); }

  /* ── WEATHER + COAST side by side ─────────────────────────────────────
     Two live-conditions panels read as one unit on a wide screen.
     align-items:start keeps the shorter card at its natural height rather
     than stretching it and leaving a dead gap in the middle.             */
  .conditions-row{
    max-width:1240px;margin:26px auto 34px;padding:0 clamp(20px,5vw,56px);
    display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;
    position:relative;z-index:3;
  }
  .conditions-row .weather-widget,
  .conditions-row .coast-card{ margin:0 }

  .conditions-row .weather-widget{
    display:flex;flex-direction:column;gap:14px;
    padding:22px 26px;border-radius:22px;
    box-shadow:0 10px 32px rgba(0,0,0,.09);
  }
  .conditions-row .ww-icon{font-size:2.3rem;line-height:1}
  .conditions-row .ww-main{display:flex;flex-direction:column;gap:1px}
  .conditions-row .ww-temp{font-size:1.9rem;line-height:1.05}
  .conditions-row .ww-pills{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  }
  .conditions-row .coast-card{
    border-radius:22px;box-shadow:0 10px 32px rgba(10,124,110,.18);
  }

  /* ── CARD MICRO-INTERACTIONS ──────────────────────────────────────────
     Slow, water-like ease. Image scales inside a fixed frame so the card
     edge stays crisp.                                                    */
  .pcard,.lcard,.ncard,.ecard{
    transition:transform .5s cubic-bezier(.16,1,.3,1),
               box-shadow .5s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .pcard:hover,.lcard:hover,.ncard:hover,.ecard:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 46px rgba(0,0,0,.16);
  }
  .pcard-img,.lcard-img,.ncard-img{overflow:hidden}
  .pcard-img img,.lcard-img img,.ncard-img img{
    transition:transform 1.1s cubic-bezier(.16,1,.3,1);
  }
  .pcard:hover .pcard-img img,
  .lcard:hover .lcard-img img,
  .ncard:hover .ncard-img img{ transform:scale(1.07); }

  /* The in-view scale from the mobile styles fights the hover lift on
     desktop — neutralise it and let hover own the interaction. */
  .lcard.in-view,.ncard.in-view{ transform:none; opacity:1; }

  /* ── SECTION HEADINGS ─────────────────────────────────────────────────
     A short rule to the left of each heading: a horizon line.            */
  .sh h2{
    font-size:1.5rem;letter-spacing:-.015em;
    display:flex;align-items:center;gap:14px;
  }
  .sh h2::before{
    content:'';width:34px;height:2px;background:var(--p);
    border-radius:2px;flex-shrink:0;opacity:.8;
  }

  /* ── LOCAL DIRECTORY — 3 across instead of a long list ────────────────*/
  #more .emcard{
    transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  }
  #more .emcard:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 32px rgba(0,0,0,.12);
  }

  /* ── CATEGORY DIRECTORY OVERLAY ───────────────────────────────────────*/
  #catdir-list{
    max-width:1240px;margin:0 auto;
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:20px;padding:26px clamp(20px,5vw,56px) 80px;
  }
  #catdir-list .lcard{margin:0}
  #catdir-head{padding:16px clamp(20px,5vw,56px)}

  /* ── TABS ─────────────────────────────────────────────────────────────*/
  .tab{
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .tab:hover:not(.active){ transform:translateY(-2px); }

  /* ── FOOTER ───────────────────────────────────────────────────────────*/
  .footer{padding:60px clamp(20px,5vw,56px) 44px}

  /* ── SCROLL-TOP button clear of the nav ───────────────────────────────*/
  .scroll-top{bottom:34px;right:34px;width:48px;height:48px}

  /* Offline bar has no bottom nav to clear on desktop */
  #offline-bar.show{bottom:0}
}

/* ── Wider screens: give the grid more room ─────────────────────────────*/
@media (min-width: 1440px) {
  .pgrid{grid-template-columns:repeat(4,1fr)}
  .hero-title{font-size:5.2rem}
}

/* ── Accessibility: honour reduced-motion at every width ────────────────*/
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-body > *{opacity:1;transform:none}
}

/* ── Visible keyboard focus (all widths) ────────────────────────────────*/
.dsk-btn:focus-visible,.dsk-ai:focus-visible,.tab:focus-visible,
.hbtn-primary:focus-visible,.hbtn-ghost:focus-visible,
.lcard-wa:focus-visible{
  outline:2px solid var(--p);
  outline-offset:3px;
  border-radius:8px;
}


/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP LANDING
   The app content below is phone-shaped by design. These sections give a
   laptop visitor something to read and orient by first.

   Signature: the CONDITIONS RIBBON. Byndoor is a coast where the day is
   decided by things most sites never mention — when the sun sets over the
   water, whether the tide is going out, whether the falls are running. The
   app already tracks all of it, so the page leads with it rather than with
   the usual "welcome to our beautiful town" block.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  .dsec{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
  .dsec-wide{background:var(--card);border-top:1px solid var(--bdr);
    border-bottom:1px solid var(--bdr)}

  /* Eyebrow: small, letterspaced, used to label a section's role */
  .deyebrow{
    font-family:'DM Sans',sans-serif;font-size:.63rem;font-weight:700;
    letter-spacing:2.4px;text-transform:uppercase;color:var(--p);
    display:flex;align-items:center;gap:10px;margin-bottom:12px;
  }
  .deyebrow::after{content:'';flex:1;height:1px;background:var(--bdr)}

  /* ── SIGNATURE: conditions ribbon ────────────────────────────────────── */
  .cond-ribbon{
    background:linear-gradient(100deg,#0b2740,#0e4f52 55%,#0a7c6e);
    color:#fff;position:relative;overflow:hidden;
  }
  .cond-ribbon::before{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.20;
    background:
      repeating-linear-gradient(102deg,transparent 0 38px,rgba(255,255,255,.5) 38px 39px);
  }
  .cond-inner{
    max-width:1240px;margin:0 auto;padding:22px clamp(20px,5vw,56px);
    display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
    position:relative;z-index:1;
  }
  .cond-label{
    font-size:.62rem;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
    color:rgba(255,255,255,.72);line-height:1.7;max-width:112px;
  }
  .cond-label b{display:block;font-family:'Playfair Display',serif;
    font-size:1.15rem;letter-spacing:0;text-transform:none;color:#fff}
  .cond-items{display:flex;gap:clamp(20px,3.4vw,46px);flex-wrap:wrap}
  .cond-i{min-width:112px}
  .cond-k{font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;
    color:rgba(255,255,255,.62);margin-bottom:4px}
  .cond-v{font-family:'DM Sans',sans-serif;font-size:1.32rem;font-weight:700;
    line-height:1.1;font-variant-numeric:tabular-nums}
  .cond-x{font-size:.66rem;color:rgba(255,255,255,.72);margin-top:3px}
  .cond-v .u{font-size:.8rem;font-weight:500;opacity:.8;margin-left:2px}

  /* ── Introduction ────────────────────────────────────────────────────── */
  .dintro{padding:66px 0 58px}
  .dintro-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(36px,6vw,84px);align-items:start}
  .dintro h2{
    font-family:'Playfair Display',serif;font-size:clamp(2rem,3.3vw,2.85rem);
    line-height:1.12;letter-spacing:-.02em;color:var(--dark);margin-bottom:18px;
  }
  .dintro p{font-size:.95rem;line-height:1.85;color:var(--muted);margin-bottom:14px;max-width:60ch}
  .dintro p strong{color:var(--dark);font-weight:600}

  /* Counts of what is actually in the guide — honest labels, not marketing */
  .dcount{display:grid;grid-template-columns:1fr 1fr;gap:2px;
    background:var(--bdr);border:1px solid var(--bdr);border-radius:16px;overflow:hidden}
  .dcount div{background:var(--card);padding:18px 20px}
  .dcount b{display:block;font-family:'Playfair Display',serif;font-size:1.9rem;
    color:var(--p);line-height:1;margin-bottom:5px}
  .dcount span{font-size:.68rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}

  /* ── Practical strip ─────────────────────────────────────────────────── */
  .dpract{padding:52px 0 60px}
  .dpract-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
  .dpract-card{
    background:var(--card);border:1px solid var(--bdr);border-radius:18px;
    padding:22px 22px 20px;cursor:pointer;
    transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .3s;
  }
  .dpract-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(0,0,0,.10);
    border-color:transparent}
  .dpract-ico{font-size:1.5rem;margin-bottom:10px;display:block}
  .dpract-card h3{font-family:'Playfair Display',serif;font-size:1.12rem;
    color:var(--dark);margin-bottom:5px}
  .dpract-card p{font-size:.76rem;line-height:1.65;color:var(--muted)}
  .dpract-go{font-size:.68rem;font-weight:700;color:var(--p);margin-top:11px;display:inline-block}

  /* Footer sitemap */
  .dfoot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px;
    max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,56px) 6px;text-align:left}
  .dfoot h4{font-size:.64rem;letter-spacing:1.8px;text-transform:uppercase;
    color:rgba(255,255,255,.55);margin-bottom:12px}
  .dfoot a{display:block;color:rgba(255,255,255,.85);text-decoration:none;
    font-size:.8rem;padding:4px 0;cursor:pointer;transition:color .2s}
  .dfoot a:hover{color:#fff}
  .dfoot-about{font-size:.8rem;line-height:1.75;color:rgba(255,255,255,.7);max-width:38ch}
}

@media (max-width: 899px){
  .cond-ribbon,.dintro,.dpract,.dfoot{display:none}
}


@media (min-width: 900px) {
  /* Card images were being cropped to a 168px band, which cut the top and
     bottom off every photo. A 4:3 box shows far more of the picture, and
     object-position favours the upper part where the subject usually sits. */
  .pcard-img,
  .pgrid .pcard:first-child .pcard-img{
    height:auto;aspect-ratio:4/3;
  }
  .pcard-img img{
    width:100%;height:100%;object-fit:cover;object-position:center 42%;
  }
  .lcard-img{height:auto;aspect-ratio:4/3}
  .lcard-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

  /* Give the featured first card a wider frame rather than a taller crop */
  .pgrid .pcard:first-child .pcard-img{aspect-ratio:16/10}
}

/* ══ ONE ORCHESTRATED REVEAL ══
   A single considered entrance for the desktop landing, rather than every
   card fading in on its own — the intro copy and the three practical cards
   arrive together as one composed moment when they first come into view. */
@media (min-width: 900px) {
  .dreveal{opacity:0;transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .dreveal.in{opacity:1;transform:none}
  .dreveal.d1{transition-delay:.05s}
  .dreveal.d2{transition-delay:.16s}
  .dreveal.d3{transition-delay:.24s}
  .dreveal.d4{transition-delay:.32s}
}