/**
 * HP2 responsive finalization
 *
 * Oxygen's grid-column-count media overrides compile to empty @media rules.
 * This sheet restores intended breakpoints for grids, hero, type, and media.
 */

/* -------------------------------------------------------------------------
   Shared: prevent horizontal bleed
   ---------------------------------------------------------------------- */
html.hp2-animated,
body {
  overflow-x: clip;
}

.hp2-marquee,
.hp2-marquee > .ct-section-inner-wrap {
  overflow: hidden !important;
  max-width: 100%;
}

.hp2-signal-grid,
.hp2-project-stack,
.hp2-article-grid,
.hp2-qatar-points,
.hp2-footer-main,
.pws-portfolio-stack {
  min-width: 0;
}

.hp2-signal-cell,
.hp2-project,
.hp2-article-card,
.hp2-qatar-point {
  min-width: 0;
}

.hp2-signal-answer,
.hp2-signal-outcome,
.hp2-project-bottom .ct-headline,
.hp2-display,
.hp2-inner-h,
.hp2-page-hero-title {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* -------------------------------------------------------------------------
   Large tablet / small desktop (≤1100px) — service row compress
   Matches HTML reference: hide list, keep 4-col summary layout
   ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hp2-service-row {
    grid-template-columns: 45px minmax(0, 1fr) minmax(0, 1fr) 45px !important;
  }

  .hp2-service-list-items {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   Tablet / small laptop (≤991px) — Oxygen "tablet"
   ---------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Oxygen grid-column-count media is empty — force real templates */
  .hp2-signal-grid,
  .hp2-signal-grid:not(.ct-section):not(.oxy-easy-posts),
  .hp2-signal-grid.oxy-easy-posts .oxy-posts,
  .hp2-signal-grid.ct-section .ct-section-inner-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hp2-project-stack,
  .hp2-project-stack:not(.ct-section):not(.oxy-easy-posts),
  .hp2-project-stack.oxy-easy-posts .oxy-posts,
  .hp2-project-stack.ct-section .ct-section-inner-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hp2-article-grid,
  .hp2-article-grid:not(.ct-section):not(.oxy-easy-posts),
  .hp2-article-grid.oxy-easy-posts .oxy-posts,
  .hp2-article-grid.ct-section .ct-section-inner-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Service rows: index | title+summary | arrow (list already hidden ≤1100) */
  .hp2-service-row {
    grid-template-columns: 36px minmax(0, 1fr) 45px !important;
    align-items: start !important;
  }

  .hp2-service-summary {
    grid-column: 2 / 3 !important;
  }

  .hp2-service-arrow {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
  }

  .hp2-service-list-items {
    display: none !important;
  }

  /*
   * Approach section: .reveal { position:relative } overrides Oxygen's
   * position:static media, so top:120px stays active and overlaps steps.
   */
  .hp2-approach-grid,
  .hp2-approach-grid:not(.ct-section):not(.oxy-easy-posts),
  .hp2-approach-grid.ct-section .ct-section-inner-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
  }

  .hp2-approach-title,
  .hp2-approach-title.reveal,
  .hp2-approach-title.reveal.active {
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  /* Steps: number | title, description under title (from tablet, not only phone) */
  .hp2-step {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px 20px !important;
  }

  .hp2-step > .ct-text-block:not(.hp2-step-num),
  .hp2-step > p,
  .hp2-step > .ct-text-block.hp2-step-desc {
    grid-column: 2 !important;
  }

  .hp2-step-title {
    font-size: clamp(22px, 3.5vw, 25px) !important;
  }

  /* Stack other two-column homepage headings/sections */
  .hp2-intro-copy,
  .hp2-cap-heading,
  .hp2-work-heading,
  .hp2-insights-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  .hp2-qatar > .ct-section-inner-wrap,
  .hp2-qatar.ct-section .ct-section-inner-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hp2-people > .ct-section-inner-wrap,
  .hp2-people.ct-section .ct-section-inner-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Hero readability + crop */
  .hp2-hero {
    height: auto !important;
    min-height: 850px !important;
  }

  .hp2-hero-media img,
  .hp2-hero-media .ct-image,
  .hp2-hero-media .ct-image img {
    object-position: 64% center !important;
  }

  .hp2-hero-shade {
    background:
      linear-gradient(90deg, rgba(0, 19, 29, .92), rgba(0, 19, 29, .50)),
      linear-gradient(0deg, rgba(0, 19, 29, .70), transparent 60%) !important;
  }

  .hp2-hero-content {
    inset-inline: clamp(22px, 4vw, 40px) !important;
    max-width: none !important;
    width: auto !important;
    top: 47% !important;
  }

  html:not([lang="ar"]):not([dir="rtl"]) .hp2-hero-content {
    left: clamp(22px, 4vw, 40px) !important;
    right: clamp(22px, 4vw, 40px) !important;
  }

  html[lang="ar"] .hp2-hero-content,
  html[dir="rtl"] .hp2-hero-content {
    left: clamp(22px, 4vw, 40px) !important;
    right: clamp(22px, 4vw, 40px) !important;
  }

  .hp2-hero-aside {
    display: none !important;
  }

  /* Size the rotator shell only — .hp2-word must inherit or it overflows AR titles */
  html:not([lang="ar"]):not([dir="rtl"]) .hp2-hero-title,
  html:not([lang="ar"]):not([dir="rtl"]) .hp2-word-rotator {
    font-size: clamp(48px, 9vw, 78px) !important;
    line-height: .92 !important;
  }

  .hp2-word-rotator .hp2-word {
    font-size: 1em !important;
    line-height: inherit !important;
  }

  .hp2-people-photo {
    min-height: 560px !important;
  }

  .hp2-people-photo img,
  .hp2-people-photo .ct-image img {
    object-position: 40% center !important;
  }

  .hp2-display {
    font-size: clamp(40px, 7vw, 64px) !important;
    line-height: .96 !important;
  }

  .hp2-page-hero-bg {
    padding-top: 70px !important;
    min-height: 280px !important;
  }

  .hp2-page-hero .ct-headline,
  .hp2-page-hero h1,
  .hp2-page-hero-title {
    font-size: clamp(40px, 8vw, 56px) !important;
    padding-inline: 16px;
  }

  .hp2-page-hero-bg::after {
    background:
      radial-gradient(58% 52% at 80% 24%, rgba(0, 205, 255, .16), transparent 70%),
      linear-gradient(90deg, rgba(0, 19, 29, .88) 0%, rgba(0, 19, 29, .62) 55%, rgba(0, 26, 38, .35) 100%),
      linear-gradient(0deg, rgba(0, 19, 29, .55), transparent 50%) !important;
  }

  /* Inner-page pattern grids (page IDs vary) */
  [class*="pws-split-grid-"],
  [class*="pws-feat-grid-"],
  [class*="pws-stat-grid-"],
  [class*="pws-steps-"],
  [class*="pws-industry-grid-"],
  [class*="pws-compare-"],
  [class*="pws-sla-grid-"],
  [class*="pws-legal-toc-"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hp2-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hp2-footer-main > .hp2-logo,
  .hp2-footer-main > .hp2-logo--footer,
  .hp2-footer-main > a.hp2-logo,
  .hp2-footer-main > p {
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------------------------------
   Phone landscape / large phone (≤768px)
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hp2-hero-actions {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }

  .hp2-signal-cell {
    min-height: 220px !important;
    padding: 22px 20px 44px !important;
  }

  .hp2-signal-answer {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .hp2-project-bottom .ct-headline {
    min-height: 0 !important;
    font-size: 16px !important;
  }

  .hp2-contact-copy .hp2-display,
  .hp2-contact .hp2-display {
    font-size: clamp(42px, 10vw, 64px) !important;
  }

  .hp2-inner-h {
    font-size: clamp(32px, 7.5vw, 40px) !important;
    line-height: 1.05 !important;
  }
}

/* -------------------------------------------------------------------------
   Phone portrait (≤520px)
   ---------------------------------------------------------------------- */
@media (max-width: 520px) {
  .hp2-signal-grid,
  .hp2-signal-grid:not(.ct-section):not(.oxy-easy-posts),
  .hp2-signal-grid.oxy-easy-posts .oxy-posts,
  .hp2-signal-grid.ct-section .ct-section-inner-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hp2-qatar-points,
  .hp2-qatar-points:not(.ct-section):not(.oxy-easy-posts),
  .hp2-qatar-points.oxy-easy-posts .oxy-posts,
  .hp2-qatar-points.ct-section .ct-section-inner-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hp2-step {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .hp2-service-row {
    padding-block: 27px !important;
    padding-inline: 5px !important;
    gap: 15px !important;
  }

  .hp2-service-summary {
    font-size: 11px !important;
  }

  .hp2-hero {
    min-height: 700px !important;
    height: auto !important;
  }

  .hp2-hero-media img,
  .hp2-hero-media .ct-image,
  .hp2-hero-media .ct-image img {
    object-position: 68% center !important;
  }

  .hp2-hero-shade {
    background:
      linear-gradient(90deg, rgba(0, 19, 29, .94), rgba(0, 19, 29, .58)),
      linear-gradient(0deg, rgba(0, 19, 29, .80), transparent 55%) !important;
  }

  .hp2-hero-content {
    top: 43% !important;
    left: 20px !important;
    right: 20px !important;
  }

  .hp2-hero-kicker,
  .hp2-hero-kicker p {
    font-size: 8px !important;
    letter-spacing: .08em !important;
    margin-bottom: 22px !important;
  }

  html:not([lang="ar"]):not([dir="rtl"]) .hp2-hero-title,
  html:not([lang="ar"]):not([dir="rtl"]) .hp2-word-rotator {
    font-size: 42px !important;
    line-height: .95 !important;
    letter-spacing: -.04em !important;
  }

  .hp2-word-rotator {
    min-width: 0 !important;
    margin-top: .04em !important;
  }

  .hp2-word-rotator .hp2-word {
    font-size: 1em !important;
    line-height: inherit !important;
  }

  /* Arabic glyphs need a taller rotator window than Latin .95em */
  html[lang="ar"] .hp2-word-rotator,
  html[dir="rtl"] .hp2-word-rotator {
    height: 1.2em !important;
  }

  .hp2-hero-intro {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-top: 18px !important;
    max-width: 100% !important;
  }

  .hp2-hero-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    margin-top: 28px !important;
  }

  .hp2-hero-bottom > span:first-child {
    display: none !important;
  }

  .hp2-section-pad > .ct-section-inner-wrap {
    padding-block: 80px !important;
  }

  .hp2-display {
    font-size: 40px !important;
    line-height: .98 !important;
  }

  .hp2-signal-cell {
    min-height: 210px !important;
  }

  .hp2-people-photo {
    min-height: 420px !important;
  }

  .hp2-people-copy {
    padding-block: 70px !important;
  }

  .hp2-project {
    padding: 16px !important;
  }

  .hp2-project-stage {
    aspect-ratio: 4 / 3;
  }

  .hp2-project-bottom {
    display: block !important;
  }

  .hp2-project-bottom .ct-headline {
    max-width: none !important;
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }

  .hp2-contact > .ct-section-inner-wrap,
  .hp2-qatar > .ct-section-inner-wrap {
    padding-block: 90px !important;
  }

  .hp2-contact-copy .hp2-display,
  .hp2-contact .hp2-display {
    font-size: 48px !important;
  }

  .hp2-page-hero-bg {
    min-height: 240px !important;
    padding-top: 70px !important;
  }

  .hp2-page-hero .ct-headline,
  .hp2-page-hero h1,
  .hp2-page-hero-title {
    font-size: 36px !important;
  }

  .hp2-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }

  .hp2-footer-contact,
  .hp2-footer-main address {
    grid-column: 1 / -1;
  }

  .hp2-footer-bottom {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}

/* -------------------------------------------------------------------------
   Very small phones
   ---------------------------------------------------------------------- */
@media (max-width: 380px) {
  html:not([lang="ar"]):not([dir="rtl"]) .hp2-hero-title,
  html:not([lang="ar"]):not([dir="rtl"]) .hp2-word-rotator {
    font-size: 36px !important;
  }

  .hp2-display {
    font-size: 34px !important;
  }

  html:not([lang="ar"]) .hp2-page-hero .ct-headline,
  html:not([lang="ar"]) .hp2-page-hero h1,
  html:not([lang="ar"]) .hp2-page-hero-title {
    font-size: 32px !important;
  }
}



/* -------------------------------------------------------------------------
   Arabic homepage hero — mirror photo away from RTL text block
   ---------------------------------------------------------------------- */
html[lang="ar"] .hp2-hero .hp2-hero-media img,
html[lang="ar"] .hp2-hero .hp2-hero-media .ct-image,
html[lang="ar"] .hp2-hero .hp2-hero-media .ct-image img {
  transform: scaleX(-1);
}

/* -------------------------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hp2-hero-media img,
  .hp2-project-stage img {
    transition: none !important;
  }
}