/*
 * lws-listing.css — Single GeoDirectory place listing
 * Figma: CmtbKo3EH3IHQfyUh8Si4v — nodes 4:13, 14:2, 14:9, 14:24
 * Scoped entirely under .lws-listing
 *
 * Breakpoints derived from Figma frames:
 *   ≥1280px  Desktop/1440  — px 120px, logo 600px, title 34px, map 360px
 *   1024–1279 Laptop/1024  — px  64px, logo 560px, title 32px, map 320px
 *    768–1023 Tablet/768   — px  48px, logo 480px, title 28px, map 300px
 *      ≤767px Mobile/375   — px  20px, logo 280px, title 24px, map 240px
 *                             (contact rows stack: label above value)
 *
 * Enqueue approach: wp_enqueue_scripts action, is_singular('gd_place') guard.
 * Avada container padding is reset via body.single-gd_place rules below.
 */

/* ── Reset Avada container padding on GD single-place pages ────────────── */
body.single-gd_place .post-content,
body.single-gd_place .entry-content,
body.single-gd_place #main,
body.single-gd_place .fusion-column-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ── Root: break out of Avada content-width container ───────────────────── */
.lws-listing {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

/* ── GD notifications strip (above hero, outside design sections) ────────── */
.lws-listing__notifications {
    padding: 12px 120px;
    background: #fff;
}

/* ══════════════════════════════════════════════
   SECTION 1 — HERO / LOGO
   bg white, centered logo square, border-radius 8
   ══════════════════════════════════════════════ */
.lws-listing__hero {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 120px;
}

.lws-listing__logo-wrap {
    width: 600px;
    height: 600px;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.lws-listing__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ══════════════════════════════════════════════
   SECTION 2 — DESCRIPTION
   bg white, h1 + category chips + body copy
   ══════════════════════════════════════════════ */
.lws-listing__desc {
    background: #ffffff;
    padding: 80px 120px 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lws-listing__desc-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lws-listing__name {
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #1f2124 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.lws-listing__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lws-listing__cat {
    display: inline-block;
    background: #f1ede5;
    border: 1px solid #e0ded9;
    border-radius: 100px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #5b6f7c;
    line-height: 1;
    white-space: nowrap;
}

.lws-listing__body {
    font-size: 17px;
    color: #383d42;
    line-height: 28px;
    font-weight: 400;
}

.lws-listing__body p {
    margin: 0;
    line-height: inherit;
}
.lws-listing__body p + p {
    margin-top: 28px;
}

/* ══════════════════════════════════════════════
   SHARED — Eyebrow label (Contact / Location)
   teal, 13px bold, 2px tracking, uppercase
   ══════════════════════════════════════════════ */
.lws-listing__eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #009eb1 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* ══════════════════════════════════════════════
   SECTION 3 — CONTACT DETAILS
   bg sand #f1ede5, white card radius-14
   ══════════════════════════════════════════════ */
.lws-listing__contact {
    background: #f1ede5;
    padding: 64px 120px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lws-listing__card {
    background: #ffffff;
    border: 1px solid #e0ded9;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
}

/* Each field row */
.lws-listing__row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 22px 28px;
}

/* Top border on all rows except the first */
.lws-listing__row:not(:first-child) {
    border-top: 1px solid #e0ded9;
}

/* Social row: vertically center-align icons with label */
.lws-listing__row--social {
    align-items: center;
}

.lws-listing__label {
    font-size: 14px;
    font-weight: 600;
    color: #1f2124;
    width: 140px;
    flex-shrink: 0;
    line-height: 1.5;
}

.lws-listing__value {
    font-size: 15px;
    font-weight: 400;
    color: #383d42;
    font-style: normal; /* <address> is italic by default */
    line-height: 1.5;
    min-width: 0;
    white-space: normal;
}

.lws-listing__link {
    color: #009eb1;
    text-decoration: none;
}
.lws-listing__link:hover,
.lws-listing__link:focus {
    color: #007a8a;
    text-decoration: underline;
}

/* ── Social icon buttons ─────────────────────────────────────────────────── */
.lws-listing__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.lws-listing__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 100px;
    background: #009eb1;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.lws-listing__social-btn:hover,
.lws-listing__social-btn:focus {
    background: #007a8a;
}
.lws-listing__social-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   SECTION 4 — MAP
   bg white, teal eyebrow, container radius-14
   ══════════════════════════════════════════════ */
.lws-listing__map-section {
    background: #ffffff;
    padding: 64px 120px 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lws-listing__map-wrap {
    border-radius: 14px;
    border: 1px solid #e0ded9;
    overflow: hidden;
    height: 360px;
    width: 100%;
    position: relative;
}

/* Force GD's map canvas to fill the container */
.lws-listing__map-wrap > *,
.lws-listing__map-wrap .geodir_map_container,
.lws-listing__map-wrap [id^="gd_map_canvas_"],
.lws-listing__map-wrap .gd-map {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — Laptop ≤1279px (1024px frame)
   ══════════════════════════════════════════════ */
@media (max-width: 1279px) {
    .lws-listing__notifications { padding-left: 64px; padding-right: 64px; }

    .lws-listing__hero { padding: 64px; }
    .lws-listing__logo-wrap { width: 560px; height: 560px; }

    .lws-listing__desc { padding: 64px 64px 56px; gap: 20px; }
    .lws-listing__name { font-size: 32px !important; }
    .lws-listing__body { font-size: 16px; line-height: 27px; }
    .lws-listing__body p + p { margin-top: 27px; }

    .lws-listing__contact { padding: 64px; gap: 20px; }
    .lws-listing__row { padding: 18px 28px; }

    .lws-listing__map-section { padding: 64px 64px 56px; gap: 16px; }
    .lws-listing__map-wrap { height: 320px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — Tablet ≤1023px (768px frame)
   ══════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .lws-listing__notifications { padding-left: 48px; padding-right: 48px; }

    .lws-listing__hero { padding: 56px 48px; }
    .lws-listing__logo-wrap { width: 480px; height: 480px; }

    .lws-listing__desc { padding: 56px 48px 48px; }
    .lws-listing__name { font-size: 28px !important; }
    .lws-listing__body { line-height: 26px; }
    .lws-listing__body p + p { margin-top: 26px; }

    .lws-listing__contact { padding: 56px 48px; }
    .lws-listing__row { padding: 18px 24px; }
    .lws-listing__label { width: 120px; }

    .lws-listing__map-section { padding: 56px 48px 48px; }
    .lws-listing__map-wrap { height: 300px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — Mobile ≤767px (375px frame)
   Rows stack: label above value
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
    .lws-listing__notifications { padding-left: 20px; padding-right: 20px; }

    .lws-listing__hero { padding: 40px 20px; }
    .lws-listing__logo-wrap { width: 280px; height: 280px; }

    .lws-listing__desc { padding: 44px 20px 40px; }
    .lws-listing__name { font-size: 24px !important; }
    .lws-listing__body { font-size: 15px; line-height: 24px; }
    .lws-listing__body p + p { margin-top: 24px; }

    .lws-listing__contact { padding: 44px 20px; }
    .lws-listing__row {
        padding: 18px 20px;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
    .lws-listing__row--social {
        gap: 10px;
    }
    .lws-listing__label { width: auto; }

    .lws-listing__social-btn { width: 32px; height: 32px; }
    .lws-listing__social-btn svg { width: 17px; height: 17px; }

    .lws-listing__map-section { padding: 44px 20px 40px; }
    .lws-listing__map-wrap { height: 240px; }
}