/* ==========================================
   L'OPERA ROYAL - HOME MOMENTS
   Editorial moodboard section with modal
   Portrait-aware image layout
   White background / Navy text / Gold accents
   No carousel / No gradients / No black
========================================== */

/*
|--------------------------------------------------------------------------
| Expected images
|--------------------------------------------------------------------------
| Location: assets/images/home/
|
| File name: moment-01.jpg
| Replace with: Premium atmosphere photo from L'Opera Royal.
|
| File name: moment-02.jpg
| Replace with: Elegant dining room or restaurant detail.
|
| File name: moment-03.jpg
| Replace with: Live music or guest experience photo.
|
| File name: moment-04.jpg
| Replace with: Cocktail, bar or refined service moment.
|
| File name: moment-05.jpg
| Replace with: Mediterranean dish or table detail.
|
| File name: moment-06.jpg
| Replace with: Outdoor terrace or Marbella lifestyle moment.
|
| File name: moment-07.jpg
| Replace with: Evening atmosphere or dining experience.
|
| File name: moment-08.jpg
| Replace with: Refined guest, music or restaurant detail.
|
| File name: moment-09.jpg
| Replace with: Additional atmosphere or guest experience photo.
|
| File name: moment-10.jpg
| Replace with: Additional food, dessert, terrace or elegant detail photo.
|--------------------------------------------------------------------------
| Recommended image size
|--------------------------------------------------------------------------
| 1200 x 900 px minimum
| JPG
| 180KB to 320KB each
|--------------------------------------------------------------------------
*/

/* ==========================================
   SECTION
========================================== */

.royal-home-moments {
    position: relative;
    isolation: isolate;

    padding: 96px 0 72px;

    color: var(--royal-navy);
    background: var(--royal-white);

    overflow: hidden;
}

.royal-home-moments::before {
    content: "";

    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;

    width: min(1180px, 92%);
    height: 1px;

    background: rgba(var(--royal-gold-rgb), 0.34);

    transform: translateX(-50%);

    pointer-events: none;
}

/* ==========================================
   PANEL
========================================== */

.royal-home-moments__panel {
    position: relative;

    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 34px 34px 30px;

    display: flex;
    flex-direction: column;
    gap: 34px;

    background: var(--royal-white);
    border: 1px solid rgba(var(--royal-gold-rgb), 0.22);
    border-radius: 18px;

    box-shadow: 0 24px 72px rgba(var(--royal-navy-rgb), 0.07);
}

/* ==========================================
   HEADER CENTERED
========================================== */

.royal-home-moments__header {
    width: 100%;
    max-width: 840px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;

    text-align: center;
}

.royal-home-moments__heading {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.royal-home-moments .royal-kicker {
    margin: 0 0 12px;

    color: var(--royal-gold);

    font-family: var(--royal-font-body);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.20em;
    line-height: 1.2;
    text-transform: uppercase;
}

.royal-home-moments__title {
    max-width: 920px;
    margin: 0;

    color: var(--royal-navy);

    font-family: var(--royal-font-heading);
    font-size: clamp(34px, 4vw, 60px);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 0.98;
    text-transform: uppercase;

    text-align: center;
}

.royal-home-moments__title span {
    display: inline;

    color: rgba(var(--royal-navy-rgb), 0.46);
}

.royal-home-moments__title::after {
    content: "";

    width: 78px;
    height: 1px;
    margin: 22px auto 0;

    display: block;

    background: var(--royal-gold);
}

.royal-home-moments__text {
    max-width: 760px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;

    text-align: left;
}

.royal-home-moments__text p {
    margin: 0;

    color: rgba(var(--royal-navy-rgb), 0.78);

    font-family: var(--royal-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.72;
}

/* ==========================================
   MOODBOARD GRID
   Compact 7-photo layout
========================================== */

.royal-home-moments__grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(62px, 5vw, 82px);
    gap: 14px;

    grid-template-areas:
        "m01 m01 m01 m01 m02 m02 m02 m07 m07 m07 m07 m07"
        "m01 m01 m01 m01 m02 m02 m02 m07 m07 m07 m07 m07"
        "m01 m01 m01 m01 m02 m02 m02 m07 m07 m07 m07 m07"
        "m01 m01 m01 m01 m02 m02 m02 m07 m07 m07 m07 m07"
        "m05 m05 m05 m05 m06 m06 m06 m06 m03 m03 m03 m03"
        "m05 m05 m05 m05 m06 m06 m06 m06 m03 m03 m03 m03"
        "m05 m05 m05 m05 m06 m06 m06 m06 m04 m04 m04 m04"
        "m05 m05 m05 m05 m06 m06 m06 m06 m04 m04 m04 m04";
}

.royal-home-moment {
    position: relative;

    margin: 0;

    background: rgba(var(--royal-navy-rgb), 0.045);
    border: 1px solid rgba(var(--royal-gold-rgb), 0.18);
    border-radius: 14px;

    overflow: hidden;

    opacity: 0;

    animation: royalMomentReveal 820ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.royal-home-moment::before {
    content: "";

    position: absolute;
    inset: 10px;
    z-index: 1;

    border: 1px solid rgba(var(--royal-gold-rgb), 0.18);
    border-radius: 10px;

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Desktop layout
|--------------------------------------------------------------------------
| Compact 7-photo moodboard.
| No empty spaces.
| Portrait photos get taller slots.
| Landscape photos get wider slots.
|--------------------------------------------------------------------------
*/

.royal-home-moment--01 {
    grid-area: m01;
    animation-delay: 80ms;
}

.royal-home-moment--02 {
    grid-area: m02;
    animation-delay: 140ms;
}

.royal-home-moment--03 {
    grid-area: m03;
    animation-delay: 200ms;
}

.royal-home-moment--04 {
    grid-area: m04;
    animation-delay: 260ms;
}

.royal-home-moment--05 {
    grid-area: m05;
    animation-delay: 320ms;
}

.royal-home-moment--06 {
    grid-area: m06;
    animation-delay: 380ms;
}

.royal-home-moment--07 {
    grid-area: m07;
    animation-delay: 440ms;
}

/* Hide unused image slots */
.royal-home-moment--08,
.royal-home-moment--09,
.royal-home-moment--10 {
    display: none;
}

@keyframes royalMomentReveal {
    from {
        opacity: 0;

        transform: translate3d(0, 18px, 0) scale(0.985);
    }

    to {
        opacity: 1;

        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* ==========================================
   IMAGE BUTTON
========================================== */

.royal-home-moment__button {
    width: 100%;
    height: 100%;
    padding: 0;

    display: block;

    color: inherit;
    background: transparent;
    border: 0;

    cursor: zoom-in;
}

.royal-home-moment__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    transform: none;

    transition:
        filter 350ms ease,
        opacity 350ms ease;

    pointer-events: none;
}

.royal-home-moment:hover .royal-home-moment__image {
    filter: brightness(0.96);
}

/* ==========================================
   FALLBACK PLACEHOLDER DESIGN
========================================== */

.royal-home-moment.has-fallback-image {
    background: rgba(var(--royal-navy-rgb), 0.045);
}

.royal-home-moment.has-fallback-image::before {
    border-color: rgba(var(--royal-gold-rgb), 0.28);
}

.royal-home-moment.has-fallback-image::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 1;

    width: 46px;
    height: 1px;

    background: rgba(var(--royal-gold-rgb), 0.52);

    transform: translateX(-50%);

    pointer-events: none;
}

.royal-home-moment.has-fallback-image .royal-home-moment__fallback-symbol {
    position: absolute;
    left: 50%;
    top: 47%;
    z-index: 0;

    width: clamp(82px, 10vw, 168px);
    height: auto;

    display: block;

    opacity: 0.58;
    filter: drop-shadow(0 16px 28px rgba(var(--royal-navy-rgb), 0.08));

    transform: translate(-50%, -50%);
}

.royal-home-moment.has-fallback-image .royal-home-moment__caption {
    opacity: 1;

    color: var(--royal-white);
    background: rgba(var(--royal-navy-rgb), 0.88);
    border-color: rgba(var(--royal-gold-rgb), 0.42);

    transform: none;
}

/* ==========================================
   CROP CONTROL
   Optimized for compact 7-photo moodboard.
========================================== */

.royal-home-moment--01 .royal-home-moment__image {
    object-position: center 42%;
}

.royal-home-moment--02 .royal-home-moment__image {
    object-position: center 16%;
}

.royal-home-moment--03 .royal-home-moment__image {
    object-position: center 38%;
}

.royal-home-moment--04 .royal-home-moment__image {
    object-position: center 36%;
}

.royal-home-moment--05 .royal-home-moment__image {
    object-position: center 42%;
}

.royal-home-moment--06 .royal-home-moment__image {
    object-position: center 28%;
}

.royal-home-moment--07 .royal-home-moment__image {
    object-position: center 52%;
}

/* ==========================================
   CAPTION
========================================== */

.royal-home-moment__caption {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 3;

    padding: 7px 10px;

    color: var(--royal-white);
    background: rgba(var(--royal-navy-rgb), 0.76);
    border: 1px solid rgba(var(--royal-gold-rgb), 0.28);

    font-family: var(--royal-font-body);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity var(--royal-transition),
        transform var(--royal-transition);
}

.royal-home-moment:hover .royal-home-moment__caption {
    opacity: 1;

    transform: translateY(0);
}

/* ==========================================
   MODAL
========================================== */

html.has-royal-modal-open {
    overflow: hidden;
}

.royal-home-moments-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    padding: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(var(--royal-navy-rgb), 0.94);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 260ms ease,
        visibility 260ms ease;
}

.royal-home-moments-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.royal-home-moments-modal__figure {
    position: relative;

    width: min(100%, 1120px);
    height: min(82vh, 760px);
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.royal-home-moments-modal__image {
    max-width: 100%;
    max-height: 100%;

    display: block;

    object-fit: contain;

    border: 1px solid rgba(var(--royal-gold-rgb), 0.34);
    box-shadow: 0 30px 90px rgba(var(--royal-navy-rgb), 0.42);
}

.royal-home-moments-modal__caption {
    position: absolute;
    left: 50%;
    bottom: -42px;

    color: var(--royal-white);

    font-family: var(--royal-font-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;

    transform: translateX(-50%);
}

.royal-home-moments-modal__close,
.royal-home-moments-modal__arrow {
    position: absolute;
    z-index: 2;

    width: 46px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--royal-white);
    background: rgba(var(--royal-navy-rgb), 0.78);
    border: 1px solid rgba(var(--royal-gold-rgb), 0.46);
    border-radius: 999px;

    font-family: var(--royal-font-body);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
        color var(--royal-transition),
        background-color var(--royal-transition),
        border-color var(--royal-transition),
        transform var(--royal-transition);
}

.royal-home-moments-modal__close {
    top: 28px;
    right: 28px;
}

.royal-home-moments-modal__arrow--prev {
    left: 28px;
    top: 50%;

    transform: translateY(-50%);
}

.royal-home-moments-modal__arrow--next {
    right: 28px;
    top: 50%;

    transform: translateY(-50%);
}

.royal-home-moments-modal__close:hover,
.royal-home-moments-modal__close:focus-visible,
.royal-home-moments-modal__arrow:hover,
.royal-home-moments-modal__arrow:focus-visible {
    color: var(--royal-navy);
    background: var(--royal-white);
    border-color: var(--royal-gold);
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {
    .royal-home-moments {
        padding: 88px 0 72px;
    }

    .royal-home-moments__panel {
        padding: 30px 22px 22px;
        gap: 30px;
    }

    .royal-home-moments__header {
        max-width: 720px;
        gap: 20px;
    }

    .royal-home-moments__title {
        font-size: clamp(34px, 5vw, 52px);
    }

    .royal-home-moments__text {
        max-width: 640px;
        gap: 22px;
    }

    .royal-home-moments__grid {
        grid-auto-rows: clamp(70px, 8vw, 98px);
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {
    .royal-home-moments {
        padding: 68px 0 60px;
    }

    .royal-home-moments__panel {
        width: min(100%, 430px);
        padding: 22px 14px 14px;
        gap: 24px;

        border-radius: 16px;
    }

    .royal-home-moments__header {
        gap: 18px;
    }

    .royal-home-moments .royal-kicker {
        margin-bottom: 8px;

        font-size: 10px;
        letter-spacing: 0.18em;
    }

    .royal-home-moments__title {
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.02;
    }

    .royal-home-moments__title span {
        display: block;
    }

    .royal-home-moments__title::after {
        width: 64px;
        margin-top: 18px;
    }

    .royal-home-moments__text {
        max-width: 100%;

        display: flex;
        flex-direction: column;
        gap: 14px;

        text-align: center;
    }

    .royal-home-moments__text p {
        font-size: 13px;
        line-height: 1.66;
    }

    .royal-home-moments__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: none;
        grid-auto-rows: 132px;
        gap: 10px;
    }

    .royal-home-moment,
    .royal-home-moment--01,
    .royal-home-moment--02,
    .royal-home-moment--03,
    .royal-home-moment--04,
    .royal-home-moment--05,
    .royal-home-moment--06,
    .royal-home-moment--07,
    .royal-home-moment--08,
    .royal-home-moment--09,
    .royal-home-moment--10 {
        grid-area: auto;
        grid-column: span 1;
        grid-row: span 1;
    }

    .royal-home-moment--01,
    .royal-home-moment--02,
    .royal-home-moment--04,
    .royal-home-moment--05,
    .royal-home-moment--06,
    .royal-home-moment--07 {
        grid-column: span 2;
        grid-row: span 2;
    }

    .royal-home-moment--08,
    .royal-home-moment--09,
    .royal-home-moment--10 {
        display: none;
    }

    .royal-home-moment.has-fallback-image .royal-home-moment__fallback-symbol {
        width: clamp(70px, 22vw, 126px);
    }

    .royal-home-moment__caption {
        opacity: 1;

        transform: none;
    }

    .royal-home-moments-modal {
        padding: 22px;
    }

    .royal-home-moments-modal__figure {
        height: 76vh;
    }

    .royal-home-moments-modal__close {
        top: 16px;
        right: 16px;
    }

    .royal-home-moments-modal__arrow {
        width: 42px;
        height: 42px;
    }

    .royal-home-moments-modal__arrow--prev {
        left: 14px;
    }

    .royal-home-moments-modal__arrow--next {
        right: 14px;
    }

    .royal-home-moments-modal__caption {
        bottom: -34px;
        font-size: 10px;
    }
}

/* ==========================================
   MOBILE
   Full image display / No crop
========================================== */

@media (max-width: 767px) {
    .royal-home-moments {
        padding: 44px 0 40px;
    }

    .royal-home-moments__panel {
        width: min(calc(100% - 24px), 430px);
        padding: 12px;
        gap: 18px;

        border-radius: 16px;
    }

    .royal-home-moments__grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .royal-home-moment,
    .royal-home-moment--01,
    .royal-home-moment--02,
    .royal-home-moment--03,
    .royal-home-moment--04,
    .royal-home-moment--05,
    .royal-home-moment--06,
    .royal-home-moment--07,
    .royal-home-moment--08,
    .royal-home-moment--09,
    .royal-home-moment--10 {
        grid-area: auto;
        grid-column: auto;
        grid-row: auto;

        width: 100%;
        height: auto;

        border-radius: 14px;
    }

    .royal-home-moment--08,
    .royal-home-moment--09,
    .royal-home-moment--10 {
        display: none;
    }

    .royal-home-moment__button {
        width: 100%;
        height: auto;
    }

    .royal-home-moment__image {
        width: 100%;
        height: auto;

        display: block;

        object-fit: contain;
        object-position: center center;
    }

    .royal-home-moment::before {
        inset: 7px;

        border-radius: 10px;
    }

    .royal-home-moment__caption {
        left: 10px;
        bottom: 10px;

        padding: 6px 8px;

        font-size: 9px;
        letter-spacing: 0.10em;

        opacity: 1;
        transform: none;
    }

    .royal-home-moments-modal {
        padding: 22px;
    }

    .royal-home-moments-modal__figure {
        height: 76vh;
    }

    .royal-home-moments-modal__close {
        top: 16px;
        right: 16px;
    }

    .royal-home-moments-modal__arrow {
        width: 42px;
        height: 42px;
    }

    .royal-home-moments-modal__arrow--prev {
        left: 14px;
    }

    .royal-home-moments-modal__arrow--next {
        right: 14px;
    }

    .royal-home-moments-modal__caption {
        bottom: -34px;
        font-size: 10px;
    }
}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .royal-home-moment,
    .royal-home-moment__image,
    .royal-home-moment__caption,
    .royal-home-moments-modal {
        animation: none;
        transition: none;
    }

    .royal-home-moment {
        opacity: 1;
        transform: none;
    }
}

/* ======================================
   Home Moments - Accessibility contrast fix
   Improves Lighthouse contrast score without changing content.
====================================== */

.royal-home-moments__panel {
    background: rgba(var(--royal-navy-rgb), 0.96);
    color: #ffffff;
}

.royal-home-moments__panel span,
.royal-home-moments__panel p,
.royal-home-moments__panel h2,
.royal-home-moments__panel h3 {
    color: #ffffff;
}

.royal-home-moments__panel .royal-kicker,
.royal-home-moments__panel .royal-kicker span {
    color: var(--royal-gold);
}

.royal-home-moments__panel a {
    color: #ffffff;
}

.royal-home-moments__panel a:hover,
.royal-home-moments__panel a:focus-visible {
    color: var(--royal-gold);
}