/* ==========================================================================
   Layout: bottom sheet  (partials/site/more-sheet.blade.php)
   --------------------------------------------------------------------------
   A native-feeling bottom sheet: dimmed backdrop, panel slides up from the
   bottom with a drag handle. js/modules/sheet.js toggles [hidden] and
   .is-open (two steps, so the slide animates) and moves the panel while
   the user drags it down.
   ========================================================================== */

.sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet);
}
.sheet[hidden] { display: none; }

.sheet__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
}
.sheet.is-open .sheet__backdrop { opacity: 1; }

.sheet__panel {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    padding-bottom: var(--safe-bottom);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--paper);
    box-shadow: 0 -20px 50px -20px color-mix(in srgb, var(--ink) 45%, transparent);
    transform: translateY(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    will-change: transform;
}
.sheet.is-open .sheet__panel { transform: translateY(var(--drag, 0px)); }
.sheet__panel::before {   /* the logo's seven strokes along the top edge */
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: var(--rule7-h);
    background: var(--rule7);
    opacity: 0.5;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    pointer-events: none;
}
.sheet.is-dragging .sheet__panel { transition: none; }

/* Drag handle — the big touch target for swipe-to-close */
.sheet__handle { display: grid; place-items: center; height: 26px; cursor: grab; touch-action: none; }
.sheet__handle span { width: 44px; height: 5px; border-radius: var(--r-pill); background: var(--line-strong); }

.sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-5) var(--space-3);
}
.sheet__title { font-size: var(--fs-xl); }
.sheet__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--paper-deep);
    font-size: 1.2rem;
}

.sheet__body { overflow-y: auto; padding: 0 var(--space-5) var(--space-6); overscroll-behavior: contain; }

/* ── Page tiles ──────────────────────────────────────────────────────────── */
.sheet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

.sheet__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.sheet__tile:active { transform: scale(0.96); }
.sheet__tile.is-active { border-color: var(--second-strong); }

.sheet__tile-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    color: var(--ink);
    font-size: 1.3rem;
}

/* ── Quick contact ───────────────────────────────────────────────────────── */
.sheet__subtitle { margin: var(--space-6) 0 var(--space-3); font-size: var(--fs-lg); }

.sheet__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-2); }

.sheet__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.8em 0.5em;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
}
.sheet__action:hover { color: var(--ink); }
.sheet__action--book { border-color: var(--action); background: var(--action); color: #fff; }
.sheet__action--book:hover { color: #fff; }
.sheet__action--whatsapp { border-color: var(--whatsapp); background: var(--whatsapp); color: #06331A; }
.sheet__action--whatsapp:hover { color: #06331A; }

.sheet__hours {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.sheet__socials { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.sheet__social {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 1.2rem;
}

.sheet__legal { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-5); font-size: var(--fs-xs); }
.sheet__legal a { color: var(--ink-faint); }

/* ── Language row ────────────────────────────────────────────────────────── */
.sheet__lang { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 500; }