/* ---- Layout ---- */
.iq-gallery-wrap, .iq-single-wrap, .iq-archive-wrap { max-width: 1100px; margin: 0 auto; padding: 20px; }
.iq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; }

/* ---- Filters ---- */
.iq-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.iq-filters input, .iq-filters select { padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; }
.iq-filters button { padding: 8px 16px; border: none; border-radius: 6px; background: #222; color: #fff; cursor: pointer; }

/* ---- Card ---- */
.iq-card { background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.iq-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.iq-card-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.iq-card-title { font-size: 16px; margin: 10px 12px 4px; }
.iq-card-title a { color: inherit; text-decoration: none; }
.iq-card-tags { margin: 0 12px 8px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- Pills ---- */
.iq-pill { font-size: 12px; padding: 3px 9px; border-radius: 999px; text-decoration: none; }
.iq-pill.iq-cat { background: #eef2ff; color: #3949ab; }
.iq-pill.iq-tag { background: #f4f4f4; color: #555; }

/* ---- Votes ---- */
.iq-votes { display: flex; gap: 10px; margin: 4px 12px; }
.iq-vote-btn { border: 1px solid #ddd; background: #fafafa; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 14px; }
.iq-vote-btn.iq-voted { border-color: #222; background: #222; color: #fff; }
.iq-vote-btn:disabled { cursor: default; opacity: .85; }

/* ---- Comment count ---- */
.iq-comment-count { display: block; margin: 6px 12px 14px; font-size: 13px; color: #666; text-decoration: none; }

/* ---- Load more ---- */
.iq-load-more-wrap { text-align: center; margin-top: 24px; }
.iq-load-more { padding: 10px 22px; border: 1px solid #222; background: #fff; border-radius: 999px; cursor: pointer; }
.iq-load-more[hidden] { display: none; }

/* ---- Home teaser ---- */
.iq-home-header { display: flex; justify-content: space-between; align-items: center; }
.iq-view-all { text-decoration: none; font-weight: 600; }
.iq-home-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }

/* ---- Single page ---- */
.iq-single-card { max-width: 700px; margin: 0 auto; }
.iq-back-link { display: inline-block; margin-bottom: 14px; text-decoration: none; }
.iq-single-image img { width: 100%; border-radius: 10px; }
.iq-single-title { margin: 16px 0 8px; }
.iq-single-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.iq-comments-section { max-width: 700px; margin: 30px auto 0; }

/* ---- Submit form ---- */
.iq-submit-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.iq-submit-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.iq-submit-form button { padding: 10px; border: none; border-radius: 6px; background: #222; color: #fff; cursor: pointer; }
.iq-submit-msg { padding: 10px; background: #eef7ee; border-radius: 6px; }