/* GARO Website 2026 Update Pack */
.garo-website-2026-patch .garo-project-card__media {
  aspect-ratio: 16 / 9;
  background: #e8edf3;
}
.garo-website-2026-patch .garo-project-card__media .garo-2026-project-cover,
.garo-website-2026-patch .garo-project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.garo-website-2026-patch .garo-project-card__status {
  text-transform: uppercase;
  letter-spacing: .035em;
}
.garo-website-2026-patch .garo-project-card__body {
  padding: 18px;
}
.garo-website-2026-patch .garo-project-card h3 {
  margin: 7px 0 5px;
}
.garo-website-2026-patch .garo-project-card h3 a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.garo-website-2026-patch .garo-project-card__body > p:not(.garo-project-card__location) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.garo-website-2026-patch .garo-project-card__location {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.garo-website-2026-patch .garo-hero__visual {
  position: relative;
}
.garo-website-2026-patch .garo-2026-concept-label {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(7, 27, 61, .86);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

@media (max-width: 620px) {
  .garo-website-2026-patch .garo-header__brand img,
  .garo-website-2026-patch .garo-header__brand .custom-logo {
    max-width: 198px !important;
    max-height: 44px !important;
  }
  .garo-website-2026-patch .garo-project-card__media {
    aspect-ratio: auto;
    height: 220px;
  }
  .garo-website-2026-patch .garo-project-card__body {
    padding: 18px 18px 20px;
  }
  .garo-website-2026-patch .garo-project-card h3 {
    font-size: clamp(24px, 7.3vw, 30px);
    line-height: 1.16;
  }
  .garo-website-2026-patch .garo-project-card p {
    font-size: 15px;
    line-height: 1.55;
  }
}

/* v1.3 case-study gallery */
.garo-2026-case-gallery {
  margin-top: clamp(38px, 6vw, 72px);
  padding-top: clamp(28px, 4vw, 46px);
  border-top: 1px solid #dfe4ea;
}
.garo-2026-case-gallery__head {
  max-width: 720px;
  margin-bottom: 22px;
}
.garo-2026-case-gallery__head > span {
  display: block;
  margin-bottom: 7px;
  color: #ed1c24;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.garo-2026-case-gallery__head h2 {
  margin: 0 0 8px;
  color: #071b3d;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.12;
}
.garo-2026-case-gallery__head p,
.garo-2026-cover-note {
  color: #5e6978;
  line-height: 1.65;
}
.garo-2026-case-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.garo-2026-case-gallery__grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #e8edf3;
  aspect-ratio: 4 / 3;
}
.garo-2026-case-gallery__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.garo-2026-cover-note {
  margin: 14px 0 0;
  font-size: 12px;
}
@media (max-width: 760px) {
  .garo-2026-case-gallery__grid {
    grid-template-columns: 1fr;
  }
  .garo-2026-case-gallery__grid figure {
    aspect-ratio: 16 / 10;
  }
}

/* v1.4 single project detail cover fix */
.garo-website-2026-patch.single-garo_project .garo-2026-single-project-cover {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}
@media (max-width: 760px) {
  .garo-website-2026-patch.single-garo_project .garo-2026-single-project-cover {
    min-height: 220px;
  }
}

/* v1.5 image reset — project photos only, no legacy base64/card backgrounds. */
.garo-website-2026-patch .garo-project-card__media {
  background-image: none !important;
}
.garo-website-2026-patch .garo-project-card__media img.garo-2026-project-cover,
.garo-website-2026-patch .garo-project-card__media img {
  opacity: 1 !important;
  visibility: visible !important;
}
.garo-website-2026-patch.single-garo_project .garo-2026-single-project-cover {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block !important;
  opacity: 1 !important;
  border-radius: inherit;
}

/* v1.8 project-profile gallery: keep the full Bukit Besi record without loading everything above the fold. */
.garo-2026-case-gallery--profile .garo-2026-case-gallery__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.garo-2026-case-gallery--profile .garo-2026-case-gallery__grid figure {
  content-visibility: auto;
  contain-intrinsic-size: 320px 240px;
}
@media (max-width: 980px) {
  .garo-2026-case-gallery--profile .garo-2026-case-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .garo-2026-case-gallery--profile .garo-2026-case-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garo-2026-case-gallery--profile .garo-2026-case-gallery__grid figure { aspect-ratio: 4 / 3; }
}

/* ============================================================
   v1.9 — Stable project detail template repair
   Prevents legacy placeholder/hero heuristics from swallowing the page.
   ============================================================ */
.garo-2026-detail { background:#fff; color:#071b3d; }
.garo-2026-detail * { box-sizing:border-box; }
.garo-2026-detail__container { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.garo-2026-detail__eyebrow { display:block; margin-bottom:10px; color:#ef2b33; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.garo-2026-detail-hero { background:#0d2d61; color:#fff; padding:64px 0; }
.garo-2026-detail-hero__grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); align-items:center; gap:56px; }
.garo-2026-detail-hero__copy h1 { margin:0; max-width:650px; color:#fff; font-size:clamp(38px,5vw,68px); line-height:.98; letter-spacing:-.045em; }
.garo-2026-detail-hero__location { margin:14px 0 0; color:#dce7f8; font-size:16px; }
.garo-2026-detail-hero__meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.garo-2026-detail-hero__meta > span { border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:8px 12px; color:#fff; font-size:12px; font-weight:700; }
.garo-2026-detail-status { background:#fff; color:#0d2d61 !important; border-color:#fff !important; }
.garo-2026-detail-status--sedang-berjalan { background:#ef2b33; color:#fff !important; border-color:#ef2b33 !important; }
.garo-2026-detail-hero__media { margin:0; overflow:hidden; border-radius:20px; background:#dfe7f1; aspect-ratio:16/9; box-shadow:0 18px 40px rgba(0,0,0,.16); }
.garo-2026-detail-hero__media img { width:100%; height:100%; object-fit:cover; display:block; }
.garo-2026-detail-summary { padding:64px 0 54px; }
.garo-2026-detail-summary__grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr); gap:64px; align-items:start; }
.garo-2026-detail-summary__copy h2 { margin:0 0 16px; font-size:clamp(28px,3vw,42px); line-height:1.08; letter-spacing:-.03em; }
.garo-2026-detail-summary__copy p { margin:0; color:#4f5d70; font-size:17px; line-height:1.75; max-width:780px; }
.garo-2026-detail-facts { display:grid; gap:10px; }
.garo-2026-detail-facts > div { padding:18px 20px; border:1px solid #dce5ef; border-radius:14px; background:#f7f9fc; }
.garo-2026-detail-facts small { display:block; margin-bottom:5px; color:#ef2b33; font-size:11px; font-weight:800; letter-spacing:.05em; }
.garo-2026-detail-facts strong { display:block; color:#071b3d; font-size:14px; line-height:1.45; }
.garo-2026-detail-gallery { padding:58px 0 76px; border-top:1px solid #e4e9f0; background:#f8fafc; }
.garo-2026-detail-gallery__head { margin-bottom:28px; max-width:780px; }
.garo-2026-detail-gallery__head h2 { margin:0 0 8px; color:#071b3d; font-size:clamp(30px,3.5vw,46px); line-height:1.06; letter-spacing:-.035em; }
.garo-2026-detail-gallery__head p { margin:0; color:#617086; line-height:1.6; }
.garo-2026-detail-gallery__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.garo-2026-detail-gallery__item { position:relative; display:block; overflow:hidden; border-radius:14px; background:#dfe7ef; aspect-ratio:4/3; box-shadow:0 1px 0 rgba(7,27,61,.05); }
.garo-2026-detail-gallery__item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.garo-2026-detail-gallery__item:hover img { transform:scale(1.025); }
.garo-2026-detail-gallery__item span { position:absolute; right:9px; bottom:9px; min-width:30px; padding:6px 8px; border-radius:999px; background:rgba(7,27,61,.82); color:#fff; font-size:11px; font-weight:800; text-align:center; backdrop-filter:blur(6px); }
.garo-2026-detail-gallery__note { margin:18px 0 0; color:#778396; font-size:12px; line-height:1.55; }
.garo-2026-detail-cta { padding:58px 0; background:#0d2d61; color:#fff; }
.garo-2026-detail-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.garo-2026-detail-cta h2 { margin:0; color:#fff; font-size:clamp(28px,3.3vw,46px); letter-spacing:-.035em; }
.garo-2026-detail-cta a { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:12px; background:#ef2b33; color:#fff; text-decoration:none; font-weight:800; }
@media (max-width:980px) {
  .garo-2026-detail-hero__grid { grid-template-columns:1fr; gap:30px; }
  .garo-2026-detail-hero__media { max-width:760px; width:100%; }
  .garo-2026-detail-summary__grid { grid-template-columns:1fr; gap:30px; }
  .garo-2026-detail-gallery__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:680px) {
  .garo-2026-detail__container { width:min(100% - 28px,1180px); }
  .garo-2026-detail-hero { padding:38px 0; }
  .garo-2026-detail-hero__copy h1 { font-size:clamp(34px,11vw,48px); }
  .garo-2026-detail-hero__media { border-radius:14px; }
  .garo-2026-detail-summary { padding:42px 0 38px; }
  .garo-2026-detail-gallery { padding:42px 0 54px; }
  .garo-2026-detail-gallery__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .garo-2026-detail-gallery__item { border-radius:10px; }
  .garo-2026-detail-cta__inner { align-items:flex-start; flex-direction:column; }
}