/* ── News list (/blog) — card grid, newest article as a large card ──────────
   Only the category blog page renders <div class="blog">, so nothing else changes.
   CSS only: URLs, titles (h2), intro text and links stay exactly as Joomla outputs them. */
.t3-content .blog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;margin:16px 0 48px}
.t3-content .blog>.items-row,.t3-content .blog>.items-row>[class*="col-"],.t3-content .blog .item{display:contents}
/* Bootstrap clearfix pseudo-elements would become empty grid/flex cells */
.t3-content .blog:before,.t3-content .blog:after,.t3-content .blog>.items-row:before,.t3-content .blog>.items-row:after,.t3-content .blog .article-intro:before,.t3-content .blog .article-intro:after{content:none!important;display:none!important}
.t3-content .blog article{position:relative;display:flex;flex-direction:column;margin:0;background:#fff;border:1px solid #e3e8ef;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(15,39,71,.05);transition:box-shadow .2s,transform .2s}
.t3-content .blog article:hover{box-shadow:0 12px 30px rgba(15,39,71,.13);transform:translateY(-3px)}
.t3-content .blog .article-intro{display:contents}
.t3-content .blog .item-image{order:-1;float:none!important;margin:0!important;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0f2747}
.t3-content .blog .item-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.t3-content .blog article:hover .item-image img{transform:scale(1.04)}
.t3-content .blog .article-header{margin:0;padding:18px 20px 0;border:0}
.t3-content .blog h2.article-title{margin:0;font-size:17px!important;line-height:1.35;font-weight:700}
.t3-content .blog h2.article-title a{color:#0f2747}
.t3-content .blog article:hover h2.article-title a{color:#1b73e8}
.t3-content .blog h2.article-title a:after{content:"";position:absolute;inset:0;z-index:1}
.t3-content .blog .article-aside{display:none}
.t3-content .blog .article-intro>p{margin:10px 20px 0;font-size:14px;line-height:1.55;color:#5b6575;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t3-content .blog .article-intro>p~*{display:none}
.t3-content .blog .readmore{margin:auto 0 0;padding:14px 20px 18px}
.t3-content .blog .readmore .btn{padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#1b73e8;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.t3-content .blog .readmore .btn:after{content:" \2192"}

/* newest article: full-width card, picture left */
.t3-content .blog>.row-0 article{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto 1fr}
.t3-content .blog>.row-0 .item-image{grid-column:1;grid-row:1/4;aspect-ratio:16/9}
.t3-content .blog>.row-0 .article-header{grid-column:2;padding:36px 40px 0}
.t3-content .blog>.row-0 .article-header:before{content:"";display:block;width:44px;height:4px;margin-bottom:16px;border-radius:2px;background:#c8102e}
.t3-content .blog>.row-0 h2.article-title{font-size:28px!important;line-height:1.25}
.t3-content .blog>.row-0 .article-intro>p{grid-column:2;margin:16px 40px 0;font-size:16px;-webkit-line-clamp:5}
.t3-content .blog>.row-0 .readmore{grid-column:2;align-self:end;padding:22px 40px 36px}
.t3-content .blog>.row-0 .readmore .btn{display:inline-block;padding:11px 22px;border-radius:8px;background:#1b73e8;color:#fff}

@media (max-width:1199px){
  .t3-content .blog{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .t3-content .blog{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
  .t3-content .blog>.row-0 article{display:flex}
  .t3-content .blog>.row-0 .article-header{padding:20px 22px 0}
  .t3-content .blog>.row-0 h2.article-title{font-size:22px!important}
  .t3-content .blog>.row-0 .article-intro>p{margin:12px 22px 0;font-size:15px;-webkit-line-clamp:4}
  .t3-content .blog>.row-0 .readmore{padding:18px 22px 24px}
}
@media (max-width:599px){
  .t3-content .blog{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* Articles written in the .ar-post column (900px): title + info line aligned with the text column */
.item-page:has(.ar-post) .article-header,.item-page:has(.ar-post) .article-aside{max-width:900px;margin-left:auto;margin-right:auto}
.item-page:has(.ar-post) h1.article-title{font-size:32px;line-height:1.25;font-weight:700;margin:10px 0 6px}
@media (max-width:599px){.item-page:has(.ar-post) h1.article-title{font-size:25px}}