/* === House Details Top === */
.hd{ background:#F6F8FB; }
.hd-top{ padding: 120px 0 48px; }
.hd-top .container{ max-width:1444px; padding-inline:24px; margin-inline:auto; }

.hd-title{ margin:0 0 50px; font-family:'Syne',sans-serif; font-weight:600; font-size:72px; line-height:64px; color:#01172C; position:relative; }

.hd-grid{ display:grid; grid-template-columns: 591px 1fr; gap:140px; align-items:start; margin-bottom:80px; }
.hd-map{ position:relative; width:591px; height:400px; background:#E9EDF2; overflow:hidden; }
.hd-map img{ display:block; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }

/* Image loading skeleton */
.hd-map .image-container{ 
  position:relative; width:100%; height:100%; overflow:hidden; 
}
.hd-map .image-skeleton{ 
  position:absolute; inset:0; background:#E5E7EB;
  background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  z-index:1;
}
.hd-map .image-container img{ 
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply;
  opacity:0; transition: opacity 0.3s ease;
  z-index:2;
}
.hd-map .image-container.loaded img{ opacity:1; }
.hd-map .image-container.loaded .image-skeleton{ opacity:0; transition: opacity 0.3s ease; }

@keyframes shimmer{
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.hd-right{ display:block; }
.hd-specs{ display:block; margin-top:12px; }
.hd-specs .spec-row{ display:grid; grid-template-columns: 320px 1fr; gap:0px; padding: 22px 0; border-bottom:1px solid #01172C; font-family:'Syne'; font-size:18px; line-height:22px; color:#01172C; }
.hd-specs .spec-row span:first-child{ font-weight:700; }

/* Photo + Details Grid */
.hd-grid2{ display:grid; grid-template-columns: 591px 1fr; gap:140px; align-items:start; margin-bottom:80px; }
.hd-photo{ position:relative; width:591px; height:744px; background:#000; overflow:hidden; }
.hd-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.hd-photo::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.1); pointer-events:none; }

/* Image loading skeleton for photo */
.hd-photo .image-container{ 
  position:relative; width:100%; height:100%; overflow:hidden; 
}
.hd-photo .image-skeleton{ 
  position:absolute; inset:0; background:#E5E7EB;
  background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  z-index:1;
}
.hd-photo .image-container img{ 
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 0.3s ease;
  z-index:2;
}
.hd-photo .image-container.loaded img{ opacity:1; }
.hd-photo .image-container.loaded .image-skeleton{ opacity:0; transition: opacity 0.3s ease; }

/* Detail Rows: Label on left, text on right */
.hd-content{ display:flex; flex-direction:column; gap:80px; }
.hd-detail-row{ display:grid; grid-template-columns: 46px 1fr; gap:272px; align-items:start; }
.hd-detail-label{ margin:0; font-family:'Syne'; font-weight:700; font-size:18px; line-height:22px; color:#01172C; }
.hd-detail-text{ margin:0; max-width:348px; font-family:'Syne'; font-weight:400; font-size:20px; line-height:30px; color:#01172C; }

/* Price Section (inside hd-content, after Pertvaros) */
.hd-price-section{ display:flex; flex-direction:column; gap:20px;margin-top: 20px }
.hd-price-section .hd-detail-label{ font-family:'Syne'; font-weight:700; font-size:32px; line-height:40px; color:#01172C; white-space:nowrap; }
.hd-price-value{ margin:0; font-family:'Syne'; font-weight:700; font-size:32px; line-height:38px; color:#01172C; max-width:348px; }
.hd-price-note{font-family:'Syne'; font-weight:700; font-size:18px; line-height:28px; color:#01172C; max-width:300px; }

.hd-actions{ display:flex; align-items:center; gap:190px; }
.hd-tech{ display:inline-flex; align-items:center; gap:10px; font-family:'Syne'; font-weight:600; font-size:18px; line-height:22px; color:#01172C; text-decoration:none; position:relative; }
.hd-tech::after{ content:""; position:absolute; left:31px; bottom:-6px; width:192px; height:2px; background:#01172C; }
.hd-pdf-icon{ width:21px; height:24px; display:block; }

@media (max-width:1300px){
  .hd-grid{ gap:80px; }
  .hd-grid2{ gap:80px; }
  .hd-detail-row{ gap:120px; }
  .hd-actions{ gap:120px; }
  .hd-price-section .hd-detail-label{ white-space:normal; }
  .hd-tech::after {content:""; position:absolute; left:0px; bottom:-6px; width:192px; height:2px; background:none;}
}

@media (max-width:1140px){
  .hd-grid{ grid-template-columns: minmax(300px, 591px) 1fr; gap:60px; }
  .hd-grid2{ grid-template-columns: minmax(300px, 591px) 1fr; gap:60px; }
  .hd-map{ width:100%; max-width:591px; }
  .hd-photo{ width:100%; max-width:591px; }
  .hd-detail-row{ gap:80px; }
  .hd-actions{ gap:80px; }
}

@media (max-width:1100px){
  /* Žemėlapis turi būti sklandžiai responsyvus */
  .hd-map{ width:100%; height:400px; }
  /* .hd-map img{ height:auto; } */
}

@media (max-width:768px){
  .hd-top{ padding:72px 0 48px; }
  .hd-grid, .hd-grid2{ grid-template-columns: 1fr; gap:48px; }
  .hd-title{ font-size:48px; line-height:56px; }
  .hd-detail-row{ grid-template-columns: 1fr; gap:12px; }
  .hd-bottom-row{ grid-template-columns: 1fr; gap:24px; }
  .hd-price-value, .hd-actions{ justify-self:start; }
  /* Paslėpti fasado nuotrauką mobiliajame */
  .hd-photo{ display:none; }
  /* Sumažinti tarpus ir tipografiją */
  .hd-title{ font-size:40px; line-height:48px; }
  .hd-specs .spec-row{ grid-template-columns: 1fr; font-size:16px; line-height:20px; }
  /* Vienodas eilučių atitraukimas iš dešinės ir kairės */
  .hd-specs .spec-row{ padding-inline:24px; }
  .hd-detail-text{ max-width:100%; font-size:18px; line-height:28px; }
  .hd-actions{ gap:24px; }
  .hd-tech::after{ display:none; }
  .hd-map{ width:100%; height:270px; }
}