/*
 * Dcode homepage styling.
 *
 * NOTE FOR THE TEAM: this is a functional baseline built to match the
 * same Dcode brand system used everywhere else on the site (colors,
 * fonts, card style, category tags) - the same visual language as
 * greatgameindia.com's layout described in the brief: hero row, a
 * "Latest Articles" grid, and per-category sections.
 *
 * The original homepage.html file you sent got cut off/lost partway
 * through this session (a save-size limit truncated it), so this was
 * NOT built pixel-for-pixel from that source the way single-article.css
 * and header-footer.css were. If you still have that homepage.html
 * file, resend it and this will be redone to match it exactly. If not,
 * this is a solid working homepage using the same design system - just
 * flag anything you want changed (grid sizes, spacing, colors) and it's
 * a quick edit either way.
 *
 * The shared white "card" component (image, category badge, title,
 * excerpt, Read More) used in the grids below lives in
 * assets/css/cards.css, shared with the category archive pages, so
 * both always stay visually in sync.
 */

/*
 * Force Astra's boxed container to full width on the homepage, same
 * technique used for single Posts in single-article.css, so the cream
 * background reaches the edges instead of showing Astra's default site
 * background (a different color) as bars down the left/right sides.
 */
body.dcode-full-bleed-front {
  background-color: #F8EFE6 !important;
}

body.dcode-full-bleed-front .ast-container,
body.dcode-full-bleed-front .site-content,
body.dcode-full-bleed-front #content,
body.dcode-full-bleed-front #primary {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dcode-homepage-wrap {
  font-family: 'Quicksand', sans-serif;
  background-color: #F8EFE6;
  color: #152A50;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 32px 24px 60px 24px;
}

.dcode-homepage-wrap h1,
.dcode-homepage-wrap h2,
.dcode-homepage-wrap h3,
.dcode-homepage-wrap h4 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  color: #152A50;
}

.dcode-homepage-wrap a {
  text-decoration: none !important;
}

/*
 * ---------- "Recent News" mosaic rows ----------
 * The homepage's 6 latest posts sitewide, as 2 rows of 3 cards each in
 * a 4-column grid. One card per row (dcode-mosaic-big) spans 2 columns
 * - first card in row 1 (mosaic sits on the left), last card in row 2
 * (mosaic sits on the right) - front-page.php decides which. Every
 * card here also gets the byline/date/read-time meta line via
 * dcode-hero-card (see functions.php).
 */

.dcode-hero-grid {
  display: grid;
  gap: 24px;
  margin-bottom: 24px;
}

.dcode-hero-grid:last-of-type {
  margin-bottom: 48px;
}

.dcode-hero-grid-mosaic {
  grid-template-columns: repeat(4, 1fr);
}

.dcode-mosaic-big {
  grid-column: span 2;
}

.dcode-mosaic-big .dcode-card-image {
  height: 320px;
}

.dcode-mosaic-big .dcode-card-title {
  font-size: 22px;
}

.dcode-card-meta {
  font-size: 13px;
  color: #748189;
  margin-bottom: 8px;
}

/* ---------- Category sections ---------- */

.dcode-category-section {
  margin-bottom: 48px;
}

.dcode-category-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #152A50;
  padding-bottom: 10px;
  margin-bottom: 22px;
}

.dcode-category-section-header h2 {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dcode-view-all-link {
  font-size: 13px;
  font-weight: 700;
  color: #F0B24A !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 1024px) {
  .dcode-hero-grid-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }

  .dcode-mosaic-big {
    grid-column: span 2;
  }

  .dcode-mosaic-big .dcode-card-image {
    height: 260px;
  }
}

@media (max-width: 768px) {
  .dcode-hero-grid-mosaic {
    grid-template-columns: 1fr;
  }

  .dcode-mosaic-big {
    grid-column: span 1;
  }

  .dcode-mosaic-big .dcode-card-image {
    height: 220px;
  }
}