/* Colors and icons come only from inc/topics.php, never taxonomy order. */
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.topic-tile, .composer-topic-option { background: var(--topic-bg); color: var(--topic-text); }
.topic-tile { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .35rem .55rem; align-content: start; padding: .85rem .7rem; border: 1px solid transparent; border-radius: var(--ft-radius-medium); text-decoration: none; min-inline-size: 0; }
.topic-tile > .ft-icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--topic-accent); }
.topic-tile strong { font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.topic-tile > span { grid-column: 1 / -1; font-size: .75rem; line-height: 1.5; }
.topic-tile:hover { color: var(--topic-text); border-color: var(--topic-accent); box-shadow: var(--ft-shadow-card); }
.topic-tile:focus-visible, .topic-chip:focus-visible { outline: 2px solid var(--topic-accent); outline-offset: 3px; }
.question-topic { display: inline-flex; align-items: center; gap: .3rem; max-inline-size: 100%; background: var(--topic-bg); color: var(--topic-text); vertical-align: middle; }
.question-topic > .ft-icon { flex: none; inline-size: 1rem; block-size: 1rem; color: var(--topic-accent); }
.question-topic > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.topic-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--topic-bg); color: var(--topic-text); }
.topic-chip[aria-current] { border-color: var(--topic-accent); background: var(--topic-bg); color: var(--topic-text); }
.topic-chip .ft-icon { inline-size: 1rem; block-size: 1rem; color: var(--topic-accent); }
.talk-topics { margin-block-end: var(--ft-space-8); }
.talk-main section > h2 { font-size: var(--ft-text-medium); margin-block-end: var(--ft-space-4); }
@media (min-width: 48rem) {
 .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .topic-tile { grid-template-columns: 1fr; }
}
@media (min-width: 72rem) {
 .topic-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .topic-tile { padding: 1rem; }
}

/* Audit 07: ten familiar topics, then conversations; detailed copy stays on each topic. */
.talk-main--compact .app-page-heading { margin-block-end: 1rem; }
.talk-main--compact .talk-topics { margin-block-end: 1.5rem; }
.talk-main--compact .talk-conversations > h2 { margin-block: 0 1rem; }
@media (max-width: 47.999rem) {
 .topic-grid--compact { gap: .5rem; }
 .topic-grid--compact .topic-tile { min-block-size: 3.5rem; align-items: center; align-content: center; padding: .6rem .75rem; }
 .topic-grid--compact .topic-tile__copy { display: none; }
}

/* DODAJ-PORZADEK-001: the existing compact Pogadaj variant at every breakpoint. */
.talk-main--compact .topic-grid--compact { gap: .5rem; }
.talk-main--compact .topic-grid--compact .topic-tile { grid-template-columns: 1.4rem minmax(0, 1fr); align-items: center; align-content: center; min-block-size: 48px; padding: .65rem .7rem; gap: .45rem; }
.talk-main--compact .topic-grid--compact .topic-tile > .ft-icon { inline-size: 1.3rem; block-size: 1.3rem; }
.talk-main--compact .topic-grid--compact .topic-tile__copy { display: none; }

/* Bounded two-line labels keep long QA names from stretching every row. */
.topic-grid--compact .topic-tile strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; max-block-size:2.7em; }
.talk-main--compact .topic-grid--compact .topic-tile { block-size:4rem; min-block-size:4rem; }