/* ==========================================================================
   All Inclusive Resorts page layout — thevegasvacation.com/Home/All_Inclusive_Resorts
   All rules are namespaced under .lva / .lva-* so nothing leaks into other
   pages or overrides layout_style.css elsewhere on the site.
   Upload to: /css/resorts_layout.css
   ========================================================================== */

.lva {
    --ink: #14122e;
    --muted: #5b5c78;
    --blue: #2a1fd4;
    --red: #e11414;
    --aqua: #0d7f8f;
    --aqua-soft: #eaf6f7;
    --sand: #fbf7ef;
    --line: #e4e6f1;
    --surface: #f5f6fb;
    font-family: 'Montserrat', Arial, sans-serif;
    color: var(--ink);
    padding: 46px 0 60px;
    background: #fff;
}

.lva *, .lva *::before, .lva *::after { box-sizing: border-box; }

/* reset inherited layout_style.css heading treatments inside this block only */
.lva h1, .lva h2, .lva h3, .lva p, .lva summary {
    position: static;
    text-align: left;
    text-transform: none;
    text-shadow: none;
    background: none;
    font-family: inherit;
    letter-spacing: normal;
    padding: 0;
}
.lva ul, .lva li { text-align: left; list-style: none; }
.lva li::before { content: none; }

/* ---------- intro ---------- */
.lva-intro { max-width: 760px; }
.lva p.lva-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 12px;
}
.lva h1.lva-title {
    font-size: 40px;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0 0 18px;
}
.lva-lede { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ---------- everything is included ---------- */
.lva-included {
    margin: 30px 0 34px;
    padding: 26px 26px 24px;
    background: linear-gradient(180deg, var(--aqua-soft) 0%, #fff 100%);
    border: 1px solid #d8ebee;
    border-radius: 14px;
}
.lva h2.lva-included__title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aqua);
    margin: 0 0 18px;
}
.lva-incs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 22px;
    padding: 0;
    margin: 0 0 20px;
}
.lva-inc {
    position: relative;
    padding-left: 26px;
    line-height: 1.35;
}
.lva-inc::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--aqua) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}
.lva-inc b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.lva-inc span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.lva-included__note { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ---------- destination jump nav ---------- */
.lva-jumps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 20px 0 32px;
    border-top: 2px solid var(--ink);
}
.lva-jump {
    display: block;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.lva-jump:hover, .lva-jump:focus {
    border-color: var(--aqua);
    background: var(--aqua-soft);
    transform: translateY(-2px);
    text-decoration: none;
}
.lva-jump span {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}
.lva-jump small {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- resort blocks ---------- */
.lva-resorts { display: flex; flex-direction: column; gap: 34px; }
.lva-resort {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    scroll-margin-top: 150px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.lva-resort:hover { border-color: #cdd1e6; box-shadow: 0 18px 38px -22px rgba(20, 18, 46, .38); }

.lva-resort__hero {
    position: relative;
    display: block;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: #ccd2dd;
}
.lva-resort__hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.lva-resort:hover .lva-resort__hero img { transform: scale(1.035); }
.lva-resort__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 12, 30, 0) 45%, rgba(10, 12, 30, .72) 100%);
}
.lva-resort__dest {
    position: absolute;
    left: 22px;
    bottom: 18px;
    color: #fff;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -.01em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.lva-resort__zoom {
    position: absolute;
    right: 16px;
    bottom: 18px;
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 13px;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}
.lva-resort:hover .lva-resort__zoom { opacity: 1; transform: translateY(0); }

.lva-resort__body { padding: 24px 26px 26px; }
.lva h2.lva-resort__name {
    font-size: 24px;
    line-height: 1.22;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px;
}
.lva-resort__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aqua);
    margin: 0 0 14px;
}
.lva-resort__meta span { position: relative; }
.lva-resort__meta span + span::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 4px;
    bottom: 3px;
    width: 1px;
    background: #c9dfe2;
}
.lva-resort__teaser { font-size: 16px; line-height: 1.6; color: #43445e; margin: 0 0 16px; max-width: 60ch; }

.lva-tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; }
.lva-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: #3c3d5c;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px 10px;
}

.lva-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.lva-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #d8dae8; }
.lva-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s ease, transform .3s ease; }
.lva-thumb:hover img { opacity: .85; transform: scale(1.04); }

.lva-more { margin: 20px 0 0; border-top: 1px solid var(--line); padding-top: 15px; }
.lva .lva-more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
}
.lva .lva-more > summary::-webkit-details-marker { display: none; }
.lva .lva-more > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
}
.lva-more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.lva .lva-more > summary:hover { color: var(--aqua); }
.lva-more__close { display: none; }
.lva-more[open] .lva-more__open { display: none; }
.lva-more[open] .lva-more__close { display: inline; }
.lva-more__inner { padding-top: 13px; max-width: 72ch; }
.lva-more__inner p { font-size: 14.5px; line-height: 1.7; color: #43445e; margin: 0 0 13px; }
.lva-more__inner p:last-child { margin-bottom: 0; }

.lva-note {
    margin-top: 34px;
    padding: 18px 20px;
    background: var(--sand);
    border-left: 3px solid #e3c069;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.lva-aside { padding-top: 46px; }

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
    .lva h1.lva-title { font-size: 34px; }
    .lva-resort__dest { font-size: 24px; }
}
@media (max-width: 991px) {
    .lva-incs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lva-jumps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .lva-jump { padding: 11px 12px; }
    .lva-resort__body { padding: 20px 18px 22px; }
    .lva h2.lva-resort__name { font-size: 21px; }
}
@media (max-width: 767px) {
    .lva { padding: 30px 0 44px; }
    .lva h1.lva-title { font-size: 27px; }
    .lva-lede { font-size: 15.5px; }
    .lva-included { padding: 20px 18px; }
    .lva-incs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .lva-jumps { grid-template-columns: minmax(0, 1fr); }
    .lva-resort__hero { aspect-ratio: 3 / 2; }
    .lva-resort__dest { font-size: 21px; left: 16px; bottom: 14px; }
    .lva-resort__zoom { display: none; }
    .lva-gallery { grid-template-columns: repeat(2, 1fr); }
    .lva h2.lva-resort__name { font-size: 19px; }
    .lva-resort__teaser { font-size: 15px; }
    .lva-aside { padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .lva-resort, .lva-resort__hero img, .lva-resort__zoom, .lva-jump, .lva-thumb img { transition: none; }
    .lva-jump:hover { transform: none; }
    .lva-resort:hover .lva-resort__hero img { transform: none; }
}