/* ==========================================================================
   aw-blog.css — blog hub (/blog/) page styles, loaded after aw.css via $EXTRA_CSS.
   Design source: _design/Blog.src.html. Shared pieces (filters, search, cards,
   featured, archive rows, empty state, inline form, alerts, band) live in aw.css.
   Owned by the blog-hub agent.
   ========================================================================== */

/* ---- Header: eyebrow + H1 | sub, then category chips + search ---------- */
.aw-hub-head{padding-top:clamp(48px,7vw,96px)}
.aw-hub-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px;align-items:end}
.aw-hub-title{font-size:clamp(40px,5.4vw,72px);line-height:.98;letter-spacing:-.035em;margin:14px 0 0}
.aw-hub-sub{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:var(--muted);text-wrap:pretty}

.aw-hub-tools{margin-top:clamp(28px,4vw,44px);display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}
/* The controls only work with JS: hide them for no-JS visitors (html.aw-js is set pre-paint in head.php).
   aw-blog.js adds .is-ready, so they stay visible even if aw.js itself fails and the bootstrap drops aw-js. */
html:not(.aw-js) .aw-hub-tools:not(.is-ready){display:none}
.aw-hub-tools .aw-filter{white-space:nowrap}
.aw-hub-tools .aw-search{cursor:text}   /* a <div> here (a label may not also hold the clear button); aw-blog.js focuses the field on click */
.aw-search__clear:hover{background:var(--paper-2);color:var(--ink)}
.aw-search__clear:focus-visible{outline-offset:1px}

/* ---- Results ------------------------------------------------------------ */
.aw-hub-body{padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(72px,9vw,128px)}
/* A shared ?cat= / ?q= link: the unfiltered server list stays invisible until aw-blog.js has filtered it
   (the inline head script removes the class after 3 s at the latest). */
.aw-hub-pending [data-hub-results]{visibility:hidden}

/* Cards fade up when they appear (design: awFadeUp .5s per card). "backwards" instead of "both" so the
   finished animation does not pin transform and the card's hover lift keeps working. */
.aw-motion .aw-hub-grid > .aw-post-card{animation:awFadeUp .5s var(--ease) backwards}
/* Chip + date need up to ~252px (HR "INDUSTRIJE" + "12. listopada 2026.", DE "18. September 2026").
   In the 4-column grid (and the narrow 2-column one) cards are ~206–214px wide inside, so aw.css would
   cut the chip ("AI PREGL…", almost every EN/DE chip). Stack chip over date there, the same in every card
   of the row. (Requested globally in CHROME-ISSUES.md; browsers without container queries keep the cut.) */
.aw-hub-grid > .aw-post-card{container-type:inline-size}
@container (max-width:251px){
  .aw-hub-grid .aw-post-card__meta{flex-direction:column;align-items:flex-start;gap:8px}
}

/* German compounds ("Dokumentenverarbeitung", "Geschäftsautomatisierung") are wider than the featured
   column and the 4-column cards at every width: hyphenate them instead of breaking mid-word (aw.css
   sets overflow-wrap:break-word on headings). Only words of 12+ characters are touched.
   Scoped to :lang(de): HR/EN titles fit these columns unbroken, and hyphenating them only produced
   needless breaks ("pretraži-vanje", "zaključi-vanja"), which the design does not do. */
.aw-hub-featured:lang(de) .aw-featured__title,.aw-hub-grid:lang(de) .aw-post-card__title{-webkit-hyphens:auto;hyphens:auto;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;hyphenate-limit-chars:12 5 5}

.aw-hub-archive{margin-top:clamp(48px,6vw,80px)}
.aw-hub-archive__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.aw-hub-archive__count{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--faint)}

.aw-hub-empty .aw-empty__title{overflow-wrap:anywhere;text-wrap:balance}

/* ---- Newsletter band ---------------------------------------------------- */
.aw-hub-news{scroll-margin-top:var(--nav-h)}
.aw-hub-news__inner{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(28px,4vw,56px);align-items:center}
.aw-hub-news__title{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,3.8vw,50px);line-height:1.02;letter-spacing:-.035em;margin:14px 0;color:var(--on-night);text-wrap:balance}
.aw-hub-news__text{margin:0;font-size:16.5px;line-height:1.6;color:var(--on-night-muted);text-wrap:pretty}
.aw-hub-news__action{min-width:0}
.aw-hub-news__fine{margin:12px 18px 0;font-size:13px;line-height:1.5;color:var(--on-night-muted)}
.aw-hub-news__msg .aw-alert{outline:none}
.aw-hub-news__msg .aw-alert--error{margin-top:14px}
.aw-hub-news .aw-alert__sub{overflow-wrap:anywhere}
.aw-motion .aw-hub-news__msg .aw-alert{animation:awFadeUp .4s ease both}
.aw-hub-news .aw-inline-form .aw-btn[aria-busy="true"]{cursor:progress}

@media (max-width:480px){
  .aw-hub-news__title{-webkit-hyphens:auto;hyphens:auto}
  .aw-hub-news__fine{margin-left:4px;margin-right:4px}
}