/* =====================================================================
   RESPONSIVE RULES — tested at 360 / 390 / 480 / 768 / 1024 / 1280 / 1440
   ===================================================================== */

@media (max-width: 1100px) {
    .emoji-grid { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    .icon-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 900px) {
    .gallery-shell { grid-template-columns: 1fr; }
    .gallery-filters { position: static; }
    .gallery-filters .filter-block { display: inline-block; margin-right: 24px; }
    .icon-grid { grid-template-columns: repeat(4, 1fr); }
    /* filters become touchable, no hover needed */
    .icon-action { opacity: 1; transform: none; position: static; margin-top: 8px; }
}

@media (max-width: 992px) {
    h2 { font-size: 30px; }
    h3 { font-size: 22px; }
    .section { padding: 66px 0; }

    .nav-list { display: none; }
    .menu-toggle { display: flex; margin-left: auto; }
    .site-nav { margin-left: 0; order: 4; flex-basis: 100%; }
    .header-inner { flex-wrap: wrap; padding-bottom: 0; }
    .header-copy { margin-left: auto; }
    .menu-open .nav-list {
        display: grid; gap: 4px; width: 100%;
        padding: 10px 0 18px;
    }
    .menu-open .nav-link { display: block; padding: 12px 14px; }

    .hero { padding: 70px 0 76px; }
    .hero-inner { grid-template-columns: 1fr; text-align: center; }
    .hero-description { margin: 0 auto; }
    .hero-actions, .hero-meta { justify-content: center; }
    .specimen { max-width: 320px; }

    .about-grid { grid-template-columns: 1fr; gap: 30px; }
    .generator-wrap { grid-template-columns: 1fr; }
    .grid-3, .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    h2 { font-size: 25px; }
    h3 { font-size: 20px; }
    .emoji-grid, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .icon-grid { grid-template-columns: repeat(3, 1fr); }
    .code-row { grid-template-columns: 1fr; gap: 8px; text-align: left; }
    .code-row .button { justify-self: start; }
    .detail-card { padding: 26px 20px; }
    .detail-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 560px) {
    .container { padding: 0 16px; }
    .section { padding: 54px 0; }
    .grid-3, .blog-grid { grid-template-columns: 1fr; }
    .hero-actions .button { width: 100%; }
    .header-copy { display: none; }
    .brand-name { font-size: 0.98rem; }
    .chat-bubble { max-width: 92%; }
    .footer-grid { grid-template-columns: 1fr; }
    .scroll-top { right: 14px; bottom: 14px; }
}

@media (max-width: 420px) {
    .emoji-grid, .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
    .icon-grid { grid-template-columns: 1fr 1fr; }
    .emoji-card { padding: 20px 10px 16px; }
    .emoji-card-actions .button { padding: 8px 12px; font-size: 0.78rem; }
    .specimen { max-width: 100%; padding: 34px 22px 24px; }
    .specimen-float { display: none; }
}


/* Hero skull cards: keep action words complete at every width */
@media (max-width: 1100px) {
    .icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .gallery-filters .filter-block { display: block; margin-right: 0; }
    .icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .icon-grid { grid-template-columns: 1fr; }
    .icon-card { min-height: 218px; }
    .icon-action .button { font-size: 0.82rem; }
    .icon-detail-actions { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .emoji-detail-dialog { padding: 22px 16px; }
    .emoji-detail-modal .detail-head { align-items: center; text-align: center; }
    .emoji-detail-modal .detail-actions .button { width: 100%; }
}