/* TT Rubber Suite - Home UI (FULL)
   - Clean, minimal layout
   - No metric text
   - No category emoji badges
   - Rich numeric rank badge (1/2/3...) overlay on image
*/

:root{
  --ttrb-home-max: 1440px;
  --ttrb-home-gap: 18px;
  --ttrb-home-side: 320px;

  --ttrb-border: rgba(15, 23, 42, .10);
  --ttrb-border2: rgba(15, 23, 42, .06);
  --ttrb-muted: rgba(15, 23, 42, .62);

  --ttrb-radius: 16px;
  --ttrb-radius2: 18px;

  --ttrb-thumb-ratio: 1 / 1; /* ラバー一覧に合わせて正方形 */
}

/* SWELL等のコンテナ幅をホームだけ少し広げる */
body.home .l-container,
body.home .l-content,
body.home .l-main{
  max-width: var(--ttrb-home-max) !important;
}
body.home .l-content{ width: 100% !important; }

.ttrb-home{
  max-width: var(--ttrb-home-max);
  margin: 0 auto;
  padding: 16px 0 44px;
  box-sizing: border-box;
}

.ttrb-homeLayout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ttrb-home-side);
  gap: var(--ttrb-home-gap);
  align-items: start;
}
@media (max-width: 1020px){
  .ttrb-homeLayout{ grid-template-columns: 1fr; }
}

/* Hero is placed above the 2-col layout (so sidebar aligns with rankings) */
.ttrb-hero{ margin-bottom: var(--ttrb-home-gap); }

/* Prevent overflow shrinking issues inside grid columns */
.ttrb-main{ min-width: 0; }
.ttrb-homeSide{ min-width: 0; }


/* ===== Hero (背景なし / 線だけ) ===== */
.ttrb-hero{
  border-radius: var(--ttrb-radius2);
  padding: 22px 20px;
  background: transparent;
  border: 1px solid var(--ttrb-border2);
}
.ttrb-hero__title{
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: .01em;
}
.ttrb-hero__desc{
  margin: 0 0 14px;
  color: var(--ttrb-muted);
  font-weight: 800;
  line-height: 1.6;
}

.ttrb-heroActions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 680px){
  .ttrb-heroActions{ grid-template-columns: 1fr; }
}

/* Big buttons */
.ttrb-bigBtn{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--ttrb-radius);
  border: 1px solid var(--ttrb-border);
  background: #fff;
  text-decoration:none;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ttrb-bigBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
  border-color: rgba(15,23,42,.16);
}
.ttrb-bigBtn__icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.16);
  font-size: 18px;
}
.ttrb-bigBtn__label{
  display:block;
  font-weight: 950;
  font-size: 16px;
}
.ttrb-bigBtn__sub{
  display:block;
  font-size: 12px;
  font-weight: 800;
  margin-top: 2px;
  opacity: .88;
}

/* Red / Blue (class優先。無ければ順番で適用) */
.ttrb-bigBtn.is-rubber,
.ttrb-heroActions .ttrb-bigBtn:nth-child(1){
  background: #e11d48;
  color: #fff;
  border-color: rgba(225,29,72,.25);
}
.ttrb-bigBtn.is-racket,
.ttrb-heroActions .ttrb-bigBtn:nth-child(2){
  background: #2563eb;
  color: #fff;
  border-color: rgba(37,99,235,.25);
}

/* ===== Rankings ===== */
.ttrb-rankWrap{
  margin-top: 14px;
  display:grid;
  gap: 18px;
}
.ttrb-rankCol{
  border-top: 1px solid var(--ttrb-border2);
  padding-top: 12px;
}
.ttrb-rankHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 8px 0 10px;
}
.ttrb-rankTitle{
  display: inline-flex;
  align-items:center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .02em;
}
.ttrb-rankTitle::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.22);
}

/* Grid */
.ttrb-rankGrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 14px;
}
@media (max-width: 1380px){ .ttrb-rankGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1150px){ .ttrb-rankGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px){  .ttrb-rankGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){
  .ttrb-rankGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .ttrb-rankBadge{
    width: 26px;
    height: 26px;
    font-size: 11px;
    top: 7px;
    left: 7px;
  }
  .ttrb-card__body{ padding: 10px 10px 12px; }
  .ttrb-card__name{ font-size: 12px; }
  .ttrb-card__maker{ font-size: 10.5px; opacity: .65; }
}

@media (max-width: 380px){
  .ttrb-rankGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Cards (JS renders .ttrb-card) ===== */
.ttrb-card{
  display:block;
  text-decoration:none;
  border-radius: var(--ttrb-radius2);
  overflow:hidden;
  border: 1px solid var(--ttrb-border2);
  background:#fff;
  box-shadow: 0 8px 22px rgba(15,23,42,.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ttrb-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15,23,42,.10);
  border-color: rgba(15,23,42,.12);
}

.ttrb-card__img{
  position:relative;
  aspect-ratio: var(--ttrb-thumb-ratio);
  background: rgba(15,23,42,.03);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ttrb-card__img img{
  width:100%;
  height:100%;
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}

.ttrb-card__body{
  padding: 12px 12px 14px;
}
.ttrb-card__name{
  font-weight: 950;
  font-size: 13px;
  line-height: 1.28;
  margin: 0;
  letter-spacing: .01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.28em * 2);
}
.ttrb-card__maker{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ttrb-muted);
}

/* Hide any legacy pieces if still present */
.ttrb-badge,
.ttrb-rankPill,
.ttrb-card__rank,
.ttrb-card__reason,
.ttrb-card__meta,
.ttrb-card__stats,
.ttrb-hcard,
.ttrb-hcard__reason,
.ttrb-hcard__meta,
.ttrb-hcard__stats{
  display: none !important;
}

/* ===== Rich numeric rank badge ===== */
.ttrb-rankBadge{
  position:absolute;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(15,23,42,.92);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
  z-index: 3;
}

/* Top3 are a bit richer */
.ttrb-rankGrid .ttrb-card:nth-child(1) .ttrb-rankBadge{
  background: linear-gradient(180deg, rgba(255,246,207,.98), rgba(255,255,255,.92));
  border-color: rgba(234,179,8,.35);
}
.ttrb-rankGrid .ttrb-card:nth-child(2) .ttrb-rankBadge{
  background: linear-gradient(180deg, rgba(236,241,246,.98), rgba(255,255,255,.92));
  border-color: rgba(148,163,184,.40);
}
.ttrb-rankGrid .ttrb-card:nth-child(3) .ttrb-rankBadge{
  background: linear-gradient(180deg, rgba(255,227,205,.98), rgba(255,255,255,.92));
  border-color: rgba(234,88,12,.28);
}

/* ===== Sidebar (最新記事) ===== */
.ttrb-homeSide{
  position: sticky;
  top: 24px;
  border-radius: var(--ttrb-radius2);
  border: 1px solid var(--ttrb-border2);
  background:#fff;
  overflow:hidden;
}
@media (max-width: 1020px){
  .ttrb-homeSide{ position: static; }
}
.ttrb-sideHead{
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--ttrb-border2);
  background: rgba(15,23,42,.02);
}
.ttrb-sideTitle{
  margin:0;
  font-weight: 950;
  font-size: 14px;
  letter-spacing: .01em;
}
.ttrb-sideList{
  list-style:none;
  margin:0;
  padding: 8px 10px 10px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.ttrb-sideItem a{
  display:flex;
  gap: 10px;
  align-items: baseline;
  text-decoration:none;
  padding: 8px 8px;
  border-radius: 12px;
}
.ttrb-sideItem a:hover{ background: rgba(15,23,42,.03); }
.ttrb-sideDate{
  opacity:.6;
  font-weight: 900;
  font-size: 11px;
  flex: 0 0 auto;
}
.ttrb-sideName{
  font-weight: 900;
  font-size: 12px;
  line-height: 1.3;
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ttrb-sideFoot{
  padding: 10px 14px 14px;
  border-top: 1px solid var(--ttrb-border2);
}
.ttrb-sideMore{
  display:inline-block;
  width:100%;
  text-align:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--ttrb-border);
  text-decoration:none;
  font-weight: 950;
  background:#fff;
}

/* Empty state */
.ttrb-empty{
  padding: 12px;
  border-radius: 12px;
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.70);
}