/* ===================================================================
   FILE        : tech-it/tech-it.css
   PROJECT     : Lexvora Consulting
   DOMAIN      : Technology & IT
   PURPOSE     : Domain-level extension for the Technology & IT page
                 family. It does NOT replace the shared theme - it is
                 loaded AFTER main-theme.css / header.css / footer.css /
                 menu-*.css and only adds the pieces that are specific
                 to this domain:
                   1. the IT consulting hero banner
                   2. the platform showcase ("Purpose-Built Platforms")
   PATTERN     : Same convention as resources/css/health/. Every other
                 domain gets its own folder and its own thin override
                 sheet on top of the shared theme.
   ASSETS      : resources/images/tech/
   =================================================================== */

/* ===================================================================
   1. PAGE SHELL
   =================================================================== */

.it-page {
  background: #f4efe8;
  color: #16222b;
}

.it-section {
  padding: 56px 5vw;
  background: #f4efe8;
}

.it-shell {
  width: min(100%, 1400px);
  margin: 0 auto;
}

/* ===================================================================
   2. HERO BANNER

   The scene lives in its own right-hand box (::before) rather than on
   the section, and is sized with `cover`. That is what removes the hard
   vertical seam: at wide viewports a right-pinned `auto 100%` image only
   covers as much width as its own aspect ratio allows, so on a 2560px
   screen roughly 1100px of bare background was showing to its left.
   A box that always fills cannot leave a gap, and `cover` crops rather
   than stretches, so the artwork is never distorted.

   ::after carries the cream-to-clear blend, spread over roughly a third
   of the image box so the two halves melt together instead of meeting
   at a line.
   =================================================================== */

.it-hero {
  --it-hero-h: 640px;
  --it-media-start: 38%;

  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  height: var(--it-hero-h);
  min-height: var(--it-hero-h);
  margin-top: 74px;
  padding: 0;
  overflow: hidden;
  background: #f7f2eb;
  box-shadow: inset 0 -1px 0 rgba(18,40,55,.12);
}

/* the scene */
.it-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 0 var(--it-media-start);
  /* WebP is 165 KB, JPEG 423 KB. Browsers without image-set() take the JPEG
     from the first declaration. The 2 MB PNG this replaced is gone. */
  background-image: url("../../images/tech/hero/it-consulting-hero-labeled-wide.jpg");
  background-image: image-set(
    url("../../images/tech/hero/it-consulting-hero-labeled-wide.webp") type("image/webp"),
    url("../../images/tech/hero/it-consulting-hero-labeled-wide.jpg") type("image/jpeg")
  );
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

/* the blend */
.it-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 var(--it-media-start);
  background:
    linear-gradient(
      90deg,
      #f7f2eb 0%,
      rgba(247,242,235,.985) 8%,
      rgba(247,242,235,.93) 17%,
      rgba(247,242,235,.82) 26%,
      rgba(247,242,235,.64) 35%,
      rgba(247,242,235,.44) 45%,
      rgba(247,242,235,.26) 55%,
      rgba(247,242,235,.13) 65%,
      rgba(247,242,235,.05) 75%,
      rgba(247,242,235,0) 86%
    ),
    radial-gradient(
      120% 145% at 0% 50%,
      rgba(255,250,242,.72) 0%,
      rgba(255,250,242,.34) 38%,
      rgba(255,250,242,0) 68%
    );
}

.it-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0 clamp(24px, 5vw, 96px);
}

.it-hero__text {
  position: relative;
  z-index: 2;
  /* fluid rather than fixed, so the longest headline line always ends
     inside the opaque part of the blend instead of jumping across it
     at a breakpoint */
  max-width: clamp(430px, 46vw, 650px);
  color: #102433;
}

.it-hero__text .eyebrow {
  margin: 0 0 22px;
  color: #0d2a3a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.it-hero__text h1 {
  max-width: 680px;
  margin: 0 0 24px;
  color: #102433;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 4vw, 68px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.035em;
}

.it-headline-line {
  display: block;
  white-space: nowrap;
}

.it-headline-line + .it-headline-line {
  margin-top: 18px;
}

.it-hero__text .accent {
  color: #b17538;
}

.it-hero__text .gold-line {
  margin: 0 0 22px;
}

.it-hero__text .lead {
  max-width: 560px;
  margin: 0;
  color: rgba(20,38,51,.94);
  font-size: 17px;
  line-height: 1.62;
}

.it-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.it-hero__buttons .btn {
  min-height: 48px;
}

.it-hero__buttons .btn-outline {
  color: #173344;
  border-color: rgba(22,52,68,.38);
  background: rgba(255,255,255,.38);
}

.it-hero__mini {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 650px;
  margin-top: 42px;
  border-top: 1px solid rgba(18,40,55,.2);
}

.it-mini {
  min-height: 78px;
  padding: 16px 16px 0;
  color: rgba(20,38,51,.9);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.it-mini + .it-mini {
  border-left: 1px solid rgba(18,40,55,.18);
}

.it-mini .icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 8px;
}

.it-mini .icon img {
  display: block;
  width: 32px;
  height: 32px;
}

/* ---- ultrawide: hand more width to the scene ---------------------- */
@media (min-width: 1800px) {
  .it-hero {
    --it-hero-h: 700px;
    --it-media-start: 44%;
  }

  .it-hero__content {
    padding-left: max(5vw, calc((100% - 1700px) / 2));
  }
}

/* ---- small desktop / large tablet --------------------------------- */
@media (max-width: 1180px) {
  .it-hero {
    --it-hero-h: 600px;
    /* the scene gives up width here so the longest headline line still
       ends inside the opaque part of the blend rather than over the
       photo, which is where contrast started to suffer near 1000px */
    --it-media-start: 40%;
  }

  .it-hero__text {
    max-width: 440px;
  }

  .it-hero__text .lead {
    max-width: 420px;
  }

  .it-hero__text h1 {
    font-size: clamp(38px, 4.4vw, 52px);
  }
}

/* ---- tablet: stop overlaying, stack copy above the scene ---------- */
@media (max-width: 900px) {
  .it-hero {
    --it-hero-h: auto;
    display: block;
    height: auto;
    min-height: 0;
    padding: clamp(34px, 6vw, 56px) 0 0;
  }

  .it-hero::before {
    inset: auto 0 0 0;
    height: clamp(240px, 34vw, 320px);
  }

  /* the blend now runs bottom-to-top across the top edge of the scene */
  .it-hero::after {
    inset: auto 0 0 0;
    height: clamp(240px, 34vw, 320px);
    background: linear-gradient(
      180deg,
      #f7f2eb 0%,
      rgba(247,242,235,.86) 14%,
      rgba(247,242,235,.5) 30%,
      rgba(247,242,235,.18) 48%,
      rgba(247,242,235,0) 68%
    );
  }

  .it-hero__content {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0 clamp(20px, 5vw, 48px) clamp(252px, 35vw, 336px);
  }

  .it-hero__text,
  .it-hero__text h1,
  .it-hero__text .lead,
  .it-hero__mini {
    max-width: none;
  }

  .it-hero__text h1 {
    font-size: clamp(38px, 6.4vw, 56px);
  }

  .it-hero__mini {
    margin-top: 34px;
  }
}

/* ---- tablet portrait and below ------------------------------------ */
@media (max-width: 760px) {
  /* the two headline halves may wrap freely - keeping them on one line
     each is what pushed the page into horizontal scroll on a phone */
  .it-headline-line {
    white-space: normal;
  }

  .it-hero__mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .it-mini:nth-child(3),
  .it-mini:nth-child(4) {
    border-top: 1px solid rgba(18,40,55,.18);
  }

  .it-mini:nth-child(3) {
    border-left: 0;
  }
}

/* ---- phone --------------------------------------------------------- */
@media (max-width: 680px) {
  .it-hero {
    margin-top: 0;
    padding-top: 34px;
  }

  .it-hero::before,
  .it-hero::after {
    height: clamp(200px, 52vw, 260px);
  }

  .it-hero::before {
    background-position: 72% center;
  }

  .it-hero__content {
    padding-bottom: clamp(212px, 53vw, 276px);
  }

  .it-hero__text h1 {
    font-size: clamp(34px, 9vw, 46px);
  }

  .it-headline-line + .it-headline-line {
    margin-top: 10px;
  }

  .it-hero__text .lead {
    font-size: 16px;
  }

  .it-hero__buttons .btn {
    flex: 1 1 100%;
  }

  .it-hero__mini {
    margin-top: 26px;
  }
}

/* ===================================================================
   3. PLATFORM SHOWCASE - "Purpose-Built Platforms. Powerful Outcomes."
   One horizontal bar per platform, built from three pieces:
     .it-platform__mark   left  - solid brand field + hexagon emblem
     .it-platform__body   mid   - identity block + five feature columns
     .it-platform__cta    right - brand field + line artwork + button
   Every colour is driven by per-row custom properties so a new platform
   is one markup block plus one modifier rule.
   =================================================================== */

.it-platforms {
  padding: clamp(46px, 5vw, 74px) 5vw clamp(52px, 5.5vw, 82px);
  background: #f1ede8;
}

/* ---------- section heading ---------- */

.it-platforms__head {
  margin-bottom: clamp(26px, 2.6vw, 38px);
  text-align: center;
}

.it-platforms__eyebrow {
  margin: 0 0 14px;
  color: #1c3a49;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.it-platforms__title {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 46px);
  margin: 0;
  color: #123243;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3.2vw, 45px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.01em;
  text-align: center;
}

.it-platforms__title::before,
.it-platforms__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(18,50,67,0), rgba(18,50,67,.22));
}

.it-platforms__title::after {
  background: linear-gradient(90deg, rgba(18,50,67,.22), rgba(18,50,67,0));
}

/* Gold diamond ornament under the title. */
.it-platforms__ornament {
  display: block;
  width: 74px;
  height: 9px;
  margin: 12px auto 0;
  background:
    linear-gradient(var(--gold-light), var(--gold-light)) left center / 26px 1px no-repeat,
    linear-gradient(var(--gold-light), var(--gold-light)) right center / 26px 1px no-repeat;
  position: relative;
}

.it-platforms__ornament::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- the list of platform bars ---------- */

.it-platform-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.it-platform {
  display: grid;
  grid-template-columns: 183px minmax(0, 1fr) 320px;
  grid-template-areas: "mark body cta";
  min-height: 148px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16,40,52,.10), 0 10px 26px -20px rgba(16,40,52,.55);
}

/* ---------- left: emblem field ---------- */

.it-platform__mark {
  grid-area: mark;
  display: grid;
  place-items: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--px-mark-from), var(--px-mark-to));
}

.it-platform__mark img {
  width: clamp(84px, 7vw, 104px);
  height: auto;
}

/* ---------- middle: identity + feature rail ---------- */

.it-platform__body {
  grid-area: body;
  display: grid;
  grid-template-columns: minmax(0, 212px) minmax(0, 1fr);
  align-items: center;
  background: linear-gradient(90deg, var(--px-wash-from), var(--px-wash-to));
}

.it-platform__identity {
  padding: 18px clamp(10px, 1vw, 14px) 18px clamp(20px, 2.15vw, 30px);
}

.it-platform__name {
  margin: 0 0 8px;
  color: var(--px-name);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--px-name-size, clamp(22px, 2.07vw, 29px));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .005em;
}

.it-platform__kind {
  margin: 0 0 7px;
  color: #17272f;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}

.it-platform__note {
  margin: 0;
  max-width: 30ch;
  color: rgba(23,39,47,.76);
  font-size: 12px;
  line-height: 1.5;
}

.it-platform__features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.it-platform__features > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px 7px;
  text-align: center;
  background:
    linear-gradient(var(--px-rule), var(--px-rule)) left center / 1px 62% no-repeat;
}

.it-platform__features .ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--px-badge);
}

.it-platform__features img {
  width: 24px;
  height: 24px;
}

.it-platform__features span {
  color: #1d2a31;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.002em;
}

/* ---------- right: artwork field + call to action ---------- */

.it-platform__cta {
  grid-area: cta;
  display: flex;
  align-items: center;
  padding: 16px clamp(16px, 1.6vw, 26px);
  background:
    var(--px-art) right center / auto 100% no-repeat,
    linear-gradient(105deg, var(--px-cta-from), var(--px-cta-to));
}

.it-platform__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--px-btn-from), var(--px-btn-to));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .22s ease, background .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .22s ease;
}

.it-platform__link:hover,
.it-platform__link:focus-visible {
  transform: translateY(-1px);
  border-color: #e7eaec;
  background: linear-gradient(135deg, #f1f3f4 0%, #c8ced2 52%, #aeb6bd 100%);
  color: #071421;
  box-shadow: 0 8px 18px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.78);
}

.it-platform__link:focus-visible {
  outline: 2px solid #f1c873;
  outline-offset: 3px;
}

.it-platform__link span {
  font-size: 14px;
}

/* ===================================================================
   4. PLATFORM COLOUR SETS
   =================================================================== */

.it-platform--alexia {
  --px-mark-from: #07333b;
  --px-mark-to: #1d626a;
  --px-wash-from: #eeeae4;
  --px-wash-to: #fbfaf8;
  --px-name: #14535c;
  --px-rule: rgba(20,83,92,.20);
  --px-badge: rgba(20,83,92,.07);
  --px-cta-from: #4a7d83;
  --px-cta-to: #0c4a53;
  --px-btn-from: #1f606a;
  --px-btn-to: #123f47;
  --px-art: url("../../images/tech/platforms/art-ai-head.svg");
}

.it-platform--apim {
  --px-mark-from: #5b2c0d;
  --px-mark-to: #986032;
  --px-wash-from: #f1e8dd;
  --px-wash-to: #fdfaf6;
  --px-name: #a2601f;
  --px-rule: rgba(162,96,31,.22);
  --px-badge: rgba(162,96,31,.07);
  --px-cta-from: #9d6740;
  --px-cta-to: #7c481d;
  --px-btn-from: #8f5629;
  --px-btn-to: #6b3c15;
  --px-art: url("../../images/tech/platforms/art-api-mesh.svg");
}

.it-platform--opensource {
  --px-mark-from: #2c5c76;
  --px-mark-to: #4d7f9f;
  --px-wash-from: #ecedee;
  --px-wash-to: #fbfbfa;
  --px-name: #34688a;
  --px-name-size: clamp(18px, 1.64vw, 23px);
  --px-rule: rgba(52,104,138,.22);
  --px-badge: rgba(52,104,138,.07);
  --px-cta-from: #5d8ca6;
  --px-cta-to: #3a6b87;
  --px-btn-from: #46789b;
  --px-btn-to: #315e7d;
  --px-art: url("../../images/tech/platforms/art-globe.svg");
}

.it-platform--health {
  --px-mark-from: #bd7460;
  --px-mark-to: #d3947b;
  --px-wash-from: #f7e9e2;
  --px-wash-to: #fefcfa;
  --px-name: #bc5f43;
  --px-name-size: clamp(19px, 1.79vw, 25px);
  --px-rule: rgba(188,95,67,.24);
  --px-badge: rgba(188,95,67,.08);
  --px-cta-from: #bd6b4e;
  --px-cta-to: #9b4a30;
  --px-btn-from: #b2593e;
  --px-btn-to: #8e3e27;
  --px-art: url("../../images/tech/platforms/art-care.svg");
}

.it-platform--mobility {
  --px-mark-from: #05303a;
  --px-mark-to: #1a5b64;
  --px-wash-from: #ebeeed;
  --px-wash-to: #fbfcfb;
  --px-name: #2c5b63;
  --px-name-size: clamp(17px, 1.5vw, 21px);
  --px-rule: rgba(44,91,99,.22);
  --px-badge: rgba(44,91,99,.07);
  --px-cta-from: #4e878f;
  --px-cta-to: #0b3c43;
  --px-btn-from: #1e5f66;
  --px-btn-to: #0f464d;
  --px-art: url("../../images/tech/platforms/art-city.svg");
}

/* ===================================================================
   5. RESPONSIVE
   =================================================================== */

@media (max-width: 1240px) {
  .it-platform {
    grid-template-columns: 168px minmax(0, 1fr);
    grid-template-areas:
      "mark body"
      "cta  cta";
  }

  .it-platform__cta {
    justify-content: flex-start;
    min-height: 82px;
    background-position: right center;
  }
}

@media (max-width: 1000px) {
  .it-platform__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .it-platform__identity {
    padding-bottom: 6px;
  }

  .it-platform__note {
    max-width: 52ch;
  }

  .it-platform__features {
    padding: 0 clamp(12px, 2vw, 24px) 18px;
  }

  .it-platform__features > li {
    background: none;
    border-top: 1px solid var(--px-rule);
  }
}

@media (max-width: 760px) {
  .it-platforms__title::before,
  .it-platforms__title::after {
    display: none;
  }

  .it-platform {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "mark"
      "body"
      "cta";
  }

  .it-platform__mark {
    padding: 18px;
  }

  .it-platform__mark img {
    width: 76px;
  }

  .it-platform__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 0;
  }

  .it-platform__cta {
    justify-content: center;
    padding: 18px;
  }

  .it-platform__link {
    width: 100%;
    justify-content: center;
  }
}