/**
 * Clineum WordPress Theme — Mobile CSS
 * Comprehensive mobile overrides for all sections.
 * Loaded after style.css; use !important only where competing specificity demands it.
 *
 * Breakpoints:
 *   max-width: 768px  — tablet / large mobile (primary)
 *   max-width: 480px  — small mobile (extra adjustments)
 */

/* ==========================================================================
   GLOBAL
   ========================================================================== */

@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    max-width: 100%;
    box-sizing: border-box;
  }

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

  .clineum-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .clineum-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  h1 {
    font-size: clamp(26px, 8vw, 42px) !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: clamp(22px, 6vw, 36px) !important;
    line-height: 1.2 !important;
  }

  h3 {
    font-size: clamp(18px, 5vw, 26px) !important;
    line-height: 1.25 !important;
  }

  /* Touch-friendly buttons globally */
  .clineum-btn {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .clineum-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .clineum-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-header__inner {
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Hide desktop nav and header CTA */
  .clineum-nav {
    display: none !important;
  }

  .clineum-btn--header-outline {
    display: none !important;
  }

  /* Show hamburger */
  .clineum-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 1001 !important;
  }

  /* Logo */
  .clineum-header__logo img,
  .clineum-header__logo svg {
    max-height: 36px !important;
    width: auto !important;
    height: 36px !important;
  }
}

/* ==========================================================================
   MOBILE NAV
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-mobile-nav {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .clineum-mobile-nav a {
    display: block !important;
    padding: 14px 20px !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
  }
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-hero {
    min-height: auto !important;
  }

  .clineum-hero__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 60px 20px 48px !important;
    align-items: start !important;
  }

  /* Hide dashboard mockup and floating notifications */
  .clineum-hero__dashboard,
  .clineum-hero__notif {
    display: none !important;
  }

  .clineum-hero__content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .clineum-hero__badge {
    align-self: flex-start !important;
    display: inline-flex !important;
    margin-bottom: 16px !important;
  }

  .clineum-hero__title {
    font-size: clamp(28px, 8vw, 48px) !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
  }

  .clineum-hero__subtitle {
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
  }

  .clineum-hero__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin-bottom: 32px !important;
  }

  .clineum-hero__actions .clineum-btn {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .clineum-hero__trust {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .clineum-hero__trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .clineum-hero__inner {
    padding: 48px 16px 40px !important;
  }

  .clineum-hero__title {
    font-size: clamp(26px, 9vw, 38px) !important;
  }
}

/* ==========================================================================
   INFO CARDS SECTION
   ========================================================================== */

@media (max-width: 768px) {
  /* Fix the negative margin overlap with hero */
  .clineum-info-cards {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 16px !important;
    background: #f0f4ff !important; /* light blue-grey contrast bg */
  }

  /* The grid card — contrast against page background */
  .clineum-info-cards__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 24px 20px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(36, 114, 255, 0.10) !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Each card item — add separator between cards */
  .clineum-info-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .clineum-info-card:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .clineum-info-card__icon {
    min-width: 48px !important;
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
  }

  .clineum-info-card__title {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }

  .clineum-info-card__text {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-about__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .clineum-about__image {
    order: -1 !important;
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  /* If image is wrapped in a div, target the img inside too */
  .clineum-about__image img {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  .clineum-about__content {
    width: 100% !important;
  }

  .clineum-about__metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .clineum-about__metric {
    padding: 16px !important;
    text-align: center !important;
  }

  .clineum-about__highlights,
  .clineum-about__features {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .clineum-about__metrics {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   SERVICES SECTION
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-services__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .clineum-services__grid > * {
    width: 100% !important;
  }
}

/* ==========================================================================
   PROCESS STEPS
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-process__steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    /* in case it's a grid */
    grid-template-columns: 1fr !important;
  }

  .clineum-process__step {
    width: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   LOGO MARQUEE
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-logo-marquee {
    overflow: hidden !important;
  }

  .clineum-logo-marquee img {
    height: 32px !important;
    width: auto !important;
  }
}

/* ==========================================================================
   COMBINED SECTION (Why Clineum + Contact Form)
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-combined__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .clineum-combined__left,
  .clineum-combined__right {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Why cards — keep 2 columns on tablet */
  .clineum-why__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .clineum-why-card {
    padding: 20px 16px !important;
    width: 100% !important;
  }

  /* Contact form */
  .clineum-combined__form {
    width: 100% !important;
  }

  .clineum-form__row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .clineum-form__group {
    width: 100% !important;
  }

  .clineum-form__group input,
  .clineum-form__group select,
  .clineum-form__group textarea {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  .clineum-form__group textarea {
    min-height: 120px !important;
  }

  .clineum-combined__contact-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .clineum-why__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-testimonials__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .clineum-testimonial {
    width: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   BLOG SECTION
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-blog__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .clineum-blog-card {
    width: 100% !important;
  }

  .clineum-blog-card img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
  }
}

/* ==========================================================================
   FINAL CTA SECTION
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-final-cta__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: center !important;
  }

  .clineum-final-cta__content,
  .clineum-final-cta__newsletter {
    width: 100% !important;
  }

  .clineum-final-cta__buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .clineum-final-cta__buttons .clineum-btn {
    width: 100% !important;
    max-width: 300px !important;
    min-height: 52px !important;
    justify-content: center !important;
  }

  .clineum-newsletter__form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .clineum-newsletter__form input[type="email"] {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  .clineum-newsletter__form .clineum-btn {
    width: 100% !important;
    min-height: 48px !important;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-footer__top {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }

  .clineum-footer__cta .clineum-btn {
    width: 100% !important;
    max-width: 260px !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .clineum-footer__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  .clineum-footer__bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .clineum-footer__social {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .clineum-footer__grid {
    grid-template-columns: 1fr !important;
  }

  .clineum-footer__top {
    align-items: center !important;
    text-align: center !important;
  }

  .clineum-footer__cta .clineum-btn {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   INNER PAGE HERO (Contact, About, Services pages)
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-page-hero {
    padding: 80px 20px 60px !important;
    min-height: auto !important;
  }

  .clineum-page-hero__title {
    font-size: clamp(26px, 7vw, 48px) !important;
    line-height: 1.2 !important;
  }

  .clineum-page-hero__subtitle {
    font-size: clamp(15px, 4vw, 18px) !important;
  }
}

@media (max-width: 480px) {
  .clineum-page-hero {
    padding: 60px 16px 48px !important;
  }
}

/* ==========================================================================
   SECTION HEADINGS — uniform treatment
   ========================================================================== */

@media (max-width: 768px) {
  .clineum-section__title,
  .clineum-section-title {
    font-size: clamp(22px, 6vw, 36px) !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  .clineum-section__subtitle,
  .clineum-section-subtitle {
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.6 !important;
  }
}