/*
 * Park Mall — design refinements
 * Loaded after main.css. Additive only: nothing in main.css is modified, so
 * removing this file returns the site exactly to its previous appearance.
 *
 * Scope is deliberately narrow — the theme's aesthetic (Playfair headings,
 * deep navy, gold/cyan accents) is kept; this fixes legibility bugs and
 * replaces fixed desktop-only values with fluid ones that also work on phones.
 */

/* ------------------------------------------------------------------ *
 * 1. Legibility bugs
 * ------------------------------------------------------------------ */

/* The hero headline inherited the dark heading colour (#070A35) while sitting
   on a near-black overlay (#02041C) — a 1.06:1 contrast ratio, i.e. invisible.
   It only became apparent once the headline had content. */
.pm-hero__title,
.pm-hero__title .pm-hero__title-visual,
.pm-hero__title-word {
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(2, 4, 28, .55);
}

/* Same class of bug: the hotels section is dark, but its subtitle kept the
   light-theme body colour rgba(44,44,44,.72) — 1.31:1. */
.pm-section--hotels .pm-section__subtitle,
.pm-section--hotels .pm-section__text {
    color: rgba(255, 255, 255, .82);
}

/* The worst instance of all: .pm-page-hero__title was #070A35 on a #070A35
   band — a contrast ratio of exactly 1.00, the heading painted in its own
   background colour. This is the banner on every archive, every store /
   restaurant / property detail page and most content pages: ~135 pages whose
   main heading could not be read at all. */
.pm-page-hero__title {
    color: #ffffff;
}

.pm-page-hero__subtitle,
.pm-page-hero p {
    color: rgba(255, 255, 255, .78);
}

.pm-page-hero .pm-breadcrumbs,
.pm-page-hero .pm-breadcrumbs a,
.pm-page-hero__breadcrumbs a {
    color: rgba(255, 255, 255, .66);
}

.pm-page-hero .pm-breadcrumbs a:hover,
.pm-page-hero__breadcrumbs a:hover {
    color: #ffffff;
}

/* Small copy on dark panels was sitting near the AA floor. */
.pm-stats__label {
    color: rgba(255, 255, 255, .78);
}

/* WhatsApp green fails on white; darken just enough to pass AA on light. */
.pm-mega-menu__cta-link {
    color: #128C41;
}

.pm-mega-menu__count {
    color: #6B6B68;
}

/* ------------------------------------------------------------------ *
 * 2. Fluid type — the theme shipped fixed desktop sizes
 * ------------------------------------------------------------------ */

/* 80px fixed is punishing on a 375px screen. */
.pm-hero__title,
.pm-hero__title-word {
    font-size: clamp(2.125rem, 1.1rem + 4.9vw, 5rem);
    line-height: 1.06;
    letter-spacing: -.015em;
}

.pm-hero__subtitle {
    font-size: clamp(1rem, .94rem + .3vw, 1.1875rem);
    line-height: 1.6;
    max-width: 46ch;
}

/* Every section heading was locked at 40px, giving the page no hierarchy
   and overflowing narrow screens. */
.pm-section__title,
.pm-about__title,
.pm-cta__title {
    font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -.01em;
}

.pm-section__subtitle {
    font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
    line-height: 1.65;
    max-width: 62ch;
}

/* The eyebrow label reads as a caption, not a heading — give it its own voice. */
.pm-section__label {
    font-size: .75rem;
    letter-spacing: .18em;
    font-weight: 600;
}

/* It is styled as a chip (border, tinted background, 5px 10px padding) but was
   left display:block, so it stretched to the full 604px column and read as a
   stray horizontal bar above every heading. */
.pm-section__label {
    display: inline-block;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
}

/* ------------------------------------------------------------------ *
 * 3. Vertical rhythm — 96px was applied uniformly, mobile included
 * ------------------------------------------------------------------ */

.pm-section {
    padding-top: clamp(3.25rem, 1.6rem + 5.2vw, 6rem);
    padding-bottom: clamp(3.25rem, 1.6rem + 5.2vw, 6rem);
}

.pm-section__header {
    margin-bottom: clamp(1.75rem, 1rem + 2.4vw, 3.25rem);
}

/* ------------------------------------------------------------------ *
 * 4. Hero composition
 * ------------------------------------------------------------------ */

.pm-hero__content-inner {
    max-width: 60ch;
}

.pm-hero__cta {
    margin-top: clamp(1.25rem, .9rem + 1.2vw, 2rem);
}

/* Deepen the scrim behind the text only, so the photograph stays vivid on the
   right instead of being flattened by an even wash. */
.pm-hero__overlay {
    background:
        linear-gradient(90deg, rgba(2, 4, 28, .92) 0%, rgba(2, 4, 28, .62) 46%, rgba(2, 4, 28, .18) 100%),
        linear-gradient(0deg, rgba(2, 4, 28, .88) 0%, rgba(2, 4, 28, .10) 42%);
}

/* ------------------------------------------------------------------ *
 * 5. Mobile
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
    /* A full-viewport hero on a phone pushes every other section below the
       fold; cap it so the content beneath is discoverable. */
    .pm-hero,
    .pm-hero__viewport,
    .pm-hero__slide {
        min-height: 74svh;
    }

    .pm-hero__eyebrow {
        font-size: .625rem;
        letter-spacing: .16em;
    }

    /* Footer link rows were 15px tall — below a comfortable tap target. */
    .pm-footer__menu a,
    .pm-footer__nav a {
        display: inline-block;
        padding-block: .35rem;
    }

    /* Carousels were running edge-to-edge with no breathing room. */
    .pm-carousel__track {
        gap: .875rem;
    }
}

/* ------------------------------------------------------------------ *
 * 6. Page banner
 * ------------------------------------------------------------------ */

.pm-page-hero {
    padding-top: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
}

.pm-page-hero__title {
    font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -.01em;
}

.pm-page-hero__subtitle {
    font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
    line-height: 1.6;
    max-width: 60ch;
}

/* ------------------------------------------------------------------ *
 * 7. Cards without photography
 * ------------------------------------------------------------------ *
 * Most restaurants and stores have no image yet. The placeholder collapsed
 * .pm-card__image to the 48px icon height while the category badge stayed
 * absolutely positioned inside it, so the two overlapped and the card read as
 * broken rather than as "no photo yet". Give the slot the card's real 4:3
 * ratio and centre the mark. */

.pm-card__image:has(.pm-card__placeholder) {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(13, 143, 190, .07), rgba(246, 200, 68, .07)),
        rgba(246, 243, 234, .6);
    border-bottom: 1px solid rgba(7, 10, 53, .06);
}

.pm-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pm-card__placeholder-icon {
    width: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);
    height: auto;
    color: rgba(7, 10, 53, .22);
}

/* Keep the category badge clear of the icon. */
.pm-card__image:has(.pm-card__placeholder) .pm-card__badge {
    top: .625rem;
    left: .625rem;
    right: auto;
    bottom: auto;
}

/* Fallback for engines without :has() — still prevents the 48px collapse. */
@supports not selector(:has(*)) {
    .pm-card__placeholder {
        min-height: 8.5rem;
    }
}

/* ------------------------------------------------------------------ *
 * 8. Empty states
 * ------------------------------------------------------------------ *
 * .pm-empty-state is rendered as a child of the results grid, so it was
 * occupying a single 198px column and reading as a stray line of grey text
 * adrift in white space. Span the grid and present it as a deliberate state. */

.pm-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    text-align: center;
    padding: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem) 1.25rem;
    border: 1px dashed rgba(7, 10, 53, .16);
    border-radius: 14px;
    background: rgba(246, 243, 234, .45);
}

.pm-empty-state__text {
    margin: 0;
    max-width: 46ch;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(7, 10, 53, .6);
}

/* Respect users who ask for less motion — the hero animates word by word. */
@media (prefers-reduced-motion: reduce) {
    .pm-hero__title-word {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}