/*
Qurrah Creative V21.2.2
Homepage Stacked Editorial Header Fix

Purpose:
Correct V21.2.1 three-column header placement.
Pattern:
Eyebrow -> Headline -> optional right link -> content.

Scope:
.route-home only.
No content, card grid, page order, CMS, or database changes.
*/

/* Shared variables */
.route-home{
  --v2122-heading-max:760px;
  --v2122-copy-max:690px;
}

/* =========================================================
   1. CARA KAMI BERPIKIR
   Convert V21.2.1 two-column statement back to a natural
   stacked editorial block.
   ========================================================= */
.route-home .qc-cream > .qc-container.qc-statement{
  width:min(var(--max),calc(100% - 40px));
  max-width:none;
  padding:30px 0;
  display:block;
}

.route-home .qc-statement > .qc-eyebrow{
  margin:0 0 14px;
  display:block;
  width:auto;
}

.route-home .qc-statement > h2{
  max-width:var(--v2122-heading-max);
  margin:0;
  font-size:clamp(38px,4.4vw,56px);
  line-height:1.025;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.route-home .qc-statement > p:last-child{
  max-width:var(--v2122-copy-max);
  margin:22px 0 0;
  font-size:16px;
  line-height:1.72;
}

/* =========================================================
   2–4. SELECTED WORKS / LAYANAN / INSIGHT
   Remove three-column feel.
   Eyebrow sits above headline.
   Optional "Lihat semua" stays right aligned.
   ========================================================= */
.route-home .qc-section-head{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "eyebrow eyebrow"
    "heading link";
  align-items:end;
  column-gap:30px;
  row-gap:12px;
  margin-bottom:38px;
  padding:0;
}

.route-home .qc-section-head > .qc-eyebrow{
  grid-area:eyebrow;
  margin:0;
  display:block;
  width:auto;
  align-self:auto;
}

.route-home .qc-section-head > h2{
  grid-area:heading;
  max-width:var(--v2122-heading-max);
  margin:0;
  padding:0!important;
  font-size:clamp(37px,4.2vw,54px);
  line-height:1.025;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.route-home .qc-section-head > a{
  grid-area:link;
  align-self:end;
  justify-self:end;
  margin:0 0 6px;
  padding-bottom:3px;
  white-space:nowrap;
  font-size:12px;
  line-height:1.3;
  border-bottom:1px solid currentColor;
}

/* Services has no link: headline should occupy the full content width. */
.route-home .qc-light .qc-section-head{
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "eyebrow"
    "heading";
}

.route-home .qc-light .qc-section-head > h2:last-child{
  max-width:760px;
}

/* Slightly narrower Insight heading for cleaner wrap. */
.route-home .qc-cream .qc-section-head > h2{
  max-width:690px;
}

/* Selected Works heading: keep strong but not oversized. */
.route-home .qc-dark .qc-section-head > h2{
  max-width:720px;
}

/* Keep the small labels understated. */
.route-home .qc-statement > .qc-eyebrow,
.route-home .qc-section-head > .qc-eyebrow{
  font-size:10px;
  line-height:1.4;
  letter-spacing:.18em;
  font-weight:850;
}

/* =========================================================
   Rhythm
   ========================================================= */
.route-home .qc-dark .qc-section-head{
  margin-bottom:34px;
}

.route-home .qc-light .qc-section-head{
  margin-bottom:32px;
}

.route-home .qc-cream .qc-section-head{
  margin-bottom:32px;
}

/* =========================================================
   Tablet
   ========================================================= */
@media(max-width:1000px){
  .route-home .qc-statement > h2,
  .route-home .qc-section-head > h2{
    font-size:clamp(35px,5vw,48px);
  }

  .route-home .qc-section-head{
    column-gap:22px;
  }
}

/* =========================================================
   Mobile
   ========================================================= */
@media(max-width:760px){
  .route-home .qc-cream > .qc-container.qc-statement{
    width:min(100% - 28px,var(--max));
    padding:8px 0;
  }

  .route-home .qc-statement > .qc-eyebrow,
  .route-home .qc-section-head > .qc-eyebrow{
    margin-bottom:11px;
  }

  .route-home .qc-statement > h2{
    max-width:15ch;
    font-size:34px;
    line-height:1.03;
  }

  .route-home .qc-statement > p:last-child{
    max-width:100%;
    margin-top:17px;
    font-size:15px;
    line-height:1.68;
  }

  .route-home .qc-section-head{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "eyebrow eyebrow"
      "heading link";
    gap:10px 16px;
    margin-bottom:27px;
  }

  .route-home .qc-section-head > h2{
    max-width:14ch;
    font-size:34px;
    line-height:1.03;
  }

  .route-home .qc-section-head > a{
    margin-bottom:3px;
    font-size:11px;
  }

  .route-home .qc-light .qc-section-head{
    grid-template-columns:1fr;
    grid-template-areas:
      "eyebrow"
      "heading";
  }

  .route-home .qc-light .qc-section-head > h2:last-child{
    max-width:15ch;
  }
}

/* =========================================================
   Small phones
   Link goes below heading so it never squeezes the title.
   ========================================================= */
@media(max-width:480px){
  .route-home .qc-statement > h2,
  .route-home .qc-section-head > h2{
    font-size:31px;
  }

  .route-home .qc-section-head,
  .route-home .qc-light .qc-section-head{
    grid-template-columns:1fr;
    grid-template-areas:
      "eyebrow"
      "heading"
      "link";
  }

  .route-home .qc-section-head > h2,
  .route-home .qc-light .qc-section-head > h2:last-child{
    max-width:100%;
  }

  .route-home .qc-section-head > a{
    justify-self:start;
    margin-top:2px;
  }
}