/* Home: Latest from Blog (magazine layout). Prefix agh-blog-. Light default, dark via html[data-theme="dark"]. */
.agh-blog { background: var(--ag-bg); overflow: clip; isolation: isolate; }

/* Decorative blobs */
.agh-blog-deco { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: clip; }
.agh-blog-blob { position: absolute; display: block; filter: blur(60px); opacity: .55; animation: ag-blob 26s ease-in-out infinite; }
.agh-blog-blob--a { width: 380px; height: 380px; top: -80px; right: -120px; background: radial-gradient(circle, rgba(18, 163, 122, .22), transparent 70%); }
.agh-blog-blob--b { width: 320px; height: 320px; bottom: -60px; left: -140px; background: radial-gradient(circle, rgba(245, 181, 63, .14), transparent 70%); animation-delay: -9s; }
html[data-theme="dark"] .agh-blog-blob { opacity: .4; }

/* Header row */
.agh-blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.agh-blog-head-text { max-width: 640px; }
.agh-blog-head .agh-title { margin-bottom: 8px; }
.agh-blog-sub { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--ag-text); }
.agh-blog-all { background: var(--ag-surface); padding: 12px 24px; }
.agh-blog-all i { transition: transform .35s var(--ag-ease); }
.agh-blog-all:hover i { transform: translateX(5px); }
html[data-theme="dark"] .agh-blog-all { background: var(--ag-surface); color: var(--ag-ink); }
html[data-theme="dark"] .agh-blog-all:hover { color: var(--ag-brand); border-color: var(--ag-brand); }

/* Grid: 6 columns. Featured = left half spanning 2 rows, rows 2-3 on the right, 4-6 a row of three below. */
.agh-blog-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.agh-blog-cell { display: flex; min-width: 0; }
.agh-blog-cell--featured { grid-column: 1 / span 3; grid-row: 1 / span 2; }
.agh-blog-cell--row { grid-column: span 3; }
.agh-blog-cell--stack { grid-column: span 2; }

/* Card base */
.agh-blog-card {
  position: relative; display: flex; width: 100%; min-width: 0;
  background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius);
  box-shadow: 0 1px 2px rgba(2, 44, 34, .04);
  transition: transform .45s var(--ag-ease), box-shadow .45s var(--ag-ease), border-color .35s;
  overflow: hidden; isolation: isolate;
}
.agh-blog-card:hover { transform: translateY(-6px); border-color: rgba(18, 163, 122, .45); box-shadow: 0 24px 50px -18px rgba(5, 102, 79, .35), 0 0 0 1px rgba(18, 163, 122, .12); }
html[data-theme="dark"] .agh-blog-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .agh-blog-card:hover { border-color: rgba(52, 211, 153, .45); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6), 0 0 32px -6px rgba(52, 211, 153, .28); }

/* Pointer spotlight (data-ag-spotlight) on the light cards */
.agh-blog-card[data-ag-spotlight]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(380px circle at var(--ag-mx, 50%) var(--ag-my, 50%), var(--ag-glow), transparent 45%);
}
.agh-blog-card[data-ag-spotlight]:hover::before { opacity: 1; }

/* Media */
.agh-blog-media { position: relative; overflow: hidden; background: var(--ag-surface-2); flex-shrink: 0; }
.agh-blog-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ag-ease); }
.agh-blog-card:hover .agh-blog-media img { transform: scale(1.07); }

/* Body */
.agh-blog-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; flex: 1; padding: 22px 24px 22px; }
.agh-blog-cat {
  display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ag-brand); background: var(--ag-brand-soft); border: 1px solid transparent; padding: 5px 12px; border-radius: 999px; line-height: 1.3;
}
.agh-blog-h { margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--ag-ink); }
.agh-blog-link, .agh-blog-link:hover, .agh-blog-link:visited { color: inherit; text-decoration: none; }
.agh-blog-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ag-ease), color .3s; }
.agh-blog-card:hover .agh-blog-link { color: var(--ag-brand); background-size: 100% 1px; }
/* Stretched link: the whole card is clickable */
.agh-blog-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.agh-blog-h, .agh-blog-excerpt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.agh-blog-h { -webkit-line-clamp: 3; line-clamp: 3; }
.agh-blog-excerpt { -webkit-line-clamp: 2; line-clamp: 2; margin: 0; font-size: .92rem; line-height: 1.65; color: var(--ag-text); }
.agh-blog-foot { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-top: 6px; }
.agh-blog-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--ag-muted); }
.agh-blog-meta span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.agh-blog-meta i { color: var(--ag-brand); font-size: .85rem; }
.agh-blog-more { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ag-brand); white-space: nowrap; }
.agh-blog-more i { transition: transform .4s var(--ag-ease); }
.agh-blog-card:hover .agh-blog-more i { transform: translateX(6px); }

/* Visible keyboard focus on the whole card */
.agh-blog-card:focus-within { outline: 3px solid var(--ag-brand-mid); outline-offset: 3px; }
@supports selector(:has(a)) {
  .agh-blog-card:focus-within { outline: none; }
  .agh-blog-card:has(.agh-blog-link:focus-visible) { outline: 3px solid var(--ag-brand-mid); outline-offset: 4px; }
  .agh-blog-link:focus-visible { outline: none; }
}

/* Row cards (2-3): image left, text right */
.agh-blog-card--row { flex-direction: row; }
.agh-blog-card--row .agh-blog-media { width: 40%; min-height: 220px; margin: 10px 0 10px 10px; border-radius: var(--ag-radius-sm); }
.agh-blog-card--row .agh-blog-media img { position: absolute; inset: 0; }
.agh-blog-card--row .agh-blog-h { font-size: 1.12rem; }

/* Stack cards (4-6): image on top */
.agh-blog-card--stack { flex-direction: column; }
.agh-blog-card--stack .agh-blog-media { aspect-ratio: 16 / 10; margin: 10px 10px 0; border-radius: var(--ag-radius-sm); }
.agh-blog-card--stack .agh-blog-body { padding: 18px 20px 20px; }

/* Featured card (1): image fills, dark gradient, white text over it */
.agh-blog-card--featured { flex-direction: column; justify-content: flex-end; min-height: 540px; border: 0; background: #06231B; box-shadow: var(--ag-shadow-lg); }
.agh-blog-card--featured .agh-blog-media { position: absolute; inset: 0; z-index: -1; background: #06231B; }
.agh-blog-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 20, 16, .05) 0%, rgba(2, 20, 16, .15) 30%, rgba(2, 24, 18, .72) 62%, rgba(2, 14, 11, .94) 100%), linear-gradient(135deg, rgba(5, 102, 79, .28), transparent 55%); }
.agh-blog-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); transform: translateX(-130%) skewX(-20deg); pointer-events: none; }
.agh-blog-card--featured:hover .agh-blog-sheen { animation: ag-shimmer 1.3s var(--ag-ease) 1; }
.agh-blog-flag {
  position: absolute; top: 18px; left: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #fff;
  padding: 6px 13px; border-radius: 999px; background: rgba(5, 102, 79, .55); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
}
.agh-blog-flag i { color: var(--ag-gold); }
.agh-blog-card--featured .agh-blog-body { flex: 0 0 auto; gap: 12px; padding: clamp(22px, 3vw, 34px); }
.agh-blog-card--featured .agh-blog-cat {
  color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
}
.agh-blog-card--featured .agh-blog-h { font-size: clamp(1.35rem, 2.1vw, 1.85rem); font-weight: 700; line-height: 1.25; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.agh-blog-card--featured:hover .agh-blog-link { color: #fff; }
.agh-blog-card--featured .agh-blog-excerpt { color: rgba(255, 255, 255, .86); font-size: .98rem; -webkit-line-clamp: 3; line-clamp: 3; max-width: 560px; }
.agh-blog-card--featured .agh-blog-meta { color: rgba(255, 255, 255, .78); }
.agh-blog-card--featured .agh-blog-meta i { color: #6EE7B7; }
.agh-blog-card--featured .agh-blog-more { color: #fff; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); transition: background-color .35s; }
.agh-blog-card--featured:hover .agh-blog-more { background: rgba(255, 255, 255, .24); }
.agh-blog-card--featured:hover { box-shadow: 0 30px 70px -20px rgba(5, 102, 79, .55), 0 0 0 1px rgba(18, 163, 122, .3); }
html[data-theme="dark"] .agh-blog-card--featured { box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px var(--ag-line); }
html[data-theme="dark"] .agh-blog-card--featured:hover { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 0 40px -6px rgba(52, 211, 153, .35); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .agh-blog-cell--featured, .agh-blog-cell--row { grid-column: 1 / -1; grid-row: auto; }
  .agh-blog-card--featured { min-height: 460px; }
  .agh-blog-grid { gap: 20px; }
}
@media (max-width: 767.98px) {
  .agh-blog-cell--stack { grid-column: 1 / -1; }
  /* stack cards turn into the same horizontal list layout as the row cards */
  .agh-blog-card--stack { flex-direction: row; }
  .agh-blog-card--stack .agh-blog-media { aspect-ratio: auto; width: 40%; min-height: 200px; margin: 10px 0 10px 10px; }
  .agh-blog-card--stack .agh-blog-media img { position: absolute; inset: 0; }
  .agh-blog-card--stack .agh-blog-body { padding: 22px 24px; }
  .agh-blog-head { align-items: flex-start; }
}
@media (max-width: 575.98px) {
  .agh-blog-grid { gap: 16px; }
  .agh-blog-card--featured { min-height: 420px; }
  .agh-blog-card--row, .agh-blog-card--stack { flex-direction: column; }
  .agh-blog-card--row .agh-blog-media, .agh-blog-card--stack .agh-blog-media { width: auto; min-height: 0; aspect-ratio: 16 / 9; margin: 10px 10px 0; }
  .agh-blog-card--row .agh-blog-body, .agh-blog-card--stack .agh-blog-body { padding: 16px 18px 18px; }
  .agh-blog-flag { top: 14px; left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .agh-blog-blob, .agh-blog-sheen { animation: none !important; }
  .agh-blog-card, .agh-blog-card:hover, .agh-blog-card:hover .agh-blog-media img { transform: none; }
}