/*
 * PIKKMASTER BMV SUITE — Phase 4 Uyo hotel page.
 * Ported from the approved Uyo Hotel.dc.html without redesign.
 */

@keyframes pikk-asari-wa-in {
    from { opacity: 0; transform: scale(.4) translateY(20px); }
    to { opacity: 1; transform: none; }
}
@keyframes pikk-asari-wa-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
    70% { box-shadow: 0 0 0 22px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

.pikk-asari-main { background: #F7F4EF; }
.pikk-asari-shell { width: 100%; max-width: 1440px; margin: 0 auto; }
.pikk-asari-shell.rates-shell { max-width: 1180px; }

/* Hero */
.pikk-asari-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: #07162B;
    padding: clamp(104px, 15vh, 160px) clamp(20px, 5vw, 72px) clamp(34px, 6vh, 64px);
}
.pikk-asari-hero-media {
    position: absolute;
    inset: -12% 0 -6%;
    will-change: transform;
}
.pikk-asari-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: pikk-kb 26s ease-out both;
}
.pikk-asari-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,22,43,.82) 0%, rgba(7,22,43,.54) 32%, rgba(7,22,43,.90) 100%);
}
.pikk-asari-hero-content { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; }
.pikk-asari-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(18px, 3vh, 34px);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(247,244,239,.5);
    animation: pikk-fadeIn .9s ease .2s both;
}
.pikk-asari-breadcrumb a { color: rgba(247,244,239,.5); transition: color .3s ease; }
.pikk-asari-breadcrumb a:hover { color: #F7F4EF; }
.pikk-asari-breadcrumb .slash { color: var(--accent, #C8102E); }
.pikk-asari-breadcrumb .current { color: rgba(247,244,239,.8); }
.pikk-asari-title {
    margin: 0;
    max-width: 20ch;
    font-family: 'Spectral', serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 7.4vw, 6.2rem);
    line-height: .98;
    letter-spacing: -.012em;
    color: #F7F4EF;
}
.pikk-asari-title-mask { display: block; overflow: hidden; padding-bottom: .05em; }
.pikk-asari-title-mask > span { display: block; animation: pikk-maskUp 1.2s cubic-bezier(.16,.8,.24,1) .2s both; }
.pikk-asari-title-mask + .pikk-asari-title-mask > span { animation-delay: .34s; }
.pikk-asari-address {
    max-width: 46ch;
    margin: clamp(22px, 3.4vh, 40px) 0 0;
    font-family: 'Spectral', serif;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 400;
    line-height: 1.55;
    color: rgba(247,244,239,.9);
    text-wrap: pretty;
    animation: pikk-fadeUp 1s cubic-bezier(.16,.8,.24,1) .55s both;
}
.pikk-asari-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(26px, 4vh, 44px);
    animation: pikk-fadeUp 1s ease .72s both;
}
.pikk-asari-primary-cta,
.pikk-asari-secondary-cta,
.pikk-asari-dark-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 30px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.pikk-asari-primary-cta {
    background: var(--accent, #C8102E);
    color: #F7F4EF;
    transition: gap .4s ease, background .4s ease;
}
.pikk-asari-primary-cta:hover,
.pikk-asari-primary-cta:focus-visible { color: #F7F4EF; gap: 20px; background: #A80D26; }
.pikk-asari-primary-cta .line,
.pikk-asari-dark-cta .line { display: block; width: 18px; height: 1px; background: currentColor; }
.pikk-asari-secondary-cta {
    border: 1px solid rgba(247,244,239,.34);
    color: #F7F4EF;
    transition: background .4s ease, border-color .4s ease;
}
.pikk-asari-secondary-cta:hover,
.pikk-asari-secondary-cta:focus-visible { color: #F7F4EF; background: rgba(247,244,239,.1); border-color: #F7F4EF; }

/* Reusable section label + reveal */
.pikk-asari-reveal {
    opacity: 0;
    animation: pikk-revealUp 1s cubic-bezier(.16,.8,.24,1) both;
    animation-timeline: view();
    animation-range: entry 4% cover 30%;
}
.pikk-asari-section-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent, #C8102E);
}
.pikk-asari-section-label > span { display: block; width: 30px; height: 1px; background: var(--accent, #C8102E); }
.pikk-asari-section-label.light { color: rgba(247,244,239,.6); }
.pikk-asari-h2 {
    margin: clamp(20px, 3vw, 34px) 0 0;
    font-family: 'Spectral', serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 3.6rem);
    line-height: 1.06;
    color: #0A1B33;
    text-wrap: balance;
}

/* 1.1.14: Further reduce the full-address heading so it fits comfortably in the compact left intro area. */
.pikk-asari-intro h1.pikk-asari-h2 {
    font-size: clamp(1.35rem, 1.8vw, 2rem);
    line-height: 1.16;
    max-width: 24ch;
}

/* Intro */
.pikk-asari-intro { background: #F7F4EF; padding: clamp(64px, 11vh, 140px) clamp(20px, 5vw, 72px) clamp(48px, 8vh, 96px); }
.pikk-asari-intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: clamp(28px, 4.6vw, 90px);
    align-items: start;
}
.pikk-asari-intro-copy { animation-range: entry 4% cover 36%; }
.pikk-asari-copy {
    margin: 0;
    font-size: clamp(15.5px, 1.3vw, 18.5px);
    line-height: 1.85;
    color: #33405A;
    text-wrap: pretty;
}
.pikk-asari-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    margin-top: clamp(30px, 4vw, 46px);
    background: rgba(10,27,51,.12);
}
.pikk-asari-feature-grid span {
    display: block;
    padding: 20px 18px;
    background: #F7F4EF;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0A1B33;
}

/* Gallery */
.pikk-asari-gallery { background: #F7F4EF; padding: 0 0 clamp(56px, 9vh, 110px); }
.pikk-asari-gallery-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    max-width: 1440px;
    margin: 0 auto clamp(24px, 3.4vw, 40px);
    padding: 0 clamp(20px, 5vw, 72px);
}
.pikk-asari-gallery-hint { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(10,27,51,.45); }
.pikk-asari-gallery-viewport {
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.pikk-asari-gallery-viewport.is-dragging { cursor: grabbing; }
.pikk-asari-gallery-track {
    display: flex;
    gap: clamp(10px, 1.2vw, 18px);
    width: max-content;
    will-change: transform;
}
.pikk-asari-gallery-slide {
    position: relative;
    width: clamp(230px, 30vw, 400px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #E7E2D9;
    flex: 0 0 auto;
}
.pikk-asari-gallery-slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Rooms copy */
.pikk-asari-rooms-copy { background: #F7F4EF; padding: 0 clamp(20px, 5vw, 72px) clamp(64px, 11vh, 130px); }
.pikk-asari-rooms-copy p {
    max-width: 78ch;
    margin: 0 auto;
    font-size: clamp(15.5px, 1.3vw, 18.5px);
    line-height: 1.85;
    color: #33405A;
    text-wrap: pretty;
    animation-range: entry 4% cover 34%;
}

/* Rates */
.pikk-asari-rates { background: #0A1B33; padding: clamp(64px, 11vh, 150px) clamp(20px, 5vw, 72px); }
.pikk-asari-rates-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    animation-range: entry 4% cover 28%;
}
.pikk-asari-rates .pikk-asari-h2 { margin-top: clamp(18px, 2.4vw, 30px); color: #F7F4EF; }
.pikk-asari-room-count {
    font-family: 'Spectral', serif;
    font-size: clamp(14px, 1.2vw, 17px);
    color: rgba(247,244,239,.58);
}
.pikk-asari-rate-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: clamp(34px, 5vw, 58px);
    animation-range: entry 2% cover 36%;
}
.pikk-asari-rate-table th {
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(247,244,239,.22);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(247,244,239,.5);
    text-align: left;
}
.pikk-asari-rate-table th:last-child { text-align: right; }
.pikk-asari-rate-table td {
    padding: clamp(18px, 2.4vw, 26px) 0;
    border-bottom: 1px solid rgba(247,244,239,.12);
    vertical-align: top;
}
.pikk-asari-rate-table tr:last-child td { border-bottom: 0; }
.pikk-asari-rate-table td:first-child { padding-right: 16px; }
.pikk-asari-rate-name {
    display: block;
    font-family: 'Spectral', serif;
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 500;
    color: #F7F4EF;
}
.pikk-asari-rate-note { display: block; margin-top: 6px; font-size: 13px; letter-spacing: .04em; color: rgba(247,244,239,.55); }
.pikk-asari-rate-price {
    text-align: right;
    white-space: nowrap;
    font-family: 'Spectral', serif;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 500;
    color: #F7F4EF;
}
.pikk-asari-rate-table tr:last-child .pikk-asari-rate-price { font-weight: 600; color: var(--accent, #C8102E); }
.pikk-asari-good-to-know {
    margin-top: clamp(36px, 6vh, 64px);
    padding-top: clamp(26px, 4vh, 40px);
    border-top: 1px solid rgba(247,244,239,.16);
    animation-range: entry 2% cover 40%;
}
.pikk-asari-small-label { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: rgba(247,244,239,.5); }
.pikk-asari-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(14px, 2vw, 26px);
    margin-top: clamp(20px, 3vh, 30px);
}
.pikk-asari-facts span { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.6; color: rgba(247,244,239,.82); }
.pikk-asari-facts .dash { color: var(--accent, #C8102E); }

/* Contact */
.pikk-asari-contact { background: #F7F4EF; padding: clamp(64px, 11vh, 150px) clamp(20px, 5vw, 72px); }
.pikk-asari-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(30px, 4.6vw, 80px);
    align-items: start;
}
.pikk-asari-contact-copy { max-width: 44ch; margin: clamp(20px, 2.6vw, 30px) 0 0; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.8; color: #33405A; text-wrap: pretty; }
.pikk-asari-call-list { display: grid; gap: 12px; }
.pikk-asari-call-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.4vw, 30px);
    background: #0A1B33;
    color: #F7F4EF;
    transition: background .4s ease, transform .4s ease;
}
.pikk-asari-call-card:hover,
.pikk-asari-call-card:focus-visible { background: var(--accent, #C8102E); color: #F7F4EF; transform: translateX(6px); }
.pikk-asari-call-label { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(247,244,239,.6); }
.pikk-asari-call-number { display: block; margin-top: 8px; font-family: 'Spectral', serif; font-size: clamp(21px, 2.1vw, 30px); font-weight: 500; letter-spacing: .02em; }
.pikk-asari-call-action { font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.pikk-asari-manager-card {
    display: block;
    margin-top: 12px;
    padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.4vw, 30px);
    background: #0A1B33;
    color: #F7F4EF;
}
.pikk-asari-manager-copy {
    display: block;
    margin-top: 8px;
    max-width: 46ch;
    color: rgba(247,244,239,.76);
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.55;
}
.pikk-asari-manager-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color .25s ease, text-decoration-color .25s ease;
}
.pikk-asari-manager-link:hover,
.pikk-asari-manager-link:focus-visible {
    color: #4EA1FF;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pikk-asari-complaints { margin-top: clamp(26px, 3.4vw, 40px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid rgba(10,27,51,.14); }
.pikk-asari-complaints-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #4EA1FF; }
.pikk-asari-complaints-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: 18px; }
.pikk-asari-contact-name { display: block; font-family: 'Spectral', serif; font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; color: #0A1B33; }
.pikk-asari-contact-role { display: block; margin: 4px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #4EA1FF; }
.pikk-asari-complaints a { display: block; font-size: 15px; color: #0A1B33; transition: color .3s ease; }
.pikk-asari-complaints a + a { margin-top: 4px; }
.pikk-asari-complaints a:hover,
.pikk-asari-complaints a:focus-visible { color: var(--accent, #C8102E); }

/* More about Uyo */
.pikk-asari-more { background: #EFEAE1; padding: clamp(64px, 11vh, 150px) clamp(20px, 5vw, 72px); }
.pikk-asari-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(34px, 4.6vw, 80px);
}
.pikk-asari-more h2 { margin: 0; font-family: 'Spectral', serif; font-weight: 400; font-size: clamp(1.55rem, 2.6vw, 2.3rem); line-height: 1.16; color: #0A1B33; text-wrap: balance; }
.pikk-asari-more p { margin: clamp(18px, 2.2vw, 26px) 0 0; font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.85; color: #33405A; text-wrap: pretty; }
.pikk-asari-more p + p { margin-top: clamp(16px, 1.8vw, 22px); }
.pikk-asari-more .right { animation-range: entry 4% cover 38%; }
.pikk-asari-dark-cta {
    margin-top: clamp(24px, 3vw, 34px);
    background: #0A1B33;
    color: #F7F4EF;
    transition: background .4s ease, gap .4s ease;
}
.pikk-asari-dark-cta:hover,
.pikk-asari-dark-cta:focus-visible { color: #F7F4EF; background: var(--accent, #C8102E); gap: 20px; }

/* Floating WhatsApp */
.pikk-asari-whatsapp {
    position: fixed;
    right: clamp(16px, 2.4vw, 32px);
    bottom: clamp(16px, 2.4vw, 32px);
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(56px, 5.4vw, 66px);
    height: clamp(56px, 5.4vw, 66px);
    border-radius: 50%;
    background: #25D366;
    color: #FFFFFF;
    box-shadow: 0 18px 40px -14px rgba(7,22,43,.6);
    animation: pikk-asari-wa-in .7s cubic-bezier(.16,.8,.24,1) 1.1s both, pikk-asari-wa-pulse 3.4s ease-out 2.4s infinite;
    transition: transform .35s ease;
}
.pikk-asari-whatsapp:hover,
.pikk-asari-whatsapp:focus-visible { color: #FFFFFF; transform: scale(1.08); }

@media (max-width: 899px) {
    .pikk-asari-hero-media img { object-position: 62% center; }
}

@media (max-width: 520px) {
    .pikk-asari-hero { min-height: 100vh; min-height: 100svh; }
    .pikk-asari-hero-actions { align-items: stretch; }
    .pikk-asari-primary-cta,
    .pikk-asari-secondary-cta { justify-content: center; width: 100%; }
    .pikk-asari-rate-table th:first-child,
    .pikk-asari-rate-table td:first-child { width: 68%; }
}

@supports not (animation-timeline: view()) {
    .pikk-asari-reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pikk-asari-hero-media { transform: none !important; }
    .pikk-asari-hero-media img { animation: none !important; transform: none !important; }
    .pikk-asari-reveal { opacity: 1 !important; transform: none !important; }
    .pikk-asari-whatsapp { animation: none !important; }
    .pikk-asari-gallery-track { transform: none; }
}


/* 1.1.0 hotel-page identity, tablet grid and complaints emphasis. */
.pikk-asari-title.pikk-hotel-brand-title {
    max-width: 19ch;
    font-weight: 600;
    font-size: clamp(2.25rem, 6.8vw, 6.6rem);
    line-height: .94;
    letter-spacing: -.02em;
}
.pikk-asari-title .pikk-hotel-branch-tag {
    display: inline-block;
    margin-left: .45em;
    font-family: 'Jost', sans-serif;
    font-size: clamp(.68rem, 1.15vw, .98rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: none;
    color: #F7F4EF;
    vertical-align: middle;
}
.pikk-asari-feature-grid {
    background: #FFFFFF;
}
.pikk-asari-feature-grid span {
    background: #FFFFFF;
    border: 1px solid rgba(10,27,51,.08);
}
@media (min-width: 600px) and (max-width: 1024px) {
    .pikk-asari-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pikk-asari-complaints {
    margin-top: clamp(28px, 3.5vw, 44px);
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(78,161,255,.34);
    border-left: 5px solid var(--accent, #4EA1FF);
    background: rgba(78,161,255,.09);
}
.pikk-asari-complaints-label {
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 700;
    color: var(--accent, #4EA1FF);
}
.pikk-asari-complaints-grid { margin-top: 22px; }
.pikk-asari-contact-name { font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; }
.pikk-asari-contact-role { font-size: 13.5px; font-weight: 700; color: var(--accent, #4EA1FF); }
.pikk-asari-whatsapp { bottom: clamp(64px, 5vw, 76px); }
@media (max-width: 520px) {
    .pikk-asari-title.pikk-hotel-brand-title { font-size: clamp(2rem, 10.6vw, 3rem); max-width: 100%; }
    .pikk-asari-title .pikk-hotel-branch-tag { margin-left: .3em; }
}

/* Asari Main Branch gallery is manual-only: no automatic track movement. */
.pikk-asari-gallery-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pikk-asari-gallery-viewport::-webkit-scrollbar { display: none; }
.pikk-asari-gallery-track { transform: none !important; will-change: auto; }


/* 1.1.3: center the two manual-only Asari gallery images when they fit in the viewport. */
.pikk-asari-gallery-viewport {
    padding-inline: clamp(20px, 5vw, 72px);
}
.pikk-asari-gallery-track {
    margin-inline: auto;
}
@media (max-width: 860px) {
    .pikk-asari-gallery-viewport { padding-inline: 20px; }
    .pikk-asari-gallery-track { margin-inline: 0; }
}


/* 1.1.16: Asari mobile gallery uses two static rows (one image per row), with no drag/scroll interaction. */
@media (max-width: 600px) {
    .pikk-asari-gallery-viewport {
        overflow: visible;
        padding-inline: 20px;
        cursor: default;
        touch-action: auto;
    }
    .pikk-asari-gallery-track {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        margin-inline: 0;
        gap: 14px;
        transform: none !important;
    }
    .pikk-asari-gallery-slide {
        width: 100%;
        max-width: none;
        aspect-ratio: 4 / 3;
    }
}