/* assets/css/homepage.css — homepage responsive layout */

/* ── BREAKING LAYOUT ── */
.hp-breaking-inner { max-width: 1280px; margin: 0 auto; }
.hp-breaking-bar { background: var(--tx); padding: .45rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.hp-breaking-hdr { padding: 2rem 2rem 0; }
.hp-breaking-grid { display: grid; grid-template-columns: 1fr 320px; }
.hp-breaking-img { display: block; overflow: hidden; max-height: 520px; }
.hp-breaking-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.hp-breaking-img:hover img { transform: scale(1.02); }
.hp-breaking-side { border-left: 1px solid var(--bd); display: flex; flex-direction: column; }
.hp-breaking-related { padding: 1.5rem; flex: 1; }
.hp-breaking-nl { padding: 1rem; background: var(--ac); }

/* ── STANDARD LAYOUT ── */
.hp-standard-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr 280px; min-height: 520px; }
.hp-standard-left { border-right: 1px solid var(--bd); padding: 1.5rem; display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.hp-standard-center { display: flex; flex-direction: column; border-right: 1px solid var(--bd); }
.hp-standard-right { display: flex; flex-direction: column; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  /* Breaking layout */
  .hp-breaking-grid { grid-template-columns: 1fr; }
  .hp-breaking-side { border-left: none; border-top: 1px solid var(--bd); flex-direction: row; }
  .hp-breaking-related { flex: 1; }
  .hp-breaking-nl { min-width: 240px; max-width: 300px; }
  .hp-breaking-hdr { padding: 1.25rem 1.25rem 0; }

  /* Standard layout */
  .hp-standard-inner { grid-template-columns: 1fr; min-height: unset; }
  .hp-standard-left { border-right: none; border-bottom: 1px solid var(--bd); flex-direction: row; flex-wrap: wrap; gap: .5rem; padding: 1rem; overflow: visible; }
  .hp-standard-left a { flex: 1 1 45%; min-width: 0; }
  .hp-standard-center { border-right: none; border-bottom: 1px solid var(--bd); }
  .hp-standard-right { flex-direction: row; }
  .hp-standard-right > div:first-child { flex: 1; }
  .hp-standard-right > div:last-child { min-width: 220px; max-width: 260px; }
}

@media (max-width: 640px) {
  .hp-breaking-side { flex-direction: column; }
  .hp-breaking-nl { max-width: 100%; }
  .hp-breaking-hdr h1 { font-size: 1.65rem !important; }
  .hp-standard-left { display: none; }
  .hp-standard-right { flex-direction: column; }
  .hp-standard-right > div:last-child { max-width: 100%; }
}