/* ==========================================================================
   NAGA Concept — home.css (trang chủ)
   Chỉ chứa phần riêng của trang chủ; header/footer/nút/modal nằm ở base.css.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.hero{
  grid-template-columns:56% 44%;
  min-height:680px;
  border-bottom:1px solid var(--line);
}
.hero-left{
  padding:58px 34px 34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--line);
}
/* Nhãn hero của trang chủ là dải hai đầu, không phải nhãn nhỏ như các trang khác */
.hero .eyebrow,
.modal .eyebrow{
  display:flex;
  justify-content:space-between;
  gap:20px;
  letter-spacing:.16em;
  font-size:11px;
  font-weight:700;
  color:#333;
  border-bottom:1px solid var(--line);
  padding-bottom:18px;
}
.modal .eyebrow{border-bottom:0;padding-bottom:0}
.hero h1{
  font-size:96px;
  line-height:.9;
  font-weight:700;
  letter-spacing:-.07em;
  margin:50px 0 38px;
  max-width:900px;
}
/* Phải là `.hero .hero-lede` chứ không phải `.hero-lede`: base.css đặt
   `.hero p{max-width:760px}` — có kèm tên thẻ nên đặc hiệu hơn một class trần và
   sẽ thắng bất kể thứ tự nạp file. */
.hero .hero-lede{
  margin:0;
  max-width:520px;
  font-size:17px;
  line-height:1.65;
  color:#333;
}
.hero-actions{
  margin-top:36px;
  gap:14px;
}
button,.button{padding:14px 20px}

.hero-right{
  display:grid;
  grid-template-rows:1fr 190px;
}
.image-box{
  position:relative;
  min-height:480px;
  background:
    linear-gradient(26deg, transparent 49.8%, rgba(0,0,0,.24) 50%, transparent 50.2%),
    linear-gradient(-26deg, transparent 49.8%, rgba(0,0,0,.18) 50%, transparent 50.2%),
    #e9e5dc;
  overflow:hidden;
}
.image-box::before{
  content:"";
  position:absolute;
  left:14%;
  right:8%;
  top:20%;
  height:42%;
  border:1px solid var(--line);
  background:
    linear-gradient(90deg, transparent 24%, rgba(0,0,0,.2) 25%, transparent 25.4%, transparent 49%, rgba(0,0,0,.2) 50%, transparent 50.4%, transparent 74%, rgba(0,0,0,.2) 75%, transparent 75.4%);
}
.image-box::after{
  content:"";
  position:absolute;
  left:22%;
  right:12%;
  bottom:20%;
  height:16%;
  border:1px solid var(--line);
  transform:skewX(-16deg);
  background:rgba(255,255,255,.22);
}
/* Có ảnh thật thì ảnh phủ kín, che luôn hình vẽ CSS bên dưới. Không xoá các
   rule ::before/::after — chúng vẫn là bản dự phòng khi khách gỡ ảnh ra. */
.image-box.has-image::before,
.image-box.has-image::after{display:none}
.image-box img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.quote-box{
  border-top:1px solid var(--line);
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.quote-box p{
  font-size:24px;
  line-height:1.15;
  margin:0;
  letter-spacing:-.04em;
}
.quote-box span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#555;
  font-weight:700;
}

/* --- Tiêu đề section ---------------------------------------------------- */
.section-title{
  display:block;
  border-bottom:1px solid var(--line);
}
.section-title h2{
  padding:30px 34px;
  margin:0;
  width:100%;
  font-size:42px;
  line-height:1;
  font-weight:400;
  letter-spacing:-.04em;
}

/* --- Dự án nổi bật ------------------------------------------------------ */
.highlight-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.highlight{
  min-height:320px;
  border-right:1px solid var(--line);
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  transition:.18s;
  background:var(--paper);
}
.highlight:last-child{border-right:0}
.highlight:hover{
  background:#111;
  color:var(--paper);
}
.highlight:hover .project-note{color:#d8d0c4}
.project-index{font-size:40px}
.project-title{
  font-size:30px;
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:16px;
}
.project-note{
  color:#444;
  font-size:13px;
  line-height:1.55;
  max-width:240px;
}
.project-type{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:700;
}

/* --- Dịch vụ & phí thiết kế (tab) --------------------------------------- */
.service-wrap{padding:32px 28px 34px}
.service-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:24px;
}
.tabs{
  display:grid;
  gap:10px;
  align-content:start;
}
.panel{
  border:1px solid var(--line);
  padding:28px;
  min-height:280px;
  background:rgba(255,255,255,.14);
}
.panel-subtitle{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  font-weight:700;
  margin-bottom:12px;
  color:#555;
}
.panel h3{
  font-size:38px;
  font-weight:700;
  letter-spacing:-.04em;
  margin:0 0 10px;
}
.panel > p{
  max-width:760px;
  line-height:1.65;
  color:#333;
  margin:0 0 16px;
}
.panel-note{
  max-width:720px;
  line-height:1.6;
  color:#333;
  margin:0 0 22px;
  font-size:13px;
}
.scope-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:12px 0 18px;
}
.scope-meta div{
  border:1px solid var(--line);
  padding:12px 14px;
  font-size:12px;
  line-height:1.45;
}
.scope-meta strong{
  display:block;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:10px;
  margin-bottom:6px;
}
.scope-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  margin:4px 0 12px;
}
.scope-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin:14px 0 22px;
}
.scope-card{
  border:1px solid var(--line);
  padding:16px;
  background:rgba(255,255,255,.12);
  min-height:125px;
}
.scope-card h4{
  margin:0 0 10px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
}
.scope-card p{
  margin:0;
  color:#333;
  line-height:1.55;
  font-size:13px;
}

/* --- Hồ sơ năng lực + liên hệ ------------------------------------------ */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:430px;
}
.split > div{
  padding:42px 34px;
  border-right:1px solid var(--line);
}
.split > div:last-child{border-right:0}
.split h3{
  font-size:46px;
  line-height:1;
  font-weight:400;
  letter-spacing:-.05em;
  margin:0 0 26px;
}
.split p{
  max-width:520px;
  color:#333;
  line-height:1.65;
}
.profile-card{
  margin-top:26px;
  width:280px;
  /* Ô này rộng cố định 280px, trong khi cột chứa nó chỉ còn 277px ở màn hình
     360px (345 trừ padding 2×34) — thiếu 3px là đủ làm cả trang trượt ngang. */
  max-width:100%;
  height:160px;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eee8dc;
  box-shadow:12px 12px 0 rgba(0,0,0,.12);
  text-align:center;
}
.split form{
  display:grid;
  gap:12px;
  max-width:520px;
}
.split textarea{height:100px}

/* --- Modal dự án -------------------------------------------------------- */
/* Trang chủ KHÔNG còn modal riêng — nó dùng chung template-parts/project/modal.php
   với trang Dự án, style nằm ở project-modal.css. Các rule .modal-box/.modal-visual
   cũ đã gỡ: chúng thêm padding 34px vào modal dùng chung và làm gallery thụt vào. */

/* --- Responsive --------------------------------------------------------- */
@media(max-width:900px){
  /* minmax(0,1fr) chứ không phải 1fr: `1fr` mặc định là minmax(auto,1fr) nên cột
     không co được nhỏ hơn min-content của nó. Ở đây .profile-card rộng cứng 280px
     cộng padding 68px ép cột thành 348px trên màn hình chỉ có 345px. minmax(0,…)
     cho phép cột co lại, và max-width:100% của .profile-card mới có tác dụng. */
  .hero,.split{grid-template-columns:minmax(0,1fr)}
  .hero-left{border-right:0;border-bottom:1px solid var(--line)}
  .hero h1{font-size:58px}
  .section-title h2{font-size:34px;padding:24px 22px}
  .highlight-grid{grid-template-columns:1fr}
  .highlight{border-right:0;border-bottom:1px solid var(--line)}
  .service-layout{grid-template-columns:1fr}
  .scope-grid,.scope-meta{grid-template-columns:1fr}
  .split > div{border-right:0;border-bottom:1px solid var(--line)}
  footer{display:block;line-height:2}
}