/* Read Next blocks — moved here with the code that renders them. */

/* ============================================================
   READ NEXT — related guides at the end of an article
   ============================================================ */
.pfn-rg{
  display:block;
  margin:34px 0 0;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.09);
  border-left:3px solid #ff6b00;
  border-radius:12px;
  background:#0d1117;
}
.pfn-rg-kicker{
  display:block; margin-bottom:10px;
  color:#ff6b00 !important;
  font:700 10px/1 Poppins,system-ui,sans-serif !important;
  letter-spacing:1.2px; text-transform:uppercase;
}
.pfn-rg-list{ margin:0 !important; padding:0 !important; list-style:none !important; }
.pfn-rg-list li{
  margin:0 0 8px !important; padding:0 !important; list-style:none !important;
}
.pfn-rg-list li:last-child{ margin-bottom:0 !important; }
.pfn-rg-list li::before{ content:none !important; }
.pfn-rg-list a{
  color:#fff !important;
  font:600 14.5px/1.45 Poppins,system-ui,sans-serif !important;
  text-decoration:none !important;
  transition:color .15s ease;
}
.pfn-rg-list a:hover{ color:#ff6b00 !important; }
.pfn-rg-list a::after{ content:' →'; color:#ff6b00; }

@media (max-width:600px){
  .pfn-rg{ padding:15px 16px; margin-top:26px; }
  .pfn-rg-list a{ font-size:13.5px !important; }
}

/* ============================================================
   MOBILE LEGIBILITY AND TAP TARGETS

   An audit of the stylesheets found seven tappable elements dropping
   below 12px on phones — including pagination, which is primary
   navigation, and two elements inside affiliate cards. Google treats
   sub-12px tap text as a legibility failure, and a 44px target is the
   accepted minimum for a finger.

   These raise only what is tappable. Incidental labels and meta text
   are left as they are: making everything bigger is how a mobile
   layout stops fitting.
   ============================================================ */

@media (max-width: 768px) {
  /* pagination is navigation, not decoration */
  .pagination .page-numbers,
  .pagination a.next,
  .pagination a.prev {
    font-size: 13px !important;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
  }

  /* meta line sits under every headline — 11px is a squint */
  .entry-meta, .post-meta { font-size: 12.5px !important; }
}

@media (max-width: 600px) {
  /* affiliate CTA and price: the two things a reader has to be able to read */
  .pfn-kg-ad-more { font-size: 12.5px !important; }
  .pfn-price-alt  { font-size: 12px !important; }

  /* category filter pills are tapped, so give them a real target */
  .pfn-mmo-pill {
    font-size: 12px !important;
    min-height: 40px;
    display: inline-flex !important;
    align-items: center;
  }
}

@media (max-width: 480px) {
  /* Quick Picks rank number doubles as part of the card link */
  .pfn-qp-num { font-size: 11.5px !important; }
}

/* ============================================================
   LATEST ARTICLES — match the other homepage sections

   Every other block on the homepage is a card: dark panel, 2px orange
   border, rounded corners. Fresh Drops, Quick Picks, the MMO slider and
   the trailer row all read as one system.

   The Latest Articles feed was transparent with no border at all, so it
   looked like loose content that had fallen out of the layout rather
   than a section of it. Its heading already used the house style — the
   ▶ marker, the orange, Poppins 800 — only the container was missing.
   ============================================================ */

body.home .feed,
body.blog .feed {
  background: #0d1117;
  border: 2px solid #ff6b00;
  border-radius: 12px;
  padding: 16px 14px 20px !important;
  margin-bottom: 26px;
}

/* the section heading sits flush inside the card like the others do */
body.home .feed > .section-head,
body.blog .feed > .section-head {
  margin: 0 0 14px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 107, 0, .18);
}

/* cards inside need to breathe now that there is a panel around them */
body.home .feed > .post-card,
body.blog .feed > .post-card { margin-left: 0; margin-right: 0; }

/* the in-feed ad slot should not stretch past the new panel edge */
body.home .feed > .ad-slot,
body.blog .feed > .ad-slot { max-width: 100%; overflow: hidden; }

@media (max-width: 600px) {
  body.home .feed,
  body.blog .feed {
    padding: 13px 10px 16px !important;
    border-radius: 10px;
    margin-bottom: 20px;
  }
}

/* ============================================================
   HOMEPAGE SECTIONS — one corner radius

   Four blocks share the same dark panel and orange border, but two
   were square and two were rounded. Mixed corners read as an accident
   rather than a decision, and the rounded ones already match the
   product cards, top-up cards and partner cards elsewhere on the site.

   12px everywhere, 10px on phones where a tighter curve suits the
   narrower panel.
   ============================================================ */

body.home .pfn-mmo-section,
body.home .pfn-trailer-section,
body.home .pfn-qp,
body.home .feed,
body.blog .feed {
  border-radius: 12px !important;
  overflow: hidden;
}

/* the slider and trailer rows scroll horizontally inside the panel, so
   the inner track needs the same corner or it squares off the parent */
body.home .pfn-mmo-section > *:first-child,
body.home .pfn-trailer-section > *:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

@media (max-width: 600px) {
  body.home .pfn-mmo-section,
  body.home .pfn-trailer-section,
  body.home .pfn-qp,
  body.home .feed,
  body.blog .feed { border-radius: 10px !important; }
}