/* ============================================
   BUDGET INN — Responsive Styles
   Breakpoints: 1440, 1366, 1280, 1024, 991, 768, 576, 480, 390, 375, 320
   ============================================ */

/* Large Desktop (1440+) - default is good */

/* Desktop 1280-1366 */
@media (max-width: 1366px) {
  :root {
    --h1: 52px;
    --h2: 36px;
    --section-padding: 90px;
  }

  .hero-text h1 {
    font-size: 50px;
  }
}

@media (max-width: 1280px) {
  .hero-text h1 {
    font-size: 46px;
  }

  .findus-content {
    padding: 60px 40px;
  }

  .hero-nav {
    right: 24px;
  }

  .navbar-brand {
    width: 100px;
    height: 60px;
  }

  .navbar-nav .nav-link {
    font-size: 15px;
    padding: 6px 14px !important;
  }

}

/* Tablet Landscape / Small Desktop */
@media (max-width: 1024px) {
  :root {
    --h1: 48px;
    --h2: 34px;
    --h3: 26px;
    --section-padding: 80px;
  }

  .hero-text h1 {
    font-size: 42px;
  }

  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nearby-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid {
    height: 420px;
  }

  .hero-section {
    min-height: 680px;
    max-height: none;
  }

  .booking-field {
    padding: 0 14px;
  }
}

/* Tablet */
@media (max-width: 991px) {
  :root {
    --h1: 42px;
    --h2: 32px;
    --section-padding: 70px;
  }

  .main-header {
    background: var(--primary);
    position: fixed;
    height: auto;
    min-height: 70px;
    /* padding: 10px 0; */
  }

  .navbar-collapse {
    background: var(--primary);
    margin-top: 12px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .navbar-nav {
    margin-bottom: 20px;
  }

  .navbar-nav .nav-link {
    padding: 12px 0 !important;
  }

  .navbar-nav .nav-link::after {
    display: none;
  }

  .header-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .hero-section {
    height: auto;
    min-height: 100vh;
    max-height: none;
    padding-top: 70px;
  }

  .hero-content {
    padding-top: 60px;
    padding-bottom: 200px;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-text h1 {
    font-size: 38px;
  }

  .hero-nav {
    display: none;
  }

  .hero-pagination {
    bottom: 180px;
  }

  /* Booking form stacks on tablet */
  .booking-form {
    flex-wrap: wrap;
    padding: 16px 0;
    gap: 12px 0;
  }

  .booking-field {
    flex: 1 1 45%;
    padding: 8px 12px;
  }

  .booking-divider {
    display: none;
  }

  .booking-btn-field {
    flex: 1 1 100%;
    padding: 8px 0 0;
  }

  .btn-check-availability {
    width: 100%;
  }

  .about-section {
    padding-top: calc(var(--section-padding) + 40px);
  }

  .about-img {
    height: 350px;
    margin-top: 30px;
  }

  .amenities-grid {
    grid-template-columns: 1fr 1fr;
    margin-top: 30px;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .gallery-item.large {
    grid-row: auto;
    grid-column: 1 / -1;
    height: 300px;
  }

  .gallery-item {
    height: 220px;
  }

  .nearby-grid {
    grid-template-columns: 1fr;
  }

  .findus-content {
    padding: 50px 30px;
  }

  .map-container {
    min-height: 350px;
  }

  .map-container iframe {
    min-height: 350px;
  }
}

/* Mobile Landscape / Large Mobile */
@media (max-width: 768px) {
  :root {
    --h1: 36px;
    --h2: 28px;
    --h3: 24px;
    --h4: 20px;
    --section-padding: 60px;
  }

  .brand-budget {
    font-size: 24px;
  }

  .brand-inn {
    font-size: 18px;
    padding: 4px 12px 5px;
  }

  .hero-text h1 {
    font-size: 32px;
  }

  .hero-text p {
    font-size: 15px;
  }

  .hero-btns {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-explore,
  .btn-tour {
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }

  .hero-content {
    padding-bottom: 260px;
  }

  .hero-pagination {
    bottom: 240px;
  }

  .booking-field {
    flex: 1 1 100%;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .booking-field:last-of-type {
    border-bottom: none;
  }

  .about-section .row {
    flex-direction: column-reverse;
  }

  .about-img {
    height: 280px;
    margin-bottom: 20px;
    margin-top: 0;
  }

  .amenities-grid {
    grid-template-columns: 1fr;
  }

  .room-img {
    height: 200px;
  }

  .testimonial-text {
    font-size: 18px;
  }

  .testimonial-slider .swiper-button-prev,
  .testimonial-slider .swiper-button-next {
    display: none;
  }

  .findus-content {
    padding: 40px 25px;
  }

  .nearby-times {
    flex-direction: column;
    gap: 15px;
  }

  .footer-brand p {
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 576px) {
  :root {
    --h1: 30px;
    --h2: 26px;
    --section-padding: 50px;
  }

  .navbar-brand {
    width: 90px;
    height: 54px;
  }

  .main-header {
    min-height: auto;

  }

  .hero-section {
    min-height: auto;
  }

  .hero-content {
    padding-top: 50px;
    padding-bottom: 280px;
  }

  .hero-text h1 {
    font-size: 28px;
  }

  .hero-text p {
    font-size: 14px;
  }

  .badge-text {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .btn-explore,
  .btn-tour {
    padding: 12px 22px;
    font-size: 12px;
  }

  .section-label {
    font-size: 11px;
  }

  .gallery-item.large {
    height: 240px;
  }

  .gallery-item {
    height: 180px;
  }

  .amenity-card {
    padding: 22px 18px;
  }

  .room-info {
    padding: 20px;
  }

  .room-price .price {
    font-size: 24px;
  }

  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }

  .hero-pagination {
    bottom: 260px;
  }

  .footer-logo {
    width: 100px;
    height: 60px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  :root {
    --h1: 26px;
    --h2: 24px;
  }

  .hero-text h1 {
    font-size: 26px;
  }

  .brand-budget {
    font-size: 22px;
  }

  .brand-inn {
    font-size: 16px;
    padding: 3px 10px 4px;
  }

  .header-phone {
    font-size: 13px;
  }

  .btn-book-now {
    padding: 8px 16px;
    font-size: 12px;
  }

  .findus-content {
    padding: 35px 20px;
  }

  .contact-item {
    font-size: 14px;
  }
}

/* Extra Small */
@media (max-width: 390px) {
  .hero-text h1 {
    font-size: 24px;
  }

  .hero-text p {
    font-size: 13px;
  }

  .btn-explore,
  .btn-tour {
    padding: 11px 18px;
    font-size: 11px;
  }

  .section-padding {
    padding: 45px 0;
  }
}

@media (max-width: 375px) {
  .hero-content {
    padding-bottom: 300px;
  }

  .hero-pagination {
    bottom: 280px;
  }
}

@media (max-width: 320px) {
  :root {
    --h1: 22px;
    --h2: 22px;
  }

  .hero-text h1 {
    font-size: 22px;
  }

  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* About & Rooms refinements */
@media (max-width: 991px) {
  .about-section {
    padding: 70px 0;
  }

  .about-content h2 {
    font-size: 32px;
  }

  .about-image-frame {
    margin-top: 30px;
  }

  .about-image-frame .about-img {
    height: 340px;
  }

  .rooms-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .rooms-header-left h2 {
    font-size: 32px;
  }

  .rooms-nav {
    align-self: flex-end;
  }

  .room-img {
    height: 220px;
  }
}

@media (max-width: 768px) {
  .about-content h2 {
    font-size: 28px;
  }

  .about-image-frame .about-img {
    height: 280px;
  }

  .rooms-section {
    padding: 60px 0 50px;
  }

  .rooms-header-left h2 {
    font-size: 28px;
  }

  .room-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 576px) {
  .about-section {
    padding: 50px 0;
  }

  .about-content h2 {
    font-size: 26px;
  }

  .about-image-frame .about-img {
    height: 240px;
  }

  .room-img {
    height: 200px;
  }

  .room-info h4 {
    font-size: 20px;
  }
}

/* Amenities / Gallery / Testimonials responsive */
@media (max-width: 991px) {
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .amenities-top-header h2,
  .gallery-header-left h2,
  .testimonials-header h2 {
    font-size: 32px;
  }

  .amenities-sub-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .gallery-item.large {
    height: 300px;
  }

  .gallery-item-stack {
    flex-direction: row;
  }

  .gallery-item-stack .gallery-item {
    height: 200px;
  }

  .testimonial-text {
    font-size: 18px;
  }

  .testimonial-arrow {
    display: none;
  }
}

@media (max-width: 768px) {

  .amenities-section,
  .testimonials-section {
    padding: 60px 0;
  }

  .gallery-section {
    padding: 60px 0 50px;
  }

  .amenities-grid {
    grid-template-columns: 1fr;
  }

  .amenities-top-header h2,
  .gallery-header-left h2,
  .testimonials-header h2 {
    font-size: 28px;
  }

  .amenities-sub-left h3 {
    font-size: 24px;
  }

  .gallery-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .gallery-nav {
    align-self: flex-end;
  }

  .gallery-item-stack {
    flex-direction: column;
  }

  .gallery-item-stack .gallery-item {
    height: 220px;
  }

  .testimonial-text {
    font-size: 17px;
  }

  .quote-marks {
    font-size: 56px;
  }
}

@media (max-width: 576px) {

  .amenities-top-header h2,
  .gallery-header-left h2,
  .testimonials-header h2 {
    font-size: 26px;
  }

  .gallery-item.large {
    height: 240px;
  }

  .testimonial-text {
    font-size: 16px;
  }

  .amenity-card {
    padding: 22px 18px;
  }
}

/* Nearby dual sliders responsive */
@media (max-width: 991px) {
  .nearby-header h2 {
    font-size: 32px;
  }

  .nearby-swiper-top .swiper-slide,
  .nearby-swiper-bottom .swiper-slide {
    width: 320px;
  }

  .nearby-img {
    height: 160px;
  }
}

@media (max-width: 768px) {
  .nearby-section {
    padding: 60px 0 50px;
  }

  .nearby-header h2 {
    font-size: 28px;
  }

  .nearby-swiper-top,
  .nearby-swiper-bottom {
    padding: 0 4%;
  }

  .nearby-swiper-top .swiper-slide,
  .nearby-swiper-bottom .swiper-slide {
    width: 280px;
  }

  .nearby-content {
    padding: 18px;
  }

  .nearby-content h4 {
    font-size: 18px;
  }
}

@media (max-width: 576px) {

  .nearby-swiper-top .swiper-slide,
  .nearby-swiper-bottom .swiper-slide {
    width: 260px;
  }

  .nearby-header h2 {
    font-size: 26px;
  }
}

/* Find Us + Footer responsive */
@media (max-width: 991px) {
  .findus-grid {
    grid-template-columns: 1fr;
  }

  .findus-map,
  .findus-map iframe {
    min-height: 350px;
  }

  .findus-panel {
    padding: 50px 40px;
  }

  .findus-panel h2 {
    font-size: 32px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .findus-panel {
    padding: 40px 28px;
  }

  .findus-panel h2 {
    font-size: 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand-col p {
    max-width: 100%;
  }

  .btn-book-stay {
    max-width: 100%;
  }
}

@media (max-width: 576px) {

  .findus-map,
  .findus-map iframe {
    min-height: 280px;
  }

  .findus-panel {
    padding: 35px 20px;
  }

  .findus-panel h2 {
    font-size: 26px;
  }
}