/* Homepage layout. Shared parts (header, footer, cards, buttons) are in components.css. */

/* ------------------------------------------------------------------ Hero */
/* Text column on the left, meeting illustration bleeding to the right edge of the window.
   Columns are listed right-to-left because the document is RTL. */

.hero {
  --hero-side: max(var(--gutter), (100% - var(--content-max)) / 2);
  --hero-text: calc((100% - 2 * var(--hero-side)) * 0.4276);   /* 508px of 1188 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hero-text) var(--hero-side);
  border-bottom: var(--rule-strong);
}

.hero__media {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
}

/* Sets the minimum height from the width (742 × 363 at 1312px, capped at 420px on very wide
   screens); the column still stretches if the text beside it needs more room. */
.hero__media::before {
  content: "";
  display: block;
  padding-top: min(48.92%, 420px);
}

/* Scaled to the column width, anchored at the top so normally only the lower part of the desk
   is cropped. When the text column is taller (narrow desktops) the sides are trimmed around a
   38% focus point, which keeps all three faces inside the frame down to a 1.28 box ratio; the
   hero switches to a stacked layout before that limit. A short mask softens the left edge only. */
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--color-black) 16px);
  mask-image: linear-gradient(to right, transparent 0, var(--color-black) 16px);
}

.hero__content {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* RTL: left-aligned, as approved */
  padding-block: 24px 13px;
  text-align: left;
  container: hero-text / inline-size;
}

.hero__eyebrow {
  color: var(--color-brand);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.7;
}

.hero__title {
  align-self: stretch;
  margin-block-start: 25px;
  color: var(--color-brand);
  font-size: var(--fs-display);
  font-size: min(var(--fs-display), 7.1cqi);   /* the longer line always fits the column */
  font-weight: var(--weight-display);
  line-height: 1.34;
  text-align: center;
}

.hero__lead {
  align-self: stretch;
  margin-block-start: 12px;
  font-size: var(--fs-lead);
  font-size: clamp(14px, 3.2cqi, var(--fs-lead));
  line-height: 33px;
  text-align: left;
}

/* The approved two-line break is kept while the column is wide enough; otherwise text flows. */
.hero__lead .text-line {
  display: inline;
}

@container hero-text (min-width: 440px) {
  .hero__lead .text-line {
    display: block;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 13px;
}

.hero__actions .button--primary {
  min-width: 168px;
}

.hero__actions .button--outline {
  min-width: 177px;
}

/* Tagline shown at the top of the hero, on white space next to the illustration. */
.hero__quote {
  position: absolute;
  top: 19px;
  inset-inline-start: 6px;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 9px;
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
}

.hero__quote .icon {
  grid-row: 1 / span 2;
  width: 26px;
  height: 20px;
  margin-block-start: 1px;
  color: var(--color-brand);
}

.hero__quote .text-line {
  grid-column: 2;
}

/* Slide indicators: one real slide today (see README); decorative only, no autoplay. */
.hero__indicators {
  direction: ltr;
  display: flex;
  gap: 5px;
  margin-block-start: auto;
  padding-block-start: 32px;
  padding-inline-start: 1px;
}

.hero__indicator {
  width: 21px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-black);
  opacity: var(--muted-opacity);
}

.hero__indicator.is-active {
  background: var(--color-brand);
  opacity: 1;
}

/* -------------------------------------------------------------- Services */

.services {
  padding-block: 11px 21px;
  border-bottom: var(--rule);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  margin-block-start: 7px;
}

/* ------------------------------------------------------------- Portfolio */

.portfolio {
  padding-block: 11px 9px;
}

.portfolio__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.portfolio__head .section-heading {
  grid-column: 2;
  grid-row: 1;
}

.portfolio__all {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-block-start: 3px;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-block-start: 6px;
}

.portfolio__item {
  min-width: 0;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1180px) {
  .hero {
    --hero-text: calc((100% - 2 * var(--hero-side)) * 0.49);
  }

  .hero__title {
    margin-block-start: 16px;
  }

  .hero__indicators {
    padding-block-start: 22px;
  }

  .services__grid {
    column-gap: var(--space-4);
  }

  .service-card__text {
    line-height: 1.8;
    text-wrap: balance;
  }

  .service-card__text .text-line {
    display: inline;
  }

  .project-card__body {
    padding-inline: 8px;
  }

  .project-card__subtitle {
    font-size: 13.5px;
  }
}

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

  .hero__content {
    grid-column: 1;
    grid-row: 1;
    width: min(100% - 2 * var(--gutter), var(--content-max));
    margin-inline: auto;
    align-items: stretch;
    padding-block: 28px 24px;
    text-align: start;
  }

  .hero__title {
    margin-block-start: 14px;
    line-height: 1.35;
    text-align: start;
  }

  .hero__lead {
    margin-block-start: 14px;
    line-height: 1.95;
    text-align: start;
  }

  .hero__actions {
    margin-block-start: 20px;
  }

  .hero__quote {
    position: static;
    justify-content: start;
    margin-block-start: 24px;
  }

  .hero__indicators {
    padding-block-start: 20px;
  }

  .hero__media {
    grid-column: 1;
    grid-row: 2;
  }

  .hero__image {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 1023px) {
  .service-card__title {
    font-size: 17px;
  }

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

@media (max-width: 767px) {
  .services {
    padding-block: 24px 32px;
  }

  .services__grid {
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: var(--space-6);
  }

  .service-card__title {
    font-size: var(--fs-service-title);
  }

  .portfolio {
    padding-block: 24px 32px;
  }

  .portfolio__head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: var(--space-2);
  }

  .portfolio__head .section-heading {
    grid-column: 1;
  }

  .portfolio__all {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  .portfolio__grid {
    margin-block-start: var(--space-5);
  }
}

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

  .hero__title {
    font-size: var(--fs-display);
  }

  .hero__title .text-line {
    display: inline;
  }

  .hero__lead {
    font-size: var(--fs-lead);
  }

  .hero__actions .button {
    flex: 1 1 auto;
  }
}