/* ============================================================
   MOBILE.CSS — Responsive overrides for all pages
   Translates exact Tailwind breakpoints from original React app
   Base: mobile-first (no media query = mobile)
   sm: 640px | md: 768px | lg: 1024px | xl: 1280px
============================================================ */

/* ============================================================
   GLOBAL
============================================================ */
html { -webkit-text-size-adjust: 100%; }

img, video, iframe {
  max-width: 100%;
}

/* ============================================================
   HEADER — mobile
============================================================ */
.rm-header-inner {
  padding: 0.5rem 1.5rem;
}

.rm-logo {
  height: 3rem;
}

@media (min-width: 768px) {
  .rm-header-inner { padding: 0.5rem 3rem; }
  .rm-logo { height: 3.5rem; }
}

@media (min-width: 1024px) {
  .rm-header-inner { padding: 0.5rem 4rem; }
}

/* ============================================================
   HERO — mobile
   text-3xl sm:text-4xl lg:text-5xl xl:text-6xl
============================================================ */
.rm-hero__top {
  padding-top: 7rem;
  padding-bottom: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.rm-hero__title {
  font-size: 1.875rem; /* text-3xl */
}

@media (min-width: 640px) {
  .rm-hero__title { font-size: 2.25rem; } /* sm:text-4xl */
}

@media (min-width: 1024px) {
  .rm-hero__top { padding-top: 8rem; } /* lg:pt-32 */
  .rm-hero__title { font-size: 3rem; } /* lg:text-5xl */
}

@media (min-width: 1280px) {
  .rm-hero__title { font-size: 3.75rem; } /* xl:text-6xl */
}

/* Subtitle: text-lg sm:text-xl lg:text-2xl xl:text-3xl */
.rm-hero__subtitle {
  font-size: 1.125rem;
}

@media (min-width: 640px) { .rm-hero__subtitle { font-size: 1.25rem; } }
@media (min-width: 1024px) { .rm-hero__subtitle { font-size: 1.5rem; } }
@media (min-width: 1280px) { .rm-hero__subtitle { font-size: 1.875rem; } }

/* Desc: text-xs sm:text-sm lg:text-base */
.rm-hero__desc {
  font-size: 0.75rem;
}

@media (min-width: 640px) { .rm-hero__desc { font-size: 0.875rem; } }
@media (min-width: 1024px) {
  .rm-hero__desc {
    font-size: 1rem;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3rem;
  }
}

/* Left text: text-center lg:text-left */
@media (min-width: 1024px) {
  .rm-hero__left {
    text-align: left;
    padding-left: 3rem;
    padding-right: 2rem;
    max-width: none;
    margin: 0;
  }
}

@media (min-width: 1280px) {
  .rm-hero__left { padding-left: 5rem; }
}

/* Body grid: grid-cols-1 lg:grid-cols-2 */
.rm-hero__body {
  grid-template-columns: 1fr;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .rm-hero__body {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }
}

/* Star logo: lg:hidden */
.rm-hero__star-mobile { display: block; }

@media (min-width: 1024px) {
  .rm-hero__star-mobile { display: none; }
}

/* Right col (mockup): hidden lg:flex */
.rm-hero__right { display: none; }

@media (min-width: 1024px) {
  .rm-hero__right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
  }
}

/* ============================================================
   BRANDS BAR — mobile
============================================================ */
.rm-brands { padding: 2.5rem 1.5rem 3rem; }

@media (min-width: 768px) { .rm-brands { padding: 3.5rem 1.5rem; } }

/* Marquee: show on mobile, hide on md */
.rm-brands__marquee-wrap { display: block; }

@media (min-width: 768px) { .rm-brands__marquee-wrap { display: none; } }

/* Grid: hidden on mobile, grid-cols-4 on md, grid-cols-8 on lg */
.rm-brands__grid { display: none; }

@media (min-width: 768px) {
  .rm-brands__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .rm-brands__grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 2rem;
  }
}

/* ============================================================
   ABOUT SECTION — mobile
   Mobile: block (stacked). Desktop: grid-cols-[1fr_2fr_1fr]
============================================================ */
.rm-about__mobile { display: block; }

@media (min-width: 768px) { .rm-about__mobile { display: none; } }

.rm-about__desktop { display: none; }

@media (min-width: 768px) {
  .rm-about__desktop {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    min-height: 80vh;
  }
}

/* Mobile vid height */
.rm-about__vid-wrap { height: 12rem; }

/* Content padding mobile */
.rm-about__content { padding: 2.5rem 2rem; }

@media (min-width: 768px) {
  .rm-about__content--center { padding: 7rem 3rem; }
}

/* ============================================================
   SERVICES GRID (homepage) — mobile
   grid-cols-2 → grid-cols-4 on md
============================================================ */
.rm-services__grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .rm-services__grid { grid-template-columns: repeat(4, 1fr); }
}

.rm-service-card__title {
  font-size: 0.625rem;
}

@media (min-width: 640px) { .rm-service-card__title { font-size: 0.75rem; } }
@media (min-width: 768px) { .rm-service-card__title { font-size: 1.125rem; } }

.rm-service-card__btn {
  font-size: 0.625rem;
  padding: 0.375rem 0.75rem;
}

@media (min-width: 768px) { .rm-service-card__btn { font-size: 0.875rem; padding: 0.5rem 1.25rem; } }

.rm-service-card__content { padding: 0.75rem 0.75rem 1rem; }

@media (min-width: 768px) { .rm-service-card__content { padding: 1.5rem; } }

/* ============================================================
   PROJECTS SECTION (homepage) — mobile
   grid-cols-2 → grid-cols-4
============================================================ */
.rm-projects__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .rm-projects__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

/* ============================================================
   PACKS SECTION — mobile
   grid-cols-1 → grid-cols-3 md
============================================================ */
.rm-packs__grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .rm-packs__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* Featured card: no scale on mobile */
.rm-pack-card--featured {
  transform: none;
}

@media (min-width: 768px) {
  .rm-pack-card--featured { transform: scale(1.02); }
}

/* ============================================================
   CONTACT SECTION — mobile
   grid-cols-1 → grid-cols-[1fr_auto_1fr] md
============================================================ */
.rm-contact__grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .rm-contact__grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
  }
}

.rm-contact__form-wrap { padding-right: 0; }
.rm-contact__calendly-wrap { padding-left: 0; }

@media (min-width: 768px) {
  .rm-contact__form-wrap { padding-right: 3rem; }
  .rm-contact__calendly-wrap { padding-left: 3rem; }
}

/* Star: hidden on mobile */
.rm-contact__star { display: none; }

@media (min-width: 768px) {
  .rm-contact__star {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    flex-shrink: 0;
  }
}

.rm-contact__star-img {
  width: 113px;
  height: 113px;
  object-fit: contain;
  opacity: 0.9;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

/* ============================================================
   CONTACT INNER PADDING — mobile
============================================================ */
.rm-contact__inner {
  padding: 4rem 1.5rem;
}

@media (min-width: 768px) { .rm-contact__inner { padding: 6rem 3rem; } }
@media (min-width: 1024px) { .rm-contact__inner { padding: 6rem 5rem; } }

/* Calendly: height on mobile */
.rm-contact__calendly-iframe {
  height: 400px;
}

@media (min-width: 768px) {
  .rm-contact__calendly-iframe { height: 580px; }
}

.rm-contact__calendly-card {
  min-height: 400px;
}

@media (min-width: 768px) {
  .rm-contact__calendly-card { min-height: 580px; }
}

.rm-contact__form-card {
  min-height: unset;
}

@media (min-width: 768px) {
  .rm-contact__form-card { min-height: 580px; }
}

/* ============================================================
   FOOTER — mobile
============================================================ */
.rm-footer-links {
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .rm-footer-links { flex-direction: row; gap: 2rem; }
}

.rm-footer-bottom {
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 768px) {
  .rm-footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* ============================================================
   SERVICES PAGE — mobile
============================================================ */

/* S1: col → row at md */
.rm-svc-s1__row {
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .rm-svc-s1__row { flex-direction: row; gap: 2rem; }
}

.rm-svc-s1__img-col { width: 14rem; }

@media (min-width: 768px) { .rm-svc-s1__img-col { width: 16rem; } }
@media (min-width: 1024px) { .rm-svc-s1__img-col { width: 18rem; } }

/* S2: tight on all sizes */
.rm-svc-s2__row { padding: 0 0.375rem; }

@media (min-width: 768px) { .rm-svc-s2__row { padding: 0 1.5rem; } }

/* S3: 1 col mobile, 3 col sm */
.rm-svc-s3__grid { grid-template-columns: 1fr; }

@media (min-width: 640px) { .rm-svc-s3__grid { grid-template-columns: repeat(3, 1fr); } }

/* S4 body: col → row at lg */
.rm-svc-s4__body { flex-direction: column; }

@media (min-width: 1024px) { .rm-svc-s4__body { flex-direction: row; } }

.rm-svc-s4__mockup { width: 16rem; }

@media (min-width: 768px) { .rm-svc-s4__mockup { width: 24rem; } }
@media (min-width: 1024px) { .rm-svc-s4__mockup { width: 34rem; } }

/* S4 min-height so it renders with no bg image */
.rm-svc-s4 { min-height: 400px; }

/* ============================================================
   ABOUT PAGE — mobile
============================================================ */
.rm-about-pg__founder-grid {
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .rm-about-pg__founder-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.rm-about-pg__founder-img-wrap { justify-content: center; }

@media (min-width: 768px) { .rm-about-pg__founder-img-wrap { justify-content: flex-end; } }

.rm-about-pg__founder-img {
  width: 240px;
  height: 320px;
}

@media (min-width: 768px) { .rm-about-pg__founder-img { width: 280px; height: 380px; } }
@media (min-width: 1024px) { .rm-about-pg__founder-img { width: 320px; height: 440px; } }

/* Split sections: stack on mobile, grid on md */
.rm-about-pg--split {
  display: block;
}

@media (min-width: 768px) {
  .rm-about-pg--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
  }
}

.rm-about-pg__split-img { min-height: 280px; }

@media (min-width: 768px) { .rm-about-pg__split-img { min-height: 0; } }

/* Reversed: image first on mobile */
.rm-about-pg--reversed .rm-about-pg__split-img { order: 0; }
.rm-about-pg--reversed .rm-about-pg__split-text { order: 1; }

@media (min-width: 768px) {
  .rm-about-pg--reversed .rm-about-pg__split-img { order: -1; }
  .rm-about-pg--reversed .rm-about-pg__split-text { order: 0; }
}

/* ============================================================
   PROJECTS PAGE — mobile
============================================================ */
.rm-proj-item__grid {
  display: block;
}

@media (min-width: 768px) {
  .rm-proj-item__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
}

.rm-proj-item__img-col {
  padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
  .rm-proj-item__img-col { grid-column: 7 / 13; padding: 3rem; }
  .rm-proj-item__img-col--first { grid-column: 1 / 7; grid-row: 1; }
}

.rm-proj-item__text-col {
  padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
  .rm-proj-item__text-col { grid-column: 1 / 7; padding: 4rem; }
  .rm-proj-item__grid--left .rm-proj-item__text-col { grid-column: 7 / 13; }
}

.rm-proj-item__img-wrap { height: 45vw; min-height: 280px; }

@media (min-width: 768px) { .rm-proj-item__img-wrap { height: 55vh; } }

/* ============================================================
   PAGE HERO — mobile
============================================================ */
.rm-page-hero { height: 35vh; }

@media (min-width: 768px) { .rm-page-hero { height: 40vh; } }

.rm-page-hero--tall { height: 45vh; }

@media (min-width: 768px) { .rm-page-hero--tall { height: 55vh; } }
@media (min-width: 1024px) { .rm-page-hero--tall { height: 60vh; } }

.rm-page-hero__title {
  font-size: clamp(1.75rem, 6vw, 3rem);
}

/* ============================================================
   SLOGAN BAR — mobile
============================================================ */
.rm-slogan-bar { padding: 1.5rem 0; }

@media (min-width: 768px) { .rm-slogan-bar { padding: 2rem 0; } }

.rm-slogan-text { font-size: clamp(1.5rem, 5vw, 3rem); }

/* ============================================================
   404 PAGE — mobile
============================================================ */
.rm-404-wrap {
  padding: 6rem 1.5rem 4rem;
}

/* ============================================================
   WIDAD ADMIN — mobile
============================================================ */
.panel-card {
  padding: 2rem 1.5rem;
}