/* zoltadvisors.com on phones (ZT-200, Ivo 28 Sep: "the fixes and adjustments we make on mobile are separate to the desktop
   version, since we are crafting each by hand now"). This file loads only on phones: Night.astro links it with
   media="(max-width: 767px)", so nothing here can move the desktop or tablet layout. Every phone-only change goes here. */

/* ---------- The homepage hero on phones (Ivo, 28 Sep: "more view of the city, and the logo closer to the middle") ----------
   The whole phone scene across the screen (the afterglow, the skyline and the bridge, the water, the edge of the stone),
   and the Z standing in the middle on the stone, in front of the city; the words follow, centred under it. The tip's
   height follows the screen's (half of it, 280 to 440 px), so the buttons stay on the first screen from the smallest
   iPhone up; the Z is a little smaller than before (at most 26% of the screen). Phones only: the tablet layout (561 to
   767 px) keeps water.css's. */
@media (max-width:560px){
  .hero-room{
    --mark-h:min(26svh,210px);
    --lw:calc(var(--mark-h) * .66);
    --ll:calc(50cqw - var(--lw) / 2);
    --lty:clamp(280px,50svh,440px);
    --lt:calc(var(--lty) - var(--mark-h) * .911);
    --ly:.6}
  /* The scene is exactly the hero's width, its point (x, 60% down) on the Z's tip. */
  .rm-back .rm-box{--bw:100cqw;--bh:calc(100cqw * 1.787778);left:0;top:calc(var(--lty) - var(--bh) * var(--ly))}
  .hero-room .hero-copy{text-align:center}
  .hero-room .hero-copy h1,.hero-room .hero-copy .deck{margin-inline:auto}
  .hero-room .ctas{justify-content:center}
}
/* Short phones (667 px tall and under): a little smaller and higher, so the Spanish page's two stacked buttons fit too. */
@media (max-width:560px) and (max-height:720px){
  .hero-room{--mark-h:min(24svh,210px);--lty:max(250px,45svh)}
}
/* The hero got a keyword line, a longer deck and two doors (ZT-384, Ivo, Oct 2): the Z a little smaller and higher so the
   buttons stay on the first screen; the EA chip under the buttons, the doors stacked, their words left-aligned. */
@media (max-width:560px){
  .hero-room{--mark-h:min(20svh,170px);--lty:clamp(240px,38svh,380px)}
  .hero .h1-kw{max-width:24em;margin-inline:auto;margin-bottom:var(--s3);font-size:14px}
  .hero-room .ctas .hero-ea{grid-column:1/-1;justify-self:center;min-height:32px;padding-block:6px;text-align:left}
  .hero-doors{grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s4);text-align:left}
  .hero-door{min-height:76px}
}
@media (max-width:560px) and (max-height:720px){
  .hero-room{--mark-h:min(18svh,140px);--lty:max(220px,34svh)}
}
/* The dot grid (ZT-387): the Z a step smaller again, and on phones the hero keeps its tighter spacing so the buttons stay
   on the first screen. */
@media (max-width:560px){
  .hero-room{--mark-h:min(17svh,150px);--lty:clamp(210px,30svh,300px)}
  .hero .h1-kw{margin-bottom:var(--s3)}
  .hero-room .deck{margin-top:var(--s3)}
  .hero-room .ctas{margin-top:var(--s5)}
  .hero-room .hero-doors{margin-top:var(--s5)}
}
@media (max-width:560px) and (max-height:720px){
  .hero-room{--mark-h:min(16svh,130px);--lty:max(196px,29svh)}
}


/* ---------- The homepage hero and the app phone (EN and ES) ----------
   Ivo, 28 Sep: "leave the phone in mobile in the box, no more of that phone movement". On a phone the hero is the plain
   hero (the words over the water, the Z on the glass), and the app phone sits still in its dark pocket under "Why we
   made Zolt", as on bigger screens, sized for the phone. */
.why-row{gap:var(--s5)}
.why-side{gap:var(--s5)}
.why-pocket{padding:28px 16px 32px}
/* The glow behind the phone sits a little lower on phones. */
.why-pocket::before{background-position:50% 64%}
.why-phone{--pw:min(46vw,190px)}

/* ---------- Jorge's mobile notes (review, Sep 28) ---------- */

/* EN/ES: the flip sits in the bar next to "Menu", so a Spanish speaker finds it at once (Jorge); its look is in
   site.css, shared with bigger screens. */
.lang-flip{margin-left:auto;margin-right:2px}
.head .brand{margin-right:0}
.head .menu-btn{padding-left:8px}


/* The three services: a little life, Zolt Gold at the edge and a soft blue glow from the corner (Jorge). */
.svc4-card{border-color:rgba(212,165,60,.34);background:radial-gradient(90% 120% at 0% 0%,rgba(0,163,224,.16),transparent 60%),linear-gradient(180deg,rgba(251,250,247,.04),rgba(251,250,247,0));box-shadow:inset 0 1px 0 rgba(212,165,60,.25)}
/* On the graphite: the shorthand above resets the tint, so it goes back on here (near-solid, as in site.css). */
.svc4-card{background-color:rgba(12,14,17,.82);box-shadow:inset 0 1px 0 rgba(212,165,60,.25),0 24px 48px -26px rgba(0,0,0,.95)}
.svc4-g{color:var(--zolt-gold)}

/* How we work: four quadrants, two by two, instead of four screens in a long column (Jorge). */
.app-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin-top:var(--s6)}
.app-steps>li,.as-screen{min-width:0}
.app-steps>li{gap:var(--s3)}
.as-screen{aspect-ratio:auto;min-height:124px;justify-content:flex-start;padding:12px;border-radius:16px;font-size:11.5px;gap:5px}
.as-big{font-size:15px}
.as-files li,.as-rem{padding:4px 6px;font-size:11px}
.as-rem{gap:6px}
.as-rem b{min-width:0}
.app-steps h3{font-size:15px;gap:8px}
/* In the app screens, a touch of brand blue in what you'd tap (Jorge): the booked pill and the current step. */
.as-ok{color:var(--blue-d)}
.as-ok::before{background:radial-gradient(circle,var(--blue) 0 3px,transparent 3.5px),rgba(0,163,224,.16)}
.ag-steps li.now{border-top-color:var(--blue)}

/* The portal: a smaller, softer window (Jorge: the white stood out too much against the night), with the login's
   look but not its fake fields. */
.portal-win{max-width:300px;margin-inline:auto;border-color:rgba(251,250,247,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.pw-bar i{display:none}
.pw-bar span{margin-left:0}
.pw-body{padding:22px 24px 24px;background:radial-gradient(60% 40% at 50% 12%,rgba(0,163,224,.12),transparent 70%),linear-gradient(180deg,#EFE8DB,#E3D9C7)}
.pw-f,.pw-in{display:none}

/* The form's choices: four boxes, two by two (Jorge), not one long column. */
.sf-opts:not(.sf-opts-2){grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-opt{min-height:56px;padding:8px 10px;font-size:15px}
/* The narrowest phones (under 360 px): the name, the flip and "Menu"/"Menú" don't fit in one bar, so the name steps aside
   visually (screen readers still hear it: the link keeps its text) and the mark alone stands for it. */
@media (max-width:359px){.head .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Under 360 px two columns get too narrow for the app screens: one column there. */
@media (max-width:359px){.app-steps{grid-template-columns:1fr}}
/* Glass on phones (Ivo, Oct 2): cards keep the black glass look without the blur, the costly part on a phone; buttons keep
   theirs (a few per screen). */
:is(.glass-card,.g-opt,.g-plan,.g-door,.g-ways-list li,.svc4-card,main.compat .card){-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 38%),linear-gradient(var(--frost-dark),var(--frost-dark)),var(--dots-lens),rgba(27,31,36,.86)}

/* ---------- The Zolt field on phones (ZT-391) ----------
   The tall still under the hero, and the hero's doors clear like the rest of its glass (the cards' phone fill above would
   hide the lens). */
@media (max-width:560px){
  .zf-still{background-image:url(/nl/field/still-tall.webp)}
}
.hero-room .hero-doors .hero-door.hero-door{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%),linear-gradient(var(--frost-dark),var(--frost-dark)),rgba(27,31,36,.34)}