/* Ali Raza Consultant - phone and tablet layout fixes (loaded after the page styles) */

/* ---------- tablets and phones ---------- */
@media (max-width: 760px) {
  /* Section spacing: tighter on small screens */
  .mf-sec { padding-top: 68px !important; padding-bottom: 68px !important; }

  /* Home: services, one card per row */
  .mf-svc6 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .mf-svc6 > * { grid-column: auto !important; height: 300px !important; }

  /* Home: "how we read your file" visual */
  .mf-method { height: auto !important; padding: 22px 16px 78px !important; }
  .mf-method > div:first-child { position: relative !important; left: auto !important; right: auto !important; top: auto !important; }
  .mf-method > .arc-fa { right: 18px !important; bottom: 20px !important; }

}

/* ---------- destinations scene: tablets and phones ---------- */
@media (max-width: 1099px) {
  /* Home: destinations scene */
  .arc-jr { height: auto !important; padding: 0 16px !important; }
  .arc-jr > div { padding-top: 0 !important; }
  .arc-jr-stage {
    position: relative !important; top: 0 !important; height: auto !important; min-height: 0 !important;
    display: flex; flex-direction: column; padding: 22px 18px 20px; border-radius: 28px;
  }
  .arc-jr-stage .arc-world { top: auto !important; bottom: 325px !important; margin-top: 0 !important; }
  .arc-jr-stage .jr-shade {
    background: linear-gradient(180deg, rgba(16,14,13,.95) 0%, rgba(16,14,13,.6) 24%, rgba(16,14,13,0) 36%,
      rgba(16,14,13,0) 50%, rgba(16,14,13,.82) 62%, rgba(16,14,13,.97) 100%) !important;
  }
  .arc-jr-from {
    position: relative !important; right: auto !important; top: auto !important; order: -1;
    align-self: flex-start; max-width: 100%; margin-bottom: 16px; z-index: 3;
  }
  .arc-jr-from-txt { white-space: normal !important; }
  .arc-jr-picker { left: 0 !important; right: 0 !important; top: 58px !important; width: auto !important; z-index: 6; }
  .jr-head { position: relative !important; left: auto !important; top: auto !important; width: auto !important; gap: 10px !important; z-index: 3; }
  .jr-head h2 { font-size: 31px !important; line-height: 1.08 !important; }
  .jr-head p { font-size: 15px !important; }
  .jr-panels {
    position: relative !important; left: auto !important; bottom: auto !important; width: auto !important;
    height: 440px !important; margin-top: 210px; z-index: 3;
  }
  .jr-chips {
    position: relative !important; right: auto !important; bottom: auto !important; width: auto !important;
    margin-top: 16px; gap: 10px !important; z-index: 3;
  }
  .arc-jr-chip { cursor: pointer; -webkit-tap-highlight-color: transparent; }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .jr-panels { width: 440px !important; margin-top: 230px; }
  .jr-head { max-width: 560px; }
  .arc-jr-stage { padding: 30px 32px 28px; }
  .arc-jr-stage .arc-world { bottom: 330px !important; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  /* Hero: the white summary card stays inside the screen */
  .mf-herocard { width: auto !important; left: 0 !important; right: 0 !important; }

  /* Footer: brand on top, two link columns, contact full width */
  .mf-foot { grid-template-columns: 1fr 1fr !important; gap: 34px 20px !important; padding: 44px 0 36px !important; }
  .mf-foot > :first-child, .mf-foot > :last-child { grid-column: 1 / -1; }
  .mf-foot > * { min-width: 0; }
  .mf-foot a, .mf-foot span { overflow-wrap: anywhere; }
}

/* Very small phones (iPhone SE and similar) */
@media (max-width: 380px) {
  .jr-head h2 { font-size: 27px !important; }
  .jr-panels { height: 470px !important; margin-top: 190px; }
  .arc-jr-stage .arc-world { bottom: 345px !important; }
  .arc-bookbtn { padding: 0 12px !important; font-size: 13.5px !important; }
  .arc-bookbtn svg { display: none !important; }
  .arc-logo { flex-shrink: 0 !important; width: 128px !important; height: auto !important; object-fit: contain; }
  .mf-svc6 > * { height: 280px !important; }
}

/* Smallest phones (320px): the menu holds the Book a call link */
@media (max-width: 340px) {
  .arc-hcta { display: none !important; }
}

/* ---------- FAQ page: topics as a sticky swipe row, help card after the questions ---------- */
@media (max-width: 899px) {
  .mf-faqside { display: contents !important; }
  .mf-faqcats {
    order: -1; flex: 1 1 100%; flex-direction: row !important; overflow-x: auto; gap: 8px !important;
    position: sticky; top: 74px; z-index: 5; margin: 0 -24px; padding: 10px 24px 12px;
    background: rgba(250, 248, 245, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mf-faqcats::-webkit-scrollbar { display: none; }
  .mf-faqcats > .faq-cat {
    flex: 0 0 auto; gap: 10px; min-height: 44px !important; padding: 0 16px !important;
    border-radius: 999px !important; font-size: 14.5px !important; white-space: nowrap;
  }
  .mf-faqside > :last-child { order: 2; flex: 1 1 100%; }
  [data-faq] { scroll-margin-top: 140px; }
}