/**
 * Mobile / tablet only (Bootstrap lg breakpoint).
 * Desktop (min-width: 992px) is unchanged — rules are scoped to max-width media queries only.
 */

@media (max-width: 991.98px) {
  /* --- Tailwind utility overrides (Tailwind loads before this file on xowa layout) --- */
  .px-20 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .px-16 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .px-12 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-32 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .py-28 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Home: fixed backgrounds are unreliable on mobile Safari */
  body.page-home {
    background-attachment: scroll !important;
  }

  /* Future section: paint the home bg on the section so it always shows above <lg;
     body background can still paint incorrectly behind tall pages on some mobile engines. */
  .future-section {
    background-image: url('/images/bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  /* Marketing hero CTA: use full width on tablet (style.css used 75% between md and sm) */
  .hero-actions-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Footer: center social icons row (xowa layout) */
  .footer-section .footer-social {
    justify-content: center;
  }

  /* Long filter bars (e.g. legacy job search): stack instead of horizontal squeeze */
  form .flex.justify-between.items-center {
    flex-direction: column;
    align-items: stretch !important;
    gap: 1rem;
  }

  form .flex.items-center.space-x-4 {
    flex-wrap: wrap;
    row-gap: 0.75rem;
    column-gap: 0.5rem;
  }

  /* Job board: avoid sticky sidebar consuming viewport on small screens */
  .sticky.top-24 {
    position: relative !important;
    top: auto !important;
  }

  /* Embeds (maps, videos). Exclude full-bleed background videos (e.g. About impact). */
  video:not(.impact-video-bg),
  iframe {
    max-width: 100%;
    height: auto;
  }

  iframe {
    min-height: 0;
  }

  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
  }

  /* Bootstrap tables without wrapper: allow horizontal scroll without breaking desktop table display on large screens */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* --- Admin layout: sidebar + main (fixed w-64 sidebar) --- */
  body.bg-brand-bg-light.font-inter > nav + div.flex {
    flex-direction: column;
  }

  body.bg-brand-bg-light.font-inter > nav + div.flex > div.w-64 {
    width: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    border-right-width: 0 !important;
    border-bottom: 1px solid #e6e6e6;
  }

  body.bg-brand-bg-light.font-inter > nav + div.flex > div.flex-1 {
    min-width: 0;
    width: 100%;
  }

  /* Admin nav title: avoid overflow next to avatar */
  nav .text-xl.font-semibold {
    font-size: 1rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10rem;
  }

  /* Wide Tailwind tables in admin: shrink min-width constraint */
  .min-w-\[700px\] {
    min-width: 0 !important;
  }

  /* Select2 full width on narrow viewports */
  .select2-container {
    max-width: 100% !important;
  }

  /**
   * Project recruiting — "Growth cannot wait" block (.project-recruiting-growth-section).
   * Desktop uses large left padding + wide image column; on small viewports that must reset
   * so copy and image stay within the viewport with even gutters.
   */
  .project-recruiting-growth-section {
    overflow-x: hidden;
  }

  .project-recruiting-growth-container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .project-recruiting-growth-image {
    object-position: center;
  }

  /**
   * About page (/about): mobile-only — hero + Who we are spacing, strategies layout,
   * Our values cards, Impact video (cover + overlay).
   */
  body.page-about .placement-hero.about-hero-section {
    min-height: 0;
    padding-top: 5.25rem;
    padding-bottom: 2.25rem;
  }

  body.page-about .who-we-are-section {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  body.page-about .strategies-section-about {
    min-height: 0;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  body.page-about .strategies-section-about .strategies-wrapper-about {
    min-height: 0;
    padding-left: 0;
    padding-right: 0;
  }

  body.page-about .strategies-section-about .strategies-layout-about {
    position: relative;
    inset: auto;
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body.page-about .strategies-section-about .strategies-header-about {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.25rem;
    max-width: none;
    flex: none;
  }

  body.page-about .strategies-section-about .strategies-container-about {
    margin-top: 0.75rem;
    margin-bottom: 0;
  }

  body.page-about .strategies-section-about .strategies-scroll-wrapper {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
  }

  body.page-about .strategies-section-about .strategy-card {
    min-width: 260px;
    max-width: 300px;
    max-height: none;
  }

  body.page-about .our-values-section {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  body.page-about .our-values-slider-col {
    margin-top: 0.5rem;
  }

  body.page-about .our-values-slider {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  body.page-about .our-values-slides {
    max-width: 100%;
    min-height: 0;
  }

  body.page-about .our-values-slide-icon {
    width: 220px !important;
    height: 220px !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  body.page-about .our-values-slide-icon i {
    font-size: 7rem !important;
  }

  body.page-about .our-values-section .our-values-header {
    text-align: center;
    margin-bottom: 0.5rem;
  }

  body.page-about .our-values-section .our-values-header .our-values-title {
    text-align: center;
  }

  body.page-about .our-values-section .our-values-header .our-values-accent-line {
    margin-left: auto;
    margin-right: auto;
  }

  body.page-about .our-values-next {
    align-self: center;
    margin-left: 0;
  }

  body.page-about .impact-video-section.impact-video-section-about {
    min-height: min(92vw, 520px);
  }

  body.page-about .impact-video-bg-wrap .impact-video-bg,
  body.page-about video.impact-video-bg {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 28%;
  }

  body.page-about .impact-over-video-content {
    padding-top: 1.25rem;
    padding-bottom: 1.75rem;
  }

  body.page-about .impact-video-section-about .impact-video-cloud-overlay {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.65) 38%, rgba(255, 255, 255, 0.18) 72%, transparent 100%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 52%, transparent 92%);
  }
}

@media (max-width: 575.98px) {
  .py-32 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .py-28,
  .py-24 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Slightly smaller marketing headings on very small phones (Tailwind pages) */
  .text-3xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  .text-xl {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }

  .project-recruiting-growth-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .project-recruiting-growth-title .opportunities-title-bottom {
    font-size: clamp(1.65rem, 6.5vw, 2.125rem) !important;
    line-height: 1.15 !important;
  }

  .project-recruiting-growth-section .project-recruiting-line {
    width: min(5.5rem, 40vw);
  }

  body.page-about .placement-hero.about-hero-section {
    padding-top: 4.5rem;
    padding-bottom: 2rem;
  }

  body.page-about .strategies-section-about .strategy-card {
    min-width: 240px;
    max-width: 280px;
  }

  body.page-about .our-values-slide-icon {
    width: 200px !important;
    height: 200px !important;
  }

  body.page-about .our-values-slide-icon i {
    font-size: 6.25rem !important;
  }

  body.page-about .impact-video-section.impact-video-section-about {
    min-height: min(100vw, 440px);
  }
}

/**
 * Home testimonial only: `compactMobile` adds .testimonial-section--compact-mobile.
 * All rules are inside max-width 767.98px — zero effect on desktop / tablet ≥768px.
 */
@media (max-width: 767.98px) {
  .testimonial-section--compact-mobile {
    padding-top: 2rem !important;
    padding-bottom: 2.25rem !important;
  }

  .testimonial-section--compact-mobile .testimonial-header {
    text-align: left;
    margin-bottom: 1rem !important;
  }

  .testimonial-section--compact-mobile .testimonial-title {
    align-items: flex-start;
    margin-bottom: 0.5rem !important;
  }

  .testimonial-section--compact-mobile .testimonial-title-light,
  .testimonial-section--compact-mobile .testimonial-title-bold {
    font-size: clamp(1.4rem, 4.8vw, 1.7rem) !important;
    line-height: 1.12 !important;
  }

  .testimonial-section--compact-mobile .testimonial-subtitle {
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.5rem !important;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  .testimonial-section--compact-mobile .testimonial-underline {
    margin-left: 0;
    margin-right: 0;
  }

  /* Card shell (CSS only — no extra DOM / no Tailwind on desktop) */
  .testimonial-section--compact-mobile .testimonial-content-wrapper {
    margin-top: 0.75rem !important;
    border: 1px solid rgba(228, 228, 231, 0.95);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 20px rgba(15, 23, 42, 0.06);
    padding: 1.25rem 1rem 1rem;
    overflow: hidden;
  }

  .testimonial-section--compact-mobile .testimonial-profiles {
    align-items: center;
    gap: 0.65rem;
  }

  .testimonial-section--compact-mobile .profile-images {
    justify-content: center;
    width: 100%;
  }

  .testimonial-section--compact-mobile .profile-info {
    text-align: center;
  }

  .testimonial-section--compact-mobile .profile-image-wrapper {
    width: 64px !important;
    height: 64px !important;
  }

  .testimonial-section--compact-mobile .profile-name {
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
  }

  .testimonial-section--compact-mobile .profile-role {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
  }

  .testimonial-section--compact-mobile .testimonial-quote-wrapper {
    padding: 0.75rem 0.25rem 0.5rem !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
  }

  .testimonial-section--compact-mobile .testimonial-quote-wrapper .quote-bg.quote-bg-bottom {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 120px !important;
    height: auto !important;
    opacity: 0.06 !important;
    filter: grayscale(1);
  }

  .testimonial-section--compact-mobile .testimonial-quote-text {
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0.65rem !important;
    text-align: center;
    max-width: min(100%, 20rem);
    margin-left: auto;
    margin-right: auto;
  }

  .testimonial-section--compact-mobile .testimonial-rating {
    justify-content: center;
    margin-bottom: 0 !important;
  }

  .testimonial-section--compact-mobile .rating-stars .star {
    font-size: 1.05rem !important;
  }

  .testimonial-section--compact-mobile .testimonial-arrow-btn {
    margin-top: 0 !important;
    padding-top: 0.15rem !important;
  }
}