/* ==========================================================================
   Hotel M Grand - overrides loaded after style.css / responsive.css.
   Keeps the template's look (red #fe0000 / dark #0f1521) and only adds:
   real-photo sizing, logo, tariff, gallery groups, lightbox, accessibility.
   ========================================================================== */

/* --- keyboard focus (template had none) --- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #fe0000;
  outline-offset: 2px;
}
.footer a:focus-visible, .book_room a:focus-visible, .book_room button:focus-visible,
.book_room input:focus-visible, .bottom_form input:focus-visible, .bottom_form button:focus-visible {
  outline-color: #fff;
}

/* --- logo: real logo, aspect ratio preserved (width/height attrs give the ratio) --- */
.logo picture, .logo img { display: block; }
.logo { margin-top: -4px; }
.logo img { height: 62px; width: auto; max-width: 100%; }
@media (max-width: 575px) { .logo { margin-top: 0; } .logo img { height: 50px; } }

/* --- hero slider: photos are 3:2, banner is wider; crop via object-fit --- */
.banner_main .carousel-item picture { display: block; }
.banner_main .carousel-item img {
  display: block; width: 100%; min-height: 0;
  height: clamp(520px, 50vw, 740px);
  object-fit: cover;
}
.banner_main .carousel-item img.first-slide  { object-position: 50% 32%; }
.banner_main .carousel-item img.second-slide { object-position: 50% 55%; }
.banner_main .carousel-item img.third-slide  { object-position: 50% 62%; }
@media (min-width: 768px) and (max-width: 991px) {
  .banner_main .carousel-item img { height: 570px; }
}
/* phones: the booking card used to cover the whole photo, so it now sits under it */
@media (max-width: 767px) {
  .banner_main .carousel-item img { height: clamp(230px, 64vw, 420px); }
  .booking_ocline { position: static; transform: none; background: #0f1521; padding: 24px 0 8px; }
  .book_room { margin-bottom: 16px; }
  .banner .carousel-indicators { bottom: 8px; }
  .banner .carousel-indicators li { width: 12px; height: 12px; }
}

/* --- real photographs inside cards / grids: consistent proportions, no distortion --- */
.about_img picture, .room_img picture, .gallery_img picture, .blog_img picture { display: block; }
.about_img img, .room_img img, .gallery_img img, .blog_img img {
  display: block; width: 100%; height: auto; object-fit: cover;
}
.our_room .room .room_img img, .blog .blog_box .blog_img img { aspect-ratio: 3 / 2; }
.gallery .gallery_img img { aspect-ratio: 4 / 3; }
.gallery .gallery_img a { display: block; }
/* equal-height room cards */
.our_room .row > [class*="col-md-4"] { display: flex; }
.our_room .room { flex: 1 1 auto; width: 100%; }
.our_room .room .bed_room h3 { line-height: 1.25; }
.our_room .room .bed_room p { margin: 10px 0 0; }
.our_room .room_tariff_link, .gallery .gallery_link { margin-bottom: 30px; }

/* blog section background: was a resort-pool stock photo; now a real photo under a dark overlay */
.blog {
  background-image: linear-gradient(rgba(10, 14, 22, .78), rgba(10, 14, 22, .78)), url(../images/interiors/marble-staircase-1280.jpg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* --- gallery page groups --- */
.gallery_group_title {
  font-size: 26px; font-weight: 500; color: #121212; line-height: 1.2;
  margin: 10px 0 24px; padding-left: 14px; border-left: 4px solid #fe0000;
}
.gallery .row + .row + .row { margin-top: 0; }
.gallery .gallery_group_title { scroll-margin-top: 20px; }

/* --- tariff --- */
.tariff { padding: 70px 0 0; }
.tariff .titlepage { text-align: center; margin-bottom: 30px; }
.tariff_img { display: block; max-width: 420px; margin: 0 auto 30px; }
.tariff_img picture { display: block; }
.tariff_img img { display: block; width: 100%; height: auto; object-fit: contain; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.tariff_table_wrap { overflow-x: auto; margin-bottom: 30px; }
.tariff_table { width: 100%; border-collapse: collapse; background: #fff; font-size: 17px; }
.tariff_table caption { caption-side: top; padding: 0 0 12px; color: #121212; text-align: left; }
.tariff_table th, .tariff_table td { padding: 16px 18px; border: 1px solid #dfe2e7; text-align: left; vertical-align: top; }
.tariff_table thead th { background: #0f1521; color: #fff; font-weight: 600; border-color: #0f1521; }
.tariff_table tbody th { font-weight: 600; color: #121212; background: #f4f5f7; }
.tariff_table td { color: #121212; font-weight: 500; }
.tariff_table td small { display: block; color: #555; font-weight: 400; font-size: 14px; }
.tariff_table .gst { color: #555; font-size: 14px; font-weight: 400; white-space: nowrap; }
@media (max-width: 575px) {
  .tariff_table { font-size: 15px; }
  .tariff_table th, .tariff_table td { padding: 12px 10px; }
}

/* --- inner-page title bar now uses h1 --- */
.back_re .title h1 {
  color: #fff; font-size: 40px; padding: 40px 0; font-weight: 600;
  text-transform: uppercase; line-height: 35px; margin: 0;
}
@media (max-width: 575px) { .back_re .title h1 { font-size: 30px; padding: 30px 0; line-height: 30px; } }

/* --- map keeps its box on narrow screens --- */
.map-responsive iframe { max-width: 100%; }

/* --- prevent sideways scroll from wide template pieces --- */
html, body { max-width: 100%; overflow-x: hidden; }

/* --- lightbox (js/hotel-lightbox.js) --- */
.hmg-lb { position: fixed; inset: 0; z-index: 10000000; display: none; background: rgba(8, 11, 18, .94);
  align-items: center; justify-content: center; flex-direction: column; padding: 56px 16px 20px; }
.hmg-lb.is-open { display: flex; }
.hmg-lb__img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; }
.hmg-lb__cap { color: #fff; font-size: 16px; text-align: center; margin: 14px 0 0; max-width: 900px; }
.hmg-lb__count { color: #c9ced8; font-size: 14px; margin-top: 4px; }
.hmg-lb__btn { position: absolute; background: #121212; color: #fff; border: 2px solid #fff; border-radius: 50%;
  width: 46px; height: 46px; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.hmg-lb__btn:hover { background: #fe0000; }
.hmg-lb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hmg-lb__close { top: 12px; right: 12px; }
.hmg-lb__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.hmg-lb__next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 575px) {
  .hmg-lb__prev, .hmg-lb__next { top: auto; bottom: 14px; transform: none; }
  .hmg-lb__prev { left: calc(50% - 56px); } .hmg-lb__next { right: calc(50% - 56px); }
  .hmg-lb { padding-bottom: 76px; }
  .hmg-lb__img { max-height: calc(100vh - 220px); }
}
@media (prefers-reduced-motion: reduce) {
  .about_img figure img, .room_img figure img, .gallery_img figure img, .blog_img figure img { transition: none; }
}

/* --- content pass: footer, contact details, explore cards, form notes --- */
.footer .conta li a, .footer .conta li { word-break: break-word; }
.footer .conta li a { color: #fff; }
.footer .conta li a:hover { color: #fe0000; }
.footer .footer_text { color: #fff; margin: 0 0 18px; }
.footer .social_icon a:focus-visible { outline-color: #fff; }
.form_note { font-size: 14px; margin: 10px 0 0; color: #666; }
.book_room .form_note { color: #c9ced8; text-align: center; }
.contact_details { list-style: none; margin: 0 0 28px; padding: 0; }
.contact_details li { display: flex; gap: 12px; margin-bottom: 12px; color: #121212; line-height: 1.5; }
.contact_details i { color: #fe0000; width: 18px; padding-top: 4px; text-align: center; }
.contact_details a { color: #121212; text-decoration: underline; }
.blog .blog_box .blog_room .blog_link { display: inline-block; margin-top: 6px; color: #fe0000; font-weight: 500; }
.blog .blog_box .blog_room .blog_link:hover { color: #121212; }
.about .titlepage p + p { margin-top: 16px; }
.about .titlepage .tagline { font-weight: 500; color: #121212; }