@charset "utf-8";
/* by Unimedia with passion  */
/* localized styles for rooms pages */
/* author Unimedia */
/* License Commercial */
/**/


  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --cream: #f5f0e8;
    --warm-white: #faf8f4;
    --terracotta: #677C8B;
    --terracotta-light: #7d94a5;
    --dark: #52402e;
    --mid: #493c2f;
    --gold: #c9a96e;
    --border: #a89f91;
  }


  /* ── rooms-hero ── */
  .rooms-hero {
    padding-bottom: 3rem; padding-top: 3rem;
    display: grid; place-items: center;
    position: relative; overflow: hidden;
    background: var(--cream);
  }


  .rooms-hero-line {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    opacity: .25;
  }

  .rooms-hero-content {
    position: relative; text-align: center; padding: 2rem;
    animation: fadeUp .9s ease both;
  }

  .rooms-hero-eyebrow {
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--terracotta); margin-bottom: 1.2rem;
  }
  .rooms-hero-eyebrow::before, .rooms-hero-eyebrow::after {
    content: '-'; margin: 0 .7em; opacity: .5;
  }

  .rooms-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 300; line-height: 1.05;
    color: var(--dark);
  }
  .rooms-hero-title em { font-style: italic; color: var(--terracotta); }

  .rooms-hero-sub {
    margin-top: 1.5rem; margin-bottom: 4rem;
    letter-spacing: .06em; color: var(--mid);
    max-width: 700px; margin-left: auto; margin-right: auto;
    line-height: 1.75; font-style: italic;
  }

  .rooms-hero-scroll {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--mid);
    animation: pulse 2s ease infinite;
  }
  .rooms-hero-scroll::after {
    content: ''; width: 1px; height: 40px;
    background: linear-gradient(to bottom, var(--gold), transparent);
  }

  /* ── FILTER BAR ── */
  .filter-bar {
    display: flex; justify-content: center; gap: .5rem;
    padding: 2.5rem 2rem 1rem;
    flex-wrap: wrap;
  }

  .filter-btn {
    font-family: 'Ubuntu', sans-serif;
    letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid var(--border); background: transparent;
    color: var(--mid); padding: .5rem 1.4rem;
    cursor: pointer; transition: all .2s;
  }
  .filter-btn:hover, .filter-btn.active {
    background: var(--terracotta); border-color: var(--terracotta); color: #fff;
  }

  /* ── ROOMS GRID ── */
  .rooms-section { padding: 3rem 1rem 6rem; max-width: 1600px; margin: 0 auto; }

  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
  }

  /* Room cards - alternate layout: wide / narrow */
  .room-card {
    background: #fff;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
    animation: fadeUp .6s ease both;
    
  }

  .room-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(30,26,22,.1);
  }

  .room-card.wide  { grid-column: span 8; }
  .room-card.narrow { grid-column: span 4; }
  .room-card.half  { grid-column: span 6; }

  /* Image container */
  .r-card-img {
    position: relative; overflow: hidden;
  }
  .room-card.wide  .r-card-img { height: 420px; aspect-ratio: 16/10; }
  .room-card.narrow .r-card-img { height: 300px; aspect-ratio: 4/3; }
  .room-card.half  .r-card-img { height: 360px; aspect-ratio: 4/3; }

  .r-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .7s cubic-bezier(.22,1,.36,1);
    display: block;
  }
  .room-card:hover .r-card-img img { transform: scale(1.05); }

  .card-badge {
    position: absolute; top: 1.2rem; left: 1.2rem;
    background: var(--dark); color: #fff;
    letter-spacing: .14em; text-transform: uppercase;
    padding: .35rem .9rem;
  }

  .card-price-badge {
    position: absolute; bottom: 1.2rem; right: 1.2rem;
    background: var(--terracotta); color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem; letter-spacing: .04em;
    padding: .4rem 1rem;
  }

  /* Card body */
  .card-body {
    padding: 1.8rem 2rem 2rem;
    display: flex; flex-direction: column; gap: .8rem; flex: 1;
  }

  .card-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem; font-weight: 400;
    color: var(--dark); line-height: 1;
  }

  .card-type {
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--terracotta);
    min-height: 40px;
  }

  .card-desc {
    line-height: 1.75; color: var(--mid);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 3;
    transition: all .3s ease;
  }

  .card-desc.expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .card-desc-toggle {
    font-size: 1.1rem;
    color: var(--terracotta);
    cursor: pointer;
    margin-top: .5rem;
    margin-bottom: 1rem;
    text-decoration: underline;
    transition: color .2s;
  }
  .card-desc-toggle:hover { color: var(--terracotta-light); }

  .room-card.wide .card-desc { -webkit-line-clamp: 4; line-clamp: 4; }

  .card-amenities {
    display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem;
  }

  .amenity-pill {
    letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--border); color: var(--mid);
    padding: .3rem .75rem;
  }

  .card-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto; padding: 1.2rem;
    border-top: 1px solid var(--border);
  }

  .card-price {
    font-size: 1.1rem; color: var(--dark);
  }
  .card-price small {
    font-family: 'Ubuntu', sans-serif; font-size: 1rem;
    letter-spacing: .1em; color: var(--mid);
    display: block; margin-bottom: .5rem;
  }

  .card-btn {
    letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid var(--dark); background: transparent; color: var(--dark);
    padding: .6rem 1.4rem; cursor: pointer;
    transition: all .2s;
    font-family: 'Ubuntu', sans-serif;
  }
  .card-btn:hover {
    background: var(--terracotta); border-color: var(--terracotta); color: #fff;
  }

  /* Thumbnails strip */
  .card-thumbs {
    display: flex; gap: .4rem; padding: 10px 2rem 1.5rem;
  }
  .card-thumbs img {
    width: 80px; height: 50px; object-fit: cover;
    opacity: .65; cursor: pointer; transition: opacity .2s;
    border: 1px solid transparent;
    flex-shrink: 0;
  }
  .card-thumbs img:hover, .card-thumbs img.active {
    opacity: 1; border-color: var(--terracotta);
  }

  /* ── SEPARATOR BANNER ── */
  .banner {
    margin: 0 4rem 4rem;
    background: var(--dark);
    padding: 4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    flex-wrap: wrap;
  }

  .banner-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 300;
    color: var(--cream);
  }
  .banner-text h2 em { font-style: italic; color: var(--gold); }
  .banner-text p {
    letter-spacing: .06em; color: rgba(245,240,232,.55);
    margin-top: .7rem;
  }

  .banner-btn {
    letter-spacing: .14em; text-transform: uppercase;
    border: 1px solid var(--gold); color: var(--gold);
    padding: .9rem 2.2rem; cursor: pointer; background: transparent;
    font-family: 'Ubuntu', sans-serif;
    transition: all .25s; white-space: nowrap;
  }
  .banner-btn:hover { background: var(--gold); color: var(--dark); }

  /* ── SERVICES STRIP ── */
  .services {
    padding: 4rem;
    display: flex; justify-content: center; gap: 4rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 0;
  }

  .service-item {
    display: flex; flex-direction: column; align-items: center; gap: .8rem;
    text-align: center;
  }

  .service-icon {
    width: 48px; height: 48px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.3rem;
    color: var(--terracotta);
  }

  .service-label {
    letter-spacing: .14em; text-transform: uppercase; color: var(--mid);
  }


  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes pulse {
    0%, 100% { opacity: .6; }
    50%       { opacity: 1; }
  }

  .room-card:nth-child(1) { animation-delay: .1s; }
  .room-card:nth-child(2) { animation-delay: .2s; }
  .room-card:nth-child(3) { animation-delay: .3s; }
  .room-card:nth-child(4) { animation-delay: .4s; }
  .room-card:nth-child(5) { animation-delay: .5s; }

  /* ── RESPONSIVE ── */
  @media (max-width: 1024px) {
    nav { padding: 1.2rem 2rem; }
    .rooms-section { padding: 2rem 1rem 4rem; }
    .room-card.wide, .room-card.narrow, .room-card.half { grid-column: span 12; }
    .rooms-grid { grid-template-columns: 1fr 1fr; display: flex; flex-direction: column; }
    .banner { margin: 0 2rem 3rem; }
    footer { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 768px) {
    nav { padding: 1rem 1.5rem; }
    .nav-links { display: none; }
    .rooms-hero {padding-bottom: 1.2rem; padding-top: 1.2rem;}
    .rooms-section { padding: 1.5rem 1rem 3rem; }
    .banner { margin: 0 1.5rem 3rem; padding: 2.5rem 2rem; }
    .services { padding: 2.5rem 2rem; gap: 2rem; }
    .modal-body { padding: 1.5rem 0.5rem 1.5rem; }
    .room-modal { padding: 0.3rem; }
    .modal-book { width: 85%; text-align: center; margin: 0 auto;}
    .modal-close-btn { width: 85%; text-align: center; margin: 0 auto; }
    .card-type { min-height: auto; }
    .card-body { padding: 1rem; }
    .card-thumbs { padding: 10px 1rem 10px; }
    footer { grid-template-columns: 1fr; padding: 3rem 2rem; }
    .footer-bottom { padding: 1rem 2rem; }
  }