/*
 * responsive.css — Hurghada Tours & Transfers
 * Full responsive layer: Mobile · Tablet · Desktop
 * Breakpoints:
 *   xs  — max 480px  (small phones)
 *   sm  — max 576px  (phones)
 *   md  — max 768px  (large phones / small tablets)
 *   lg  — max 992px  (tablets / landscape phones)
 *   xl  — max 1200px (small desktops / large tablets)
 *
 * RULE: this file ONLY adds responsive rules.
 * It never overrides desktop intentional styles
 * except to correct layout on smaller screens.
 */

/* ─────────────────────────────────────────────────────────────
   GLOBAL HELPERS
───────────────────────────────────────────────────────────── */
img       { max-width: 100%; height: auto; }
table     { width: 100%; }
iframe    { max-width: 100%; }

/* ─────────────────────────────────────────────────────────────
   LARGE TABLET / SMALL DESKTOP  ≤ 1200px
───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .container, .rd-container { padding: 0 20px; }

  /* Tour cards: 4 → 3 col */
  .tours-grid-layout            { grid-template-columns: repeat(3, 1fr); }
  .rd-tours-grid                { grid-template-columns: repeat(3, 1fr); }

  /* Features bar: 4 → 2 col */
  .features-bar                 { grid-template-columns: repeat(2, 1fr); }
  .feature-item                 { border-bottom: 1px solid var(--border, #dde6ef); }
  .feature-item:nth-child(2)    { border-right: none; }
  .feature-item:nth-child(3)    { border-bottom: none; }
  .feature-item:last-child      { border-right: none; border-bottom: none; }

  /* Satisfaction 4 → 2 */
  .satisfaction-grid            { grid-template-columns: repeat(2, 1fr); }

  /* Footer grid */
  .footer-grid                  { grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }

  /* Benefits 5 → 3 */
  .rd-benefits-grid             { grid-template-columns: repeat(3, 1fr); }

  /* Vehicles 4 → 3 */
  .rd-vehicles-grid             { grid-template-columns: repeat(3, 1fr); }

  /* Routes 5 → 3 */
  .rd-routes-grid               { grid-template-columns: repeat(3, 1fr); }
}

/* ─────────────────────────────────────────────────────────────
   TABLET  ≤ 992px
───────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  /* ── Section spacing ── */
  .section                      { padding: 60px 0; }
  .rd-detail-section            { padding: 40px 0; }
  .rd-faq-section               { padding: 40px 0; }
  .rd-all-tours-section         { padding: 60px 0; }
  .rd-category-section          { padding: 60px 0; }
  .rd-vehicles-section          { padding: 60px 0; }
  .rd-routes-section            { padding: 60px 0; }
  .rd-benefits-section          { padding: 60px 0; }
  .rd-transfer-types-section    { padding: 60px 0; }
  .rd-cta-banner                { padding: 40px 0; }

  /* ── Navbar ── */
  .nav-links:not(.active),
  .nav-right-actions .btn-nav-book { display: none; }
  .mobile-menu-btn,
  .hamburger { display: flex !important; }
  .navbar-inner { padding: 0 16px; }

  /* ── Mobile Nav Drawer ── */
  .mobile-nav-open              { overflow: hidden; }
  .nav-drawer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--navy, #0d2137);
    z-index: 9998;
    padding: 80px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .nav-drawer.open              { transform: translateX(0); }
  .nav-drawer a {
    color: rgba(255,255,255,0.88);
    font-size: 18px;
    font-weight: 600;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: block;
    text-decoration: none;
  }
  .nav-drawer a:hover           { color: var(--gold, #e0a630); }

  /* ── Hero ── */
  .hero                         { min-height: 85vh; }
  .hero-content                 { padding: 40px 0; max-width: 100%; }
  .hero-content h1              { font-size: 36px; }
  .hero-content p               { font-size: 16px; }
  .hero-buttons                 { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-buttons a,
  .hero-buttons button          { width: 100%; justify-content: center; }

  /* ── Features Bar ── */
  .features-bar                 { grid-template-columns: repeat(2, 1fr); margin-top: -30px; }

  /* ── Tour Cards ── */
  .tours-grid-layout            { grid-template-columns: repeat(2, 1fr); }
  .rd-tours-grid                { grid-template-columns: repeat(2, 1fr); }
  .rd-category-grid             { grid-template-columns: repeat(2, 1fr); }

  /* ── Tour Detail Hero ── */
  .rd-tour-hero-inner,
  .rd-transfers-hero-inner      { grid-template-columns: 1fr; gap: 28px; }
  .rd-price-card,
  .rd-book-card                 { position: static; width: 100%; max-width: 480px; margin: 0 auto; }
  .rd-tour-hero,
  .rd-transfers-hero,
  .rd-tours-hero,
  .rd-blog-hero,
  .rd-post-hero                 { min-height: auto; padding: 100px 0 50px; }
  .rd-tour-hero h1,
  .rd-transfers-hero h1,
  .rd-tours-hero h1,
  .rd-blog-hero h1,
  .rd-post-hero h1              { font-size: clamp(1.8rem, 4vw, 2.4rem); }

  /* ── Tour Hero Meta ── */
  .rd-hero-meta                 { gap: 10px; }
  .rd-hero-meta-item            { padding: 8px 12px; }
  .rd-hero-ctas                 { flex-direction: column; }
  .rd-hero-ctas .rd-btn         { width: 100%; justify-content: center; }

  /* ── Detail Grid ── */
  .rd-detail-grid               { grid-template-columns: 1fr; gap: 20px; }
  .rd-faq-section .rd-container { grid-template-columns: 1fr; gap: 32px; }

  /* ── Transfer Types ── */
  .rd-transfer-types-inner      { grid-template-columns: 1fr; gap: 32px; }
  .rd-whyus-card                { margin-top: 0; }

  /* ── Benefits ── */
  .rd-benefits-grid             { grid-template-columns: repeat(2, 1fr); }

  /* ── Vehicles ── */
  .rd-vehicles-grid             { grid-template-columns: repeat(2, 1fr); }

  /* ── Routes ── */
  .rd-routes-grid               { grid-template-columns: repeat(3, 1fr); }

  /* ── Features Grid (Transfers page) ── */
  .rd-features-grid             { grid-template-columns: repeat(2, 1fr); }

  /* ── Satisfaction ── */
  .satisfaction-grid            { grid-template-columns: repeat(2, 1fr); }

  /* ── Transfers Split ── */
  .transfers-grid-wrap          { grid-template-columns: 1fr; gap: 36px; }
  .transfers-bullet-list        { grid-template-columns: 1fr; }

  /* ── Blog Index Hero ── */
  .blog-index-inner             { flex-direction: column; gap: 24px; padding: 40px 0; }
  .blog-index-text              { max-width: 100%; }
  .blog-index-ctas              { flex-direction: row; min-width: auto; }
  .blog-index-cta-btn           { flex: 1; justify-content: center; }

  /* ── Blog Grid ── */
  .blog-grid-layout             { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* ── Post Hero ── */
  .post-hero-inner              { flex-direction: column; gap: 24px; padding: 40px 0; }
  .post-hero-ctas               { min-width: auto; max-width: 100%; flex-direction: row; }
  .post-cta-btn                 { flex: 1; justify-content: center; }
  .post-hero-title              { font-size: 26px; }

  /* ── Post Content ── */
  .post-content-body            { padding: 30px 24px; }
  .post-share-bar               { padding: 20px 24px; }
  .post-featured-img            { height: 280px; }

  /* ── Page Hero ── */
  .page-hero                    { min-height: 280px; }
  .page-hero h1                 { font-size: 30px; }

  /* ── Footer ── */
  .footer-grid                  { grid-template-columns: 1fr 1fr; gap: 30px; padding: 40px 0 30px; }
  .footer-map iframe            { height: 180px; }

  /* ── CTA Banner ── */
  .rd-cta-banner-inner          { flex-direction: column; text-align: center; align-items: center; }
  .rd-cta-banner-left           { flex-direction: column; align-items: center; text-align: center; }
  .rd-cta-btns                  { justify-content: center; }

  /* ── Tours CTA Section ── */
  .rd-tours-cta-section         { flex-direction: column; text-align: center; }
  .rd-tours-cta-section .rd-cta-btns { justify-content: center; }

  /* ── Blog Hero (redesign) ── */
  .rd-blog-hero-inner           { grid-template-columns: 1fr; gap: 20px; }

  /* ── Section Header ── */
  .section-header h2            { font-size: 26px; }
  .section-title h2             { font-size: 28px; }
}

/* ─────────────────────────────────────────────────────────────
   LARGE PHONES  ≤ 768px
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ── Container padding ── */
  .container, .rd-container     { padding: 0 16px; }

  /* ── Tour Cards ── */
  .tours-grid-layout            { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .rd-tours-grid                { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .rd-category-grid             { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* ── Blog ── */
  .blog-grid-layout             { grid-template-columns: 1fr; gap: 18px; }
  .blog-search-filter-bar       { flex-direction: column; align-items: stretch; }
  .blog-search-box              { min-width: auto; }
  .blog-filter-box              { white-space: normal; }

  /* ── Footer ── */
  .footer-grid                  { grid-template-columns: 1fr; gap: 28px; }
  .footer-col h3::after         { left: 0; }

  /* ── Hero ── */
  .hero-content h1              { font-size: 30px; }
  .hero-content p               { font-size: 15px; }

  /* ── Page Hero ── */
  .page-hero                    { min-height: 240px; }
  .page-hero h1                 { font-size: 26px; }
  .page-hero p                  { font-size: 14px; }

  /* ── Blog post ── */
  .post-content-body            { padding: 24px 18px; }
  .post-share-bar               { padding: 18px; }
  .post-featured-img            { height: 220px; }

  /* ── CTA Inline ── */
  .post-content-body .cta-buttons { flex-direction: column; }

  /* ── Routes ── */
  .rd-routes-grid               { grid-template-columns: repeat(2, 1fr); }

  /* ── Trust row ── */
  .rd-trust-row                 { gap: 12px; }
  .rd-trust-item                { padding: 10px 14px; }

  /* ── Offer bar ── */
  .ht-offer-bar                 { left: 14px !important; right: 14px !important; bottom: 80px !important; border-radius: 30px !important; justify-content: space-between !important; }

  /* ── WhatsApp float ── */
  .wa-float,
  .whatsapp-float               { bottom: 20px; right: 16px; width: 50px; height: 50px; font-size: 24px; }

  /* ── Section headings ── */
  .section-header               { margin-bottom: 36px; }
  .section-header h2            { font-size: 24px; }
  .section-title h2             { font-size: 24px; }

  /* ── Summary tables — scroll on mobile ── */
  .post-content-body table,
  .post-content-body .comparison-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ─────────────────────────────────────────────────────────────
   PHONES  ≤ 576px
───────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  /* ── Container ── */
  .container, .rd-container     { padding: 0 14px; }

  /* ── Section spacing ── */
  .section                      { padding: 44px 0; }

  /* ── Hero ── */
  .hero                         { min-height: 75vh; }
  .hero-content                 { padding: 28px 0; }
  .hero-content h1              { font-size: 26px; line-height: 1.2; }
  .hero-content p               { font-size: 14px; margin-bottom: 24px; }
  .hero-buttons                 { gap: 10px; }

  /* ── Features Bar — stack to 1 col ── */
  .features-bar                 { grid-template-columns: 1fr; margin-top: 0; border-radius: 0; box-shadow: none; }
  .feature-item                 { border-right: none; padding: 16px 18px; }
  .feature-item:last-child      { border-bottom: none; }

  /* ── Tour Cards — 1 col ── */
  .tours-grid-layout            { grid-template-columns: 1fr; gap: 16px; }
  .rd-tours-grid                { grid-template-columns: 1fr; gap: 16px; }
  .rd-category-grid             { grid-template-columns: 1fr; gap: 14px; }

  /* ── Tour card image height ── */
  .tour-card-img-wrap           { height: 160px; }
  .rd-tour-card-img             { height: 180px; }
  .rd-cat-img                   { height: 160px; }

  /* ── Tour Hero ── */
  .rd-tour-hero,
  .rd-transfers-hero,
  .rd-tours-hero,
  .rd-blog-hero,
  .rd-post-hero                 { padding: 80px 0 40px; }
  .rd-hero-meta                 { gap: 8px; }
  .rd-hero-meta-item            { padding: 8px 10px; flex: 1 1 calc(50% - 8px); }

  /* ── Price card full width ── */
  .rd-price-card,
  .rd-book-card                 { max-width: 100%; border-radius: 12px; padding: 20px 16px; }

  /* ── Satisfaction ── */
  .satisfaction-grid            { grid-template-columns: 1fr; gap: 16px; }
  .satisfaction-card            { padding: 24px 20px; }

  /* ── Benefits ── */
  .rd-benefits-grid             { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* ── Vehicles ── */
  .rd-vehicles-grid             { grid-template-columns: 1fr; }

  /* ── Routes ── */
  .rd-routes-grid               { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* ── Features grid (transfers) ── */
  .rd-features-grid             { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* ── Detail section ── */
  .rd-detail-col                { padding: 20px 16px; }

  /* ── FAQ section ── */
  .rd-faq-section .rd-container { gap: 24px; }
  .rd-faq-item                  { padding: 14px 16px; }
  .rd-faq-item summary          { font-size: 13px; }

  /* ── Transfers Split ── */
  .transfers-split-section      { padding: 50px 0; }
  .transfers-text-box h3        { font-size: 22px; }

  /* ── Blog ── */
  .blog-index-ctas              { flex-direction: column; }
  .blog-index-cta-btn           { text-align: center; justify-content: center; }
  .blog-index-text h1           { font-size: 26px; }
  .blog-grid-layout             { grid-template-columns: 1fr; }
  .blog-card-img-wrap           { height: 180px; }
  .blog-card-info               { padding: 16px; }

  /* ── Post content ── */
  .post-content-body            { padding: 20px 16px; }
  .post-hero-title              { font-size: 22px; }
  .post-hero-ctas               { flex-direction: column; }
  .post-cta-btn                 { width: 100%; justify-content: center; }
  .post-featured-img            { height: 180px; }
  .post-share-bar               { padding: 16px; flex-wrap: wrap; }

  /* ── Page Hero ── */
  .page-hero                    { min-height: 200px; }
  .page-hero h1                 { font-size: 22px; }
  .page-hero p                  { font-size: 13px; }

  /* ── Footer ── */
  .footer-grid                  { padding: 32px 0 20px; gap: 22px; }
  .footer-map iframe            { height: 140px; }
  .footer-socials               { flex-wrap: wrap; }

  /* ── CTA Banner ── */
  .rd-cta-banner                { padding: 32px 0; }
  .rd-cta-banner-text h3        { font-size: 1.2rem; }
  .rd-cta-btns                  { flex-direction: column; width: 100%; }
  .rd-cta-btns .rd-btn          { width: 100%; justify-content: center; }

  /* ── Tours CTA Section ── */
  .rd-tours-cta-section         { padding: 24px 20px; }
  .rd-cta-left h3               { font-size: 1.1rem; }
  .rd-cta-btns                  { flex-direction: column; }

  /* ── Blog hero redesign ── */
  .rd-blog-hero                 { padding: 90px 0 50px; }

  /* ── Trust row ── */
  .rd-trust-row                 { flex-direction: column; align-items: stretch; }
  .rd-trust-item                { width: 100%; }

  /* ── Buttons ── */
  .btn-primary,
  .btn-outline-white,
  .btn-gold-outline             { padding: 11px 20px; font-size: 13px; }

  /* ── WhatsApp float ── */
  .wa-float,
  .whatsapp-float               { width: 46px; height: 46px; font-size: 22px; bottom: 16px; right: 14px; }

  /* ── Cookie banner ── */
  .ht-cookie-banner             { bottom: 14px !important; left: 10px !important; right: 10px !important; max-width: 100% !important; width: auto !important; }
  .ht-cookie-btns               { flex-wrap: wrap; }

  /* ── Section headings ── */
  .section-header               { margin-bottom: 28px; }
  .section-header h2            { font-size: 22px; }
  .section-title h2             { font-size: 22px; }
  .cursive-subtitle,
  .section-header .eyebrow      { font-size: 16px; }

  /* ── Navbar ── */
  .logo > span                  { font-size: 14px; }
}

/* ─────────────────────────────────────────────────────────────
   SMALL PHONES  ≤ 400px
───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .hero-content h1              { font-size: 22px; }
  .rd-price-amount              { font-size: 2.2rem; }
  .rd-category-grid             { grid-template-columns: 1fr; }
  .rd-benefits-grid             { grid-template-columns: 1fr; }
  .rd-routes-grid               { grid-template-columns: 1fr; }
  .rd-features-grid             { grid-template-columns: 1fr; }
  .rd-hero-meta-item            { flex: 1 1 100%; }
  .ht-offer-discounts           { flex-direction: column; }
  .post-hero-title              { font-size: 20px; }
}

/* ─────────────────────────────────────────────────────────────
   RTL (Arabic) — extra responsive fixes
───────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  [dir="rtl"] .hero-content     { text-align: right; }
  [dir="rtl"] .hero-buttons     { align-items: flex-end; }
  [dir="rtl"] .footer-col h3::after { left: auto; right: 0; }
  [dir="rtl"] .mobile-menu-btn  { margin-right: auto; margin-left: 0; }
}
@media (max-width: 576px) {
  [dir="rtl"] .hero-buttons     { align-items: stretch; }
  [dir="rtl"] .post-hero-ctas   { flex-direction: column; }
}

/* ─────────────────────────────────────────────────────────────
   PRINT — clean printable pages
───────────────────────────────────────────────────────────── */
@media print {
  .navbar, .wa-float, .whatsapp-float,
  .ht-offer-overlay, .ht-offer-bar,
  .ht-cookie-banner, .mobile-menu-btn,
  .lang-switcher, .footer-map,
  .blog-index-ctas, .post-hero-ctas { display: none !important; }
  body                          { font-size: 12pt; color: #000; }
  a                             { color: #000; text-decoration: underline; }
  .post-content-body            { padding: 0; }
}