/* Home modules layout — ref image match */
:root{ --atc-slider-width: 60%; --atc-title-size: 22px; --atc-title-weight: 600; }

.atc-home-section{margin:2rem 0;}
.atc-hr-label{display:flex;align-items:center;gap:.75rem;margin:0 0 1rem;}
.atc-hr-label .label{font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;}
.atc-hr-label .rule{height:1px;background:currentColor;opacity:.25;flex:1;}

.atc-top-wrap{display:grid;grid-template-columns:minmax(0,var(--atc-slider-width)) minmax(0,1fr);gap:1.25rem;align-items:start;width:100%;max-width:100%}
.atc-top-wrap>*{min-width:0}
@media (max-width:900px){ .atc-top-wrap{grid-template-columns:1fr} }

.atc-slider{position:relative;min-width:0}
.atc-slider-track{display:block}
.atc-slide{display:none;border-radius:.25rem;overflow:hidden}
.atc-slide.is-active{display:block}
.atc-slide img{width:100%;height:auto;display:block;max-height:520px;object-fit:cover}
.atc-slide .below{ padding:.75rem 0 .25rem; }
.atc-kicker{font-size:.8rem;opacity:.75;font-style:italic;display:block;margin-bottom:.35rem}
.atc-title-lg{font-size:var(--atc-title-size);line-height:1.3;margin:0 0 .25rem;font-weight:var(--atc-title-weight)}
.atc-meta{font-size:.8rem;opacity:.75}

.atc-slider .nav{display:none}
.atc-slider-nav{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;margin-top:.35rem}
.atc-slider-nav button{appearance:none;border:1px solid rgba(0,0,0,.18);background:#fff;color:inherit;border-radius:3px;min-width:34px;height:30px;padding:0 8px;font-size:22px;line-height:1;cursor:pointer}
.atc-slider-nav button:hover,.atc-slider-nav button:focus{background:#f5f5f5}
.atc-slider-status{font-size:.78rem;opacity:.7;min-width:42px;text-align:center}

.atc-side-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;min-width:0}
@media (max-width:900px){ .atc-side-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .atc-side-grid{grid-template-columns:1fr} }

.atc-card{display:block}
.atc-card img{width:100%;height:150px;object-fit:cover;display:block;border-radius:.25rem}
.atc-card .meta{padding:.5rem 0}
.atc-card .kicker{font-size:.75rem;opacity:.75;font-style:italic;display:block;margin-bottom:.25rem}
.atc-card h4{font-size:var(--atc-title-size);line-height:1.3;margin:0 0 .25rem;font-weight:var(--atc-title-weight)}
.atc-card .by{font-size:.75rem;opacity:.75}

.atc-row-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:900px){ .atc-row-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .atc-row-4{grid-template-columns:1fr} }
.atc-row-4 .atc-card img{height:140px}

/*
 * Custom advertisement positioning
 * When an advertisement card (class `atc-ad`) is appended to the side grid,
 * it should span across both columns of the grid so that it fills the entire
 * width below the regular posts. Without this rule the ad would occupy
 * only one column. The `grid-column: 1 / -1` declaration forces the ad
 * element to stretch across all columns defined for the grid.
 */
.atc-side-grid .atc-ad {
    grid-column: 1 / -1;
}