/**
 * Washnah — mobile experience consolidation
 * Public website + News & Media Center
 * 2026-07-15
 * Loaded last so it resolves legacy responsive collisions without affecting desktop.
 */

@media (max-width: 1199.98px) {
  :root {
    --washnah-mobile-header: 70px;
    --washnah-mobile-gutter: clamp(14px, 4vw, 22px);
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    min-width: 0;
  }

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

  .container,
  .container-fluid,
  .row,
  .row > * {
    min-width: 0;
  }

  .site-header.header {
    height: var(--washnah-mobile-header) !important;
    min-height: var(--washnah-mobile-header) !important;
    padding: 6px 0 !important;
  }

  .site-header.header .container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    padding-inline: max(var(--washnah-mobile-gutter), env(safe-area-inset-left)) max(var(--washnah-mobile-gutter), env(safe-area-inset-right)) !important;
    gap: clamp(8px, 2vw, 14px) !important;
    flex-wrap: nowrap !important;
  }

  .site-header.header .logo {
    min-width: 0;
    margin: 0 !important;
  }

  .site-header.header .logo img {
    display: block;
    width: clamp(112px, 28vw, 150px) !important;
    max-width: 100% !important;
    max-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain;
  }

  .site-header.header .header-actions {
    min-width: 0;
    margin: 0 !important;
    gap: 6px !important;
  }

  .site-header.header .language-switcher {
    width: auto !important;
    min-width: 0 !important;
    max-width: 118px !important;
    height: 42px !important;
    padding: 3px !important;
    border-radius: 999px !important;
  }

  .site-header.header .language-switcher__option {
    min-width: 42px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding-inline: 8px !important;
    font-size: 10px !important;
  }

  .site-header.header .mobile-nav-toggle {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .site-header.header .mobile-nav-toggle::before {
    font-size: 24px !important;
  }

  .site-header.header .header-cta {
    min-height: 40px !important;
  }

  main,
  section,
  .section,
  .media-main {
    max-width: 100%;
  }

  .hero-home,
  .sector-hero,
  .contact-hero,
  .page-title,
  .media-hero,
  .news-detail-hero {
    scroll-margin-top: var(--washnah-mobile-header);
  }

  .washnah-ai__launcher,
  .scroll-top {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 767.98px) {
  :root {
    --washnah-mobile-header: 68px;
    --washnah-mobile-gutter: 16px;
  }

  /* Stable three-zone mobile header: menu | language | logo in Arabic,
     and logo | language | menu in English. */
  .site-header.header .container {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    direction: ltr !important;
    justify-content: stretch !important;
    column-gap: 8px !important;
  }

  html[dir="rtl"] .site-header.header .navmenu {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  html[dir="rtl"] .site-header.header .header-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  html[dir="rtl"] .site-header.header .logo {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  html[dir="ltr"] .site-header.header .logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  html[dir="ltr"] .site-header.header .header-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  html[dir="ltr"] .site-header.header .navmenu {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  html[dir="rtl"] #navmenu-list {
    direction: rtl !important;
    text-align: right !important;
  }

  html[dir="ltr"] #navmenu-list {
    direction: ltr !important;
    text-align: left !important;
  }

  .site-header.header .logo {
    width: clamp(108px, 30vw, 132px) !important;
    max-width: 132px !important;
  }

  .site-header.header .logo img {
    width: 100% !important;
    max-height: 44px !important;
  }

  .site-header.header .header-cta {
    display: none !important;
  }

  .site-header.header .language-switcher {
    max-width: 112px !important;
    height: 40px !important;
  }

  .site-header.header .language-switcher__icon {
    display: none !important;
  }

  .site-header.header .language-switcher__option {
    min-width: 43px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding-inline: 7px !important;
    font-size: 10px !important;
  }

  .site-header.header .mobile-nav-toggle {
    flex-basis: 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  /* General public-site spacing and overflow safety. */
  .container {
    padding-inline: var(--washnah-mobile-gutter);
  }

  .section,
  section:not(.hero-home):not(.sector-hero):not(.contact-hero):not(.media-hero):not(.news-detail-hero) {
    scroll-margin-top: calc(var(--washnah-mobile-header) + 10px);
  }

  h1,
  h2,
  h3,
  p,
  a,
  span,
  li {
    overflow-wrap: anywhere;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px !important;
  }

  .hero-home .hero-content,
  .sector-hero .sector-hero-copy,
  .contact-hero .container,
  .page-title .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--washnah-mobile-gutter) !important;
  }

  .hero-home .hero-main-title,
  .sector-hero h1,
  .page-title h1,
  .contact-hero h1 {
    max-width: 100% !important;
    text-wrap: balance;
  }

  .hero-actions,
  .sector-hero-actions {
    width: min(100%, 270px) !important;
    max-width: 270px !important;
  }

  .hero-actions > a,
  .sector-hero-actions > a {
    min-height: 46px !important;
    padding: 11px 17px !important;
    font-size: 13px !important;
  }

  .about-modern__grid,
  .about-modern__purpose,
  .chairman-message__pillars,
  .contact-layout,
  .project-outreach__layout {
    min-width: 0;
  }

  .site-footer .row {
    row-gap: 28px;
  }

  .site-footer .footer-contact-btn {
    width: fit-content;
    max-width: 100%;
  }

  .washnah-ai__launcher {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  html[dir="rtl"] .washnah-ai__launcher {
    right: max(14px, env(safe-area-inset-right)) !important;
    left: auto !important;
  }

  html[dir="ltr"] .washnah-ai__launcher {
    left: max(14px, env(safe-area-inset-left)) !important;
    right: auto !important;
  }

  .scroll-top {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  /* ----------------------------------------------------------------------
     News & Media Center — compact, deliberate phone composition
     ---------------------------------------------------------------------- */
  .media-center-page {
    --media-phone-gutter: 16px;
  }

  .media-center-page .media-main {
    overflow: clip;
  }

  .media-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: calc(var(--washnah-mobile-header) + 30px) 0 34px !important;
    align-items: center !important;
  }

  .media-hero__video {
    object-position: center center !important;
    transform: scale(1.035) !important;
  }

  .media-hero__overlay {
    background:
      linear-gradient(180deg, rgba(17, 7, 10, .67) 0%, rgba(19, 8, 11, .52) 46%, rgba(19, 8, 11, .78) 100%),
      radial-gradient(circle at 50% 35%, rgba(128, 25, 34, .16), transparent 58%) !important;
  }

  .media-hero__inner {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding-inline: var(--media-phone-gutter) !important;
  }

  .media-eyebrow {
    min-height: 32px !important;
    margin-bottom: 12px !important;
    padding: 6px 10px !important;
    gap: 7px !important;
    font-size: 10px !important;
  }

  .media-hero h1 {
    margin: 0 0 10px !important;
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
  }

  html[dir="rtl"] .media-hero h1 {
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
  }

  .media-hero p {
    display: -webkit-box;
    max-width: 34rem !important;
    margin: 0 auto !important;
    overflow: hidden;
    color: rgba(255,255,255,.84) !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .media-hero__switcher {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 20px auto 0 !important;
    padding: 4px !important;
    gap: 4px !important;
    border-radius: 999px !important;
  }

  .media-hero__switcher a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .media-section {
    padding: 42px 0 54px !important;
  }

  .media-section > .container,
  .news-detail > .container,
  .media-detail-section > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--media-phone-gutter) !important;
  }

  .media-toolbar,
  .album-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 10px 12px !important;
    margin-bottom: 22px !important;
  }

  .media-toolbar h2,
  .album-heading h2 {
    min-width: 0;
    padding-bottom: 10px !important;
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    line-height: 1.15 !important;
  }

  .media-toolbar h2::after,
  .album-heading h2::after {
    width: 48px !important;
    height: 3px !important;
  }

  .media-count {
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .media-filters {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .media-filter {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 8px !important;
    font-size: 11px !important;
    text-align: center !important;
  }

  .news-grid,
  .gallery-grid,
  .album-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .news-card,
  .media-card,
  .album-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 36px rgba(95, 16, 24, .075) !important;
    transform: none !important;
  }

  .news-card:hover,
  .media-card:hover,
  .album-card:hover {
    transform: none !important;
  }

  .news-card__image,
  .media-card__visual,
  .album-card__visual {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    background: linear-gradient(145deg, #f5edef 0%, #eadfe2 100%) !important;
  }

  .news-card__image img,
  .media-card__visual img,
  .album-card__visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .news-card__body,
  .album-card__body,
  .media-card__caption {
    padding: 18px 18px 20px !important;
  }

  .news-card__meta,
  .media-card__meta {
    gap: 6px !important;
    margin-bottom: 9px !important;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
  }

  .news-card h3,
  .album-card h3,
  .media-card__caption h3 {
    margin-bottom: 8px !important;
    font-size: clamp(1.1rem, 5vw, 1.3rem) !important;
    line-height: 1.48 !important;
    -webkit-line-clamp: 2 !important;
  }

  .news-card p,
  .album-card p,
  .media-card__caption p {
    margin-bottom: 0 !important;
    color: var(--media-muted) !important;
    font-size: 13px !important;
    line-height: 1.78 !important;
    -webkit-line-clamp: 3 !important;
  }

  .editorial-card__footer {
    padding-top: 14px !important;
  }

  .media-readmore-button {
    min-height: 42px !important;
    padding: 9px 14px !important;
    gap: 7px !important;
    font-size: 11.5px !important;
  }

  .card-visual-badge,
  .media-card__badge,
  .washnah-new-badge {
    top: 11px !important;
    min-height: 28px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }

  .washnah-new-badge {
    left: 11px !important;
    right: auto !important;
  }

  .news-card .card-visual-badge,
  .media-card .media-card__badge {
    right: 11px !important;
    left: auto !important;
  }

  .media-card__play {
    width: 52px !important;
    height: 52px !important;
  }

  .media-card__play i {
    font-size: 24px !important;
  }

  .media-empty {
    padding: 34px 18px !important;
    border-radius: 20px !important;
  }

  /* Detail pages */
  .news-detail-hero,
  .news-detail-hero.has-hero-image,
  .media-item-detail-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: calc(var(--washnah-mobile-header) + 42px) 0 44px !important;
  }

  .news-detail-hero__inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--media-phone-gutter) !important;
  }

  .back-link {
    min-height: 38px !important;
    margin-bottom: 18px !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
  }

  .news-detail__meta,
  .media-detail__hero-meta {
    gap: 7px !important;
    margin-bottom: 12px !important;
    font-size: 11px !important;
  }

  .news-detail-hero h1,
  .media-item-detail-hero h1 {
    margin-bottom: 12px !important;
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 1.2 !important;
  }

  .news-detail-hero p,
  .media-item-detail-hero p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px !important;
    line-height: 1.8 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .news-detail,
  .media-detail-section {
    padding: 42px 0 56px !important;
  }

  .news-detail__content,
  .media-detail__copy,
  .media-detail__aside {
    padding: 20px 18px !important;
    border-radius: 18px !important;
  }

  .news-detail__content {
    font-size: 15px !important;
    line-height: 1.95 !important;
  }

  .media-detail__stage {
    margin-bottom: 18px !important;
    border-radius: 18px !important;
  }

  .media-detail__content-grid {
    gap: 16px !important;
  }

  .media-detail__copy h2 {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.35 !important;
  }

  .news-linked-media {
    width: 100% !important;
    margin-top: 30px !important;
  }

  .news-linked-media__head h2 {
    font-size: 1.35rem !important;
  }
}

@media (max-width: 389.98px) {
  :root {
    --washnah-mobile-gutter: 12px;
  }

  .site-header.header .container {
    column-gap: 5px !important;
  }

  .site-header.header .logo {
    width: 104px !important;
  }

  .site-header.header .language-switcher {
    max-width: 102px !important;
  }

  .site-header.header .language-switcher__option {
    min-width: 39px !important;
    padding-inline: 5px !important;
  }

  .site-header.header .mobile-nav-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .media-center-page {
    --media-phone-gutter: 12px;
  }

  .media-hero h1 {
    font-size: 1.95rem !important;
  }

  .media-hero__switcher a {
    font-size: 11px !important;
  }

  .media-toolbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .media-count {
    padding-inline: 8px !important;
    font-size: 10px !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .news-card:hover img,
  .media-card:hover img,
  .album-card:hover img,
  .motion-card,
  .motion-magnetic {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-card,
  .media-card,
  .album-card,
  .news-card img,
  .media-card img,
  .album-card img {
    transition: none !important;
    animation: none !important;
  }
}