/**
 * Terms Directory Component
 * Grid layout for term cards with icons, statistics, and pagination
 */

.gpcc-skin .gpcc-terms {
    margin: calc(var(--gap) * 2) 0;
}

/* Header */
.gpcc-skin .gpcc-terms__head {
    text-align: center;
    margin-bottom: calc(var(--gap) * 2);
}

.gpcc-skin .gpcc-terms__head h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--heading);
    margin-bottom: var(--gap);
}

.gpcc-skin .gpcc-terms__description {
    font-size: 1.125rem;
    color: var(--text_muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grid Layout */
.gpcc-skin .gpcc-terms__grid {
    display: grid;
    gap: calc(var(--gap) * 1.5);
    margin-bottom: calc(var(--gap) * 2);
}

/* Responsive Grid Columns */
/* 4 columns on large desktop */
@media (min-width: 1280px) {
    .gpcc-skin .gpcc-terms__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 3 columns on desktop */
@media (min-width: 1024px) and (max-width: 1279px) {
    .gpcc-skin .gpcc-terms__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2 columns on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .gpcc-skin .gpcc-terms__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 2 columns on large mobile */
@media (min-width: 480px) and (max-width: 767px) {
    .gpcc-skin .gpcc-terms__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap);
    }
}

/* 1 column on small mobile */
@media (max-width: 479px) {
    .gpcc-skin .gpcc-terms__grid {
        grid-template-columns: 1fr;
        gap: var(--gap);
    }
}

/* Term Card */
.gpcc-skin .gpcc-termcard {
    display: block;
    background: var(--card_bg);
    border: 1px solid var(--border);
    border-radius: 0; /* No border radius per policy */
    padding: 1.5rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.gpcc-skin .gpcc-termcard:hover {
    background: var(--card_hover_bg);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gpcc-skin .gpcc-termcard:focus-visible {
    outline: 2px solid var(--focus_ring);
    outline-offset: 2px;
}

/* Card Layout */
.gpcc-skin .gpcc-termcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    min-height: 140px;
}

/* Icon */
.gpcc-skin .gpcc-termcard .gpcc-icon {
    width: 2rem;
    height: 2rem;
    background: currentColor;
    color: var(--primary);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    flex-shrink: 0;
}

/* Icon hover effect */
.gpcc-skin .gpcc-termcard:hover .gpcc-icon {
    color: var(--primary_hover);
    transform: scale(1.1);
}

/* Term Name */
.gpcc-skin .gpcc-termcard__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.3;
    word-break: break-word;
}

.gpcc-skin .gpcc-termcard:hover .gpcc-termcard__name {
    color: var(--primary);
}

/* Meta Information */
.gpcc-skin .gpcc-termcard__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}

.gpcc-skin .gpcc-chip {
    display: inline-block;
    background: var(--surface_1);
    color: var(--text_muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius_md);
    white-space: nowrap;
}

/* Empty State */
.gpcc-skin .gpcc-terms__empty {
    text-align: center;
    padding: calc(var(--gap) * 3) var(--gap);
}

.gpcc-skin .gpcc-terms__empty p {
    font-size: 1.125rem;
    color: var(--text_muted);
}

/* Pagination */
.gpcc-skin .gpcc-terms__pagination {
    margin-top: calc(var(--gap) * 2);
}

.gpcc-skin .gpcc-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.gpcc-skin .gpcc-pagination__item {
    margin: 0;
}

.gpcc-skin .gpcc-pagination__item a,
.gpcc-skin .gpcc-pagination__item span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    background: var(--card_bg);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    transition: all 0.2s ease;
}

.gpcc-skin .gpcc-pagination__item a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.gpcc-skin .gpcc-pagination__item--current span {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.gpcc-skin .gpcc-pagination__item a:focus-visible {
    outline: 2px solid var(--focus_ring);
    outline-offset: 2px;
}

/* Icon Definitions - CSS Mask Images */
/* Genre Icons */
.gpcc-skin .gpcc-icon--sword { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.92 5L8 6.07l2.89-2.89c.78-.78 2.05-.78 2.83 0s.78 2.05 0 2.83L10.83 9L20 18.17c.39.39.39 1.02 0 1.41s-1.02.39-1.41 0L9.42 10.42 6.34 13.5c-.78.78-2.05.78-2.83 0s-.78-2.05 0-2.83L6.6 7.58 3.76 4.74c-.78-.78-.78-2.05 0-2.83s2.05-.78 2.83 0L6.92 5z"/></svg>'); }
.gpcc-skin .gpcc-icon--compass { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l1.5-7.5L19 8l-7.5 1.5L10 17z"/></svg>'); }
.gpcc-skin .gpcc-icon--joystick { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C8.69 2 6 4.69 6 8c0 2.22 1.21 4.15 3 5.19V22h6v-8.81c1.79-1.04 3-2.97 3-5.19 0-3.31-2.69-6-6-6zm0 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>'); }
.gpcc-skin .gpcc-icon--flag { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/></svg>'); }
.gpcc-skin .gpcc-icon--hat-wizard { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l1.09 3.26L16 6.18l-3.09.91L12 10.36 10.91 7.09 8 6.18l2.91-.92L12 2zm4 8l.5 1.5L18 12l-1.5.5L16 14l-.5-1.5L14 12l1.5-.5L16 10zM3 20h18v2H3v-2z"/></svg>'); }
.gpcc-skin .gpcc-icon--chess { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 22H5v-2h14v2zm-8-8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zm6-9.5h-2v2c0 .55-.45 1-1 1s-1-.45-1-1V4h-2v2c0 .55-.45 1-1 1s-1-.45-1-1V4H7c-1.1 0-2 .9-2 2v12h14V6c0-1.1-.9-2-2-2z"/></svg>'); }
.gpcc-skin .gpcc-icon--trophy { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 4V2c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2v2h4v14c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h6zm2-2v2h6V2H9zm4 14c2.76 0 5-2.24 5-5V6H6v5c0 2.76 2.24 5 5 5z"/></svg>'); }
.gpcc-skin .gpcc-icon--gauge { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 6.5C15.5 5.67 14.83 5 14 5s-1.5.67-1.5 1.5S13.17 8 14 8s1.5-.67 1.5-1.5zM9.5 8C10.33 8 11 7.33 11 6.5S10.33 5 9.5 5 8 5.67 8 6.5 8.67 8 9.5 8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'); }
.gpcc-skin .gpcc-icon--puzzle { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 8c0-.55-.45-1-1-1s-1 .45-1 1 .45 1 1 1 1-.45 1-1zm6.5-1c-.83 0-1.5-.67-1.5-1.5 0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5c0 .83-.67 1.5-1.5 1.5zm-8 6c.83 0 1.5.67 1.5 1.5 0 .83-.67 1.5-1.5 1.5S8 15.33 8 14.5c0-.83.67-1.5 1.5-1.5zM22 22H2v-2h20v2z"/></svg>'); }
.gpcc-skin .gpcc-icon--target { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-6c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/></svg>'); }

/* Feature Icons */
.gpcc-skin .gpcc-icon--wifi-off { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49L23.64 7l-6.6 8.22z"/></svg>'); }
.gpcc-skin .gpcc-icon--users { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A3.002 3.002 0 0 0 17.5 7c-.93 0-1.74.52-2.14 1.28L13 14v6h3v-6h2v6h2zM12.5 11.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5S11 9.17 11 10s.67 1.5 1.5 1.5zM5.5 6c1.11 0 2-.89 2-2s-.89-2-2-2-2 .89-2 2 .89 2 2 2zm2.5 16v-7H6v-2.5c0-1.1.9-2 2-2h3c1.1 0 2 .9 2 2V15h-2v7H8z"/></svg>'); }
.gpcc-skin .gpcc-icon--sparkles { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L9 9l-8 3 8 3 3 8 3-8 8-3-8-3-3-8z"/></svg>'); }
.gpcc-skin .gpcc-icon--ban { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>'); }
.gpcc-skin .gpcc-icon--crown { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 6L9.5 9 7 6 4.5 9 2 6l2 12h16l2-12-2.5 3L17 6l-2.5 3L12 6z"/></svg>'); }
.gpcc-skin .gpcc-icon--unlock { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z"/></svg>'); }
.gpcc-skin .gpcc-icon--coin { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15v-2h4v2H10zm2-4c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>'); }

/* Developer Icon */
.gpcc-skin .gpcc-icon--building { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/></svg>'); }

/* Default/Fallback Icon */
.gpcc-skin .gpcc-icon--default { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'); }

/* Mobile Optimizations */
@media (max-width: 767px) {
    .gpcc-skin .gpcc-terms__head h1 {
        font-size: 2rem;
    }
    
    .gpcc-skin .gpcc-terms__description {
        font-size: 1rem;
    }
    
    .gpcc-skin .gpcc-termcard {
        padding: 1.25rem 1rem;
        min-height: 120px;
    }
    
    .gpcc-skin .gpcc-termcard .gpcc-icon {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .gpcc-skin .gpcc-termcard__name {
        font-size: 1rem;
    }
    
    .gpcc-skin .gpcc-chip {
        font-size: 0.8rem;
        padding: 0.2rem 0.6rem;
    }
}

/* Directory Pages - Ensure Full Width Layout */
.gpcc-directory-page.no-sidebar #primary,
.gpcc-directory-page #primary {
    width: 100%;
    max-width: none;
    float: none;
}

.gpcc-directory-page #secondary {
    display: none;
}

.gpcc-directory-page .site-content {
    display: block;
}

.gpcc-directory-page .inside-article {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gpcc-spacing-md);
}