/**
 * Atelier — T34 Blog (Journal listing + article view).
 * Source: design/store-theme/01-atelier-fashion/pages/T34 Blog.dc.html
 */
.atl-blog { max-width: 1140px; margin: 0 auto; padding: 44px 24px 0; }
.atl-blog-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 38px; text-wrap: balance; }

/* R11: the Journal renders an honest empty state until a blog entity exists —
   the fabricated posts, dates and article it used to ship are gone. The listing
   styles above are kept: they are markup waiting on data, not dead rules. */
.atl-blog-empty { text-align: center; padding: 64px 20px 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.atl-blog-empty-body { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--atl-text-muted); margin: 0; }

.atl-blog-filters { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.atl-blog-filter { font-size: 13px; padding: 8px 16px; border-radius: 999px; text-decoration: none; border: 1px solid var(--atl-border-strong); color: var(--atl-text); background: none; font-family: inherit; cursor: pointer; }
.atl-blog-filter:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }
.atl-blog-filter[data-active] { background: var(--atl-text); color: var(--atl-band-text); border-color: var(--atl-text); }

.atl-blog-featured { text-decoration: none; color: var(--atl-text); display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; margin-top: 26px; background: var(--atl-surface); border: 1px solid var(--atl-border); overflow: hidden; }
.atl-blog-featured-media { aspect-ratio: 16/10; }
.atl-blog-featured-body { padding: 34px 34px 34px 6px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.atl-blog-eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--atl-accent-2); }
.atl-blog-featured-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 28px; text-wrap: balance; }
.atl-blog-featured-excerpt { font-size: 14px; line-height: 1.7; color: var(--atl-text-muted); margin: 0; }
.atl-blog-featured-link { color: var(--atl-text); text-decoration: none; border-bottom: 1px solid var(--atl-accent); padding-bottom: 2px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; width: fit-content; }

.atl-blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.atl-blog-card { text-decoration: none; color: var(--atl-text); background: var(--atl-surface); border: 1px solid var(--atl-border); overflow: hidden; display: flex; flex-direction: column; }
.atl-blog-card-media { aspect-ratio: 16/9; }
.atl-blog-card-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.atl-blog-card-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 20px; text-wrap: balance; }

/* R11-20: the divider no longer carries the "POST VIEW" scaffold label, so it is
   a plain rule above the article rather than a text row. */
.atl-blog-post-divider { border-top: 1px solid var(--atl-border-strong); margin-top: 56px; }

.atl-blog-article { max-width: 720px; margin: 26px auto 0; }
.atl-blog-article-meta { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--atl-accent-2); text-align: center; }
.atl-blog-article-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 12px 0 0; font-size: 40px; text-wrap: balance; text-align: center; }
.atl-blog-article-hero { aspect-ratio: 21/10; margin-top: 26px; }
.atl-blog-article-body { font-size: 15.5px; line-height: 1.9; color: var(--atl-text); margin: 26px 0 0; }
.atl-blog-article-quote { border-left: 3px solid var(--atl-accent); margin: 26px 0 0; padding: 6px 0 6px 22px; font-family: 'Cormorant Garamond', serif; font-size: 21px; line-height: 1.5; }
.atl-blog-share { display: flex; gap: 14px; margin-top: 30px; align-items: center; }
.atl-blog-share-label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atl-text-muted); }
.atl-blog-share-btn { font-size: 12.5px; border: 1px solid var(--atl-border-strong); border-radius: 999px; padding: 7px 14px; color: var(--atl-text); text-decoration: none; }

@media (max-width: 767px) {
  .atl-blog { padding: 32px 20px 0; }
  .atl-blog-title { font-size: 28px; }
  .atl-blog-featured { grid-template-columns: 1fr; }
  .atl-blog-featured-body { padding: 24px; }
  .atl-blog-grid { grid-template-columns: 1fr; }
  .atl-blog-article-title { font-size: 28px; }
}