/*
Theme Name: GeneratePress ArtBeat Child
Theme URI: https://example.com/
Description: Child theme for GeneratePress (Free) to create an ArtBeat-style grid news homepage.
Author: ChatGPT
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-artbeat-child
*/

/* ========== Base layout / container ========== */
:root{
  --ab-max: 1200px;
  --ab-border: #e9e9e9;
  --ab-muted: rgba(0,0,0,.72);
  --ab-bg: #f6f6f6;
  --ab-card-bg:#fff;
  --ab-radius: 12px;
}

body{ background: var(--ab-bg); }

/* Make content area feel like a portal */
.separate-containers .site-main > *,
.one-container .site-main > *{
  max-width: var(--ab-max);
  margin-left: auto;
  margin-right: auto;
}

/* Reduce excessive white margins, keep clean */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header{
  max-width: var(--ab-max);
}

/* Typography */
body{ font-size:16px; line-height:1.7; }
h1,h2,h3,h4{ line-height:1.18; letter-spacing:-0.01em; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ========== Header tuning ========== */
.site-header{ border-bottom: 1px solid var(--ab-border); }
.main-navigation{ border-top: 1px solid var(--ab-border); }
.main-navigation .main-nav ul li a{
  font-weight: 700;
  text-transform: none;
  letter-spacing: .2px;
}

/* ========== Homepage custom layout ========== */
.ab-wrap{
  max-width: var(--ab-max);
  margin: 0 auto;
  padding: 22px 18px;
}

.ab-breaking{
  background:#111;
  color:#fff;
  border-radius: var(--ab-radius);
  padding: 12px 16px;
  display:flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}
.ab-breaking__label{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  white-space: nowrap;
  font-size: 13px;
}
.ab-breaking__items{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
}
.ab-breaking__items a{ color:#fff; }
.ab-breaking__items span{ opacity:.7; }

/* 2-column area */
.ab-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px){
  .ab-grid{ grid-template-columns: 1fr; }
}

/* Post cards grid */
.ab-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 980px){
  .ab-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .ab-cards{ grid-template-columns: 1fr; }
}

.ab-card{
  background: var(--ab-card-bg);
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius);
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  display:flex;
  flex-direction: column;
  min-height: 100%;
}
.ab-card__thumb{
  aspect-ratio: 16/10;
  background:#ddd;
  overflow:hidden;
}
.ab-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.001);
}
.ab-card__body{
  padding: 14px 14px 16px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.ab-card__meta{
  display:flex;
  gap: 10px;
  align-items:center;
  font-size: 12px;
  color: var(--ab-muted);
  opacity:.95;
}
.ab-pill{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ab-border);
  background: #fafafa;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing:.4px;
  color: rgba(0,0,0,.68);
}
.ab-card__title{
  font-size: 18px;
  font-weight: 900;
  margin: 0;
}
.ab-card__title a{
  color:#111;
  text-decoration: none;
}
.ab-card__excerpt{
  font-size: 14px;
  color: rgba(0,0,0,.78);
  margin: 0;
}
.ab-card__footer{
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}

/* Sidebar blocks (widgets) */
.ab-sidebar .widget{
  background: var(--ab-card-bg);
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.ab-sidebar .widget-title{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 12px;
}

/* Simple ad placeholder styling */
.ab-ad{
  border: 2px dashed rgba(0,0,0,.25);
  border-radius: var(--ab-radius);
  padding: 16px;
  text-align:center;
  color: rgba(0,0,0,.6);
  font-weight: 700;
  background: #fbfbfb;
}

/* Pagination */
.ab-pagination{
  margin-top: 22px;
}
.ab-pagination .page-numbers{
  display:inline-block;
  padding: 8px 12px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  border: 1px solid var(--ab-border);
  background: #fff;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
}
.ab-pagination .current{
  background:#111;
  color:#fff;
  border-color:#111;
}