/*
 * 02-hotel-rooms — rooms.css
 * Front-end styles for [hotel_rooms] shortcode and room CPT templates.
 * Design tokens inherit from prasanthi-hotel-theme (CSS custom properties).
 * Standalone fallbacks provided for use on non-theme pages.
 */

/* ── CSS fallbacks (if theme not active) ─────────────────────── */
:root {
    --hr-maroon    : var(--clr-maroon,     #6B1A1A);
    --hr-brown     : var(--clr-brown,      #5C3317);
    --hr-gold      : var(--clr-gold,       #C9A96E);
    --hr-cream     : var(--clr-cream,      #FAF7F2);
    --hr-stone     : var(--clr-stone,      #E8E0D5);
    --hr-ink       : var(--clr-ink,        #1A1208);
    --hr-muted     : var(--clr-muted,      #7A6E62);
    --hr-white     : #FFFFFF;
    --hr-font-d    : var(--font-display,   'Georgia', serif);
    --hr-font-b    : var(--font-body,      system-ui, sans-serif);
    --hr-radius    : var(--radius-md,      4px);
    --hr-shadow-md : var(--shadow-md,      0 4px 20px rgba(26,18,8,.12));
    --hr-shadow-xl : var(--shadow-xl,      0 24px 80px rgba(26,18,8,.24));
    --hr-ease      : var(--ease-out,       cubic-bezier(0.16,1,0.3,1));
}

/* ── Grid ────────────────────────────────────────────────────── */
.hotel-rooms-grid {
    display: grid;
    gap    : 2rem;
}

.hotel-rooms-grid.hotel-rooms-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hotel-rooms-grid.hotel-rooms-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hotel-rooms-grid.hotel-rooms-cols-4 { grid-template-columns: repeat(4, 1fr); }

.hotel-rooms-empty {
    text-align : center;
    color      : var(--hr-muted);
    font-style : italic;
    padding    : 2rem;
}

/* ── Card ────────────────────────────────────────────────────── */
.hotel-room-card {
    background   : var(--hr-white);
    border-radius: var(--hr-radius);
    overflow     : hidden;
    box-shadow   : var(--hr-shadow-md);
    display      : flex;
    flex-direction: column;
    transition   : transform 500ms var(--hr-ease), box-shadow 500ms var(--hr-ease);
}

.hotel-room-card:hover {
    transform : translateY(-6px);
    box-shadow: var(--hr-shadow-xl);
}

/* booked / maintenance — desaturated */
.hotel-room-card--booked,
.hotel-room-card--maintenance {
    opacity: .75;
    filter : grayscale(.35);
}

/* ── Card image ──────────────────────────────────────────────── */
.hotel-room-card__image-link { display: block; }

.hotel-room-card__image {
    position    : relative;
    aspect-ratio: 4/3;
    overflow    : hidden;
    background  : var(--hr-stone);
}

.hotel-room-card__image img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: transform 700ms var(--hr-ease);
    display   : block;
}

.hotel-room-card:hover .hotel-room-card__image img {
    transform: scale(1.06);
}

/* ── Badge ───────────────────────────────────────────────────── */
.hotel-room-card__badge {
    position      : absolute;
    top           : .75rem;
    right         : .75rem;
    padding       : .2rem .6rem;
    border-radius : 2px;
    font-size     : .7rem;
    font-weight   : 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color         : var(--hr-white);
}

.hotel-room-card__badge--booked      { background: #C0392B; }
.hotel-room-card__badge--maintenance { background: #E67E22; }

/* ── Body ────────────────────────────────────────────────────── */
.hotel-room-card__body {
    padding: 1.25rem 1.5rem;
    flex   : 1;
}

.hotel-room-card__meta {
    display    : flex;
    flex-wrap  : wrap;
    gap        : .5rem;
    margin-bottom: .5rem;
}

.hotel-room-card__floor,
.hotel-room-card__type,
.hotel-room-card__volume {
    font-size     : .7rem;
    font-weight   : 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color         : var(--hr-gold);
}

.hotel-room-card__floor::after,
.hotel-room-card__type::after { content: '·'; margin-left: .5rem; color: var(--hr-stone); }
.hotel-room-card__volume::after { content: ''; }

.hotel-room-card__title {
    font-family : var(--hr-font-d);
    font-size   : 1.35rem;
    font-weight : 500;
    line-height : 1.25;
    color       : var(--hr-ink);
    margin-bottom: .75rem;
}

.hotel-room-card__title a {
    color          : inherit;
    text-decoration: none;
    transition     : color 250ms;
}

.hotel-room-card__title a:hover { color: var(--hr-maroon); }

/* ── Facilities list ─────────────────────────────────────────── */
.hotel-room-card__facilities {
    display      : flex;
    flex-wrap    : wrap;
    gap          : .35rem;
    margin-bottom: 1rem;
    list-style   : none;
    padding      : 0;
}

.hotel-room-card__facilities li {
    font-size     : .7rem;
    letter-spacing: .03em;
    color         : var(--hr-muted);
    background    : var(--hr-cream);
    padding       : .2rem .55rem;
    border-radius : 2px;
    border        : 1px solid var(--hr-stone);
}

.hotel-room-card__facilities-more {
    color    : var(--hr-maroon) !important;
    background: transparent !important;
    border   : 1px dashed var(--hr-maroon) !important;
}

/* ── Pricing ─────────────────────────────────────────────────── */
.hotel-room-card__pricing {
    margin-top: auto;
    border-top: 1px solid var(--hr-stone);
    padding-top: .75rem;
}

.hotel-room-card__price--nb {
    font-family : var(--hr-font-d);
    font-size   : 1.15rem;
    color       : var(--hr-maroon);
    display     : flex;
    align-items : baseline;
    gap         : .35rem;
    margin-bottom: .2rem;
}

.hotel-room-card__price--nb .hotel-room-card__price-label {
    font-family: var(--hr-font-b);
    font-size  : .7rem;
    color      : var(--hr-muted);
    font-weight: 400;
}

.hotel-room-card__price--nb small {
    font-family: var(--hr-font-b);
    font-size  : .7rem;
    color      : var(--hr-muted);
    font-weight: 400;
}

.hotel-room-card__price--b {
    font-size: .75rem;
    color    : var(--hr-muted);
}

/* ── Footer (CTA buttons) ────────────────────────────────────── */
.hotel-room-card__footer {
    display        : flex;
    gap            : .5rem;
    padding        : 1rem 1.5rem 1.25rem;
    border-top     : 1px solid var(--hr-stone);
}

.hotel-room-card__btn {
    flex           : 1;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    padding        : .55rem .75rem;
    font-size      : .7rem;
    font-weight    : 500;
    letter-spacing : .1em;
    text-transform : uppercase;
    border-radius  : 2px;
    text-decoration: none;
    transition     : all 250ms;
    white-space    : nowrap;
}

.hotel-room-card__btn--detail {
    background : transparent;
    color      : var(--hr-maroon);
    border     : 1px solid var(--hr-maroon);
}

.hotel-room-card__btn--detail:hover {
    background: var(--hr-maroon);
    color     : var(--hr-white);
}

.hotel-room-card__btn--book {
    background: var(--hr-maroon);
    color     : var(--hr-white);
    border    : 1px solid var(--hr-maroon);
}

.hotel-room-card__btn--book:hover {
    background: #4A1010;
    border-color: #4A1010;
}

/* ── Availability badge (inline shortcode) ───────────────────── */
.hotel-avail-badge {
    display     : inline-flex;
    align-items : center;
    gap         : .25rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hotel-rooms-grid.hotel-rooms-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .hotel-rooms-grid.hotel-rooms-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .hotel-rooms-grid.hotel-rooms-cols-2,
    .hotel-rooms-grid.hotel-rooms-cols-3,
    .hotel-rooms-grid.hotel-rooms-cols-4 { grid-template-columns: 1fr; }
}