/* =========================================================
   iPop custom: RECOMMEND / 8 cards (STORK19)
   - Desktop: 4 columns x 2 rows (8 items)
   - Tablet: 2 columns
   - Mobile: 1 column
   ========================================================= */

/* Hide STORK19 built-in related box on ちょんぼすれすれ posts (avoid duplicate) */
body.single-post.category-tyo #related-box{ display: none !important; }

/* ---------------------------------------------------------
   RECOMMEND 8 (single post footer)
--------------------------------------------------------- */
#related-box-custom{
  margin-top: 28px;
}

/* heading: keep it subtle but readable */
#related-box-custom .related-h.h_ttl{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
#related-box-custom .related-h.h_ttl .gf{
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
#related-box-custom .related-h.h_ttl .gf::after{
  content: "こちらの記事も人気です";
  font-size: 0.85em;
  font-weight: 400;
  opacity: .55;
}

/* ---------------------------------------------------------
   Grid layout (shared: footer recommend + homepage blocks)
--------------------------------------------------------- */
#related-box-custom ul,
.ipop-related-grid ul{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 640px){
  #related-box-custom ul,
  .ipop-related-grid ul{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){
  #related-box-custom ul,
  .ipop-related-grid ul{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 x 2 = 8 */
  }
}

/* remove theme bullets / dots completely */
#related-box-custom ul li,
.ipop-related-grid ul li{
  list-style: none;
  margin: 0;
  padding: 0;
}
#related-box-custom ul li::before,
#related-box-custom ul li::marker,
.ipop-related-grid ul li::before,
.ipop-related-grid ul li::marker{
  content: none !important;
}

/* links: inherit (avoid green) */
#related-box-custom a,
.ipop-related-grid a{
  color: inherit !important;
  text-decoration: none !important;
}

/* card: spacing + square corners */
#related-box-custom .related_newpost__li,
.ipop-related-grid .related_newpost__li{
  min-width: 0;
}

#related-box-custom figure.eyecatch,
.ipop-related-grid figure.eyecatch{
  margin: 0 0 6px 0 !important;  /* reduce gap between image and title */
  border-radius: 0 !important;
  overflow: hidden;
}

#related-box-custom figure.eyecatch img,
.ipop-related-grid figure.eyecatch img{
  border-radius: 0 !important;   /* square */
  display: block;
  width: 100%;
  height: auto;
}

/* meta + title */
#related-box-custom .time__date,
.ipop-related-grid .time__date{
  display: inline-block;
  margin: 0 0 4px 0;
  opacity: .55;
  font-size: 0.85em;
}

/* hide "updated" time in this block */
#related-box-custom .time__date.undo,
.ipop-related-grid .time__date.undo{
  display: none !important;
}

#related-box-custom .ttl,
.ipop-related-grid .ttl{
  margin: 0;
  line-height: 1.35;
  opacity: .78;                 /* match subtle tone */
}

/* hover: a touch clearer */
#related-box-custom a:hover .ttl,
.ipop-related-grid a:hover .ttl{
  opacity: 1;
}
/* ---------------------------------------------------------
   Shared tweaks (remove bullets / reset)
--------------------------------------------------------- */
.ipop-related-grid ul,
#related-box-custom ul{
  list-style: none !important;
  margin: 0;
  padding-left: 0 !important;
}
.ipop-related-grid li,
#related-box-custom li{
  list-style: none !important;
}

/* links: avoid theme accent color (green) inside grids */
.ipop-related-grid a,
#related-box-custom a{
  color: inherit !important;
  text-decoration: none;
}
.ipop-related-grid a:hover,
#related-box-custom a:hover{
  opacity: .9;
  text-decoration: none;
}

/* eyecatch: square corners */
.ipop-related-grid .eyecatch img,
#related-box-custom .eyecatch img{
  border-radius: 0 !important;
}

/* tighten spacing between image and title */
.ipop-related-grid .eyecatch,
#related-box-custom .eyecatch{
  margin: 0 0 8px 0 !important;
}

/* 4 columns a bit earlier (devtools etc.) */
@media (min-width: 900px){
  .ipop-related-grid ul{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------
   Top page (tyo): hero + sections
--------------------------------------------------------- */
.tyo-home-hero{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tyo-home-hero a{
  display: block;
  margin: 0;
}
.tyo-home-hero img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* section title (subtle) */
.ipop-home-section .ipop-sec-title{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 10px;
}
.ipop-home-section .ipop-sec-title .ipop-sec-title-ja{
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: .02em;
}
.ipop-home-section .ipop-sec-title::after{
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.14);
  transform: translateY(-2px);
}

/* excerpt */
.ipop-related-grid .ipop-excerpt{
  margin-top: 6px;
  font-size: .92em;
  line-height: 1.55;
  opacity: .75;
}