/* responsive.css (fixed) */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; width: 100%; max-width: 100%; }

img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* Headings: prevent weird vertical stacking */
h1, h2, h3 { 
  display: block;
  width: auto;
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  font-size: 1.75rem;
}

/* Simple row/grid helpers (desktop first) */
.row { display: flex; align-items: center; gap: 12px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Mobile */
@media (max-width: 768px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .wrap, .section, .content, .main, .container { padding-left: 12px !important; padding-right: 12px !important; }
  header .search, .search { width: 100% !important; }
  header .search input, .search input { width: 100% !important; }
  .row { display: block !important; }
  .card { margin-bottom: 12px; }
  nav .right, nav .left { display: block !important; }
}

@media (max-width: 480px) {
  .btn { padding: 10px 14px !important; font-size: 1rem !important; }
  .sec-title { font-size: 1.1rem !important; }
}