/* =========================================================================
   The Toys home page (session 72) - catalog/homepage/home_views.py.
   Loaded after cards.css, whose palette and cards it uses; every rule here
   is the page's own (.hb-th-*), but for the item page's logo tiles, drawn
   here inside an open box's cards.
   ========================================================================= */

/* The band is a title row only. */
.hb-pinhead .bb-8-header { min-height: 0; }
.hb-th-back { margin-left: 10px; text-decoration: none; }
.hb-th-back:hover { text-decoration: none; }

/* ---------------------------------------------------------------- stats */

.hb-th-stats { background: var(--panel); margin-top: 18px; padding: 16px 16px 14px; }
.hb-th-figures {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap);
  border-bottom: 1px solid var(--line2); padding-bottom: 14px;
}
@media (max-width: 860px) { .hb-th-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-th-figure { text-align: center; }
.hb-th-figure b {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 400;
  font-size: 30px; line-height: 1.1; color: var(--orange); letter-spacing: .5px;
}
.hb-th-figure span {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--t3);
}

/* The largest toy types, each a picture in a circle - the character cards'
   look - leading to the Manufacturers page on that type. */
.hb-th-types {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap); padding-top: 14px;
}
@media (max-width: 860px) { .hb-th-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-th-type {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: var(--t1); padding: 6px 4px; border-radius: 4px;
}
.hb-th-type:hover { background: var(--hover); color: var(--t1); text-decoration: none; }
.hb-th-type-img {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  background: #1f1f1f; border: 3px solid var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.hb-th-type-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.hb-th-type-img > i.fas { color: #55503a; }
.hb-th-type-name {
  font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: .8px;
  text-transform: uppercase; text-align: center; line-height: 1.15;
}
.hb-th-type-n { font-size: 12px; color: var(--t3); }

/* ---------------------------------------------------------------- lenses */

.hb-th-hero {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap); margin-top: var(--gap);
}
@media (max-width: 860px) { .hb-th-hero { grid-template-columns: 1fr; } }

.hb-th-lens {
  display: flex; flex-direction: column; background: var(--panel);
  border-top: 4px solid var(--orange); color: var(--t1);
  text-decoration: none; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hb-th-lens:hover { color: var(--t1); text-decoration: none;
  transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.hb-th-characters { border-top-color: var(--yellow); }
.hb-th-timeline   { border-top-color: var(--blue); }

.hb-th-teaser { height: 280px; position: relative; background: #1f1f1f; overflow: hidden; }

/* The lens's one number, over the bottom of its picture. */
.hb-th-kpi {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 10px;
  background: linear-gradient(to bottom, transparent, rgba(15,15,15,.92) 60%);
  display: flex; align-items: baseline; gap: 10px;
}
.hb-th-kpi b {
  font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 44px;
  line-height: 1; color: var(--orange);
}
.hb-th-characters .hb-th-kpi b { color: var(--yellow); }
.hb-th-timeline .hb-th-kpi b   { color: var(--blue); }
.hb-th-kpi span {
  font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--t2);
}

/* Manufacturers: six packages, the newest of six makers - whole, never
   stretched, on the cards' dark ground. */
.hb-th-pics { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); height: 100%; gap: 2px; }
.hb-th-pic { background: #1f1f1f; overflow: hidden; }
.hb-th-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }

/* Characters: five faces, overlapping, the cards' circle - each ringed in
   its kind's colour, as every character card is. */
.hb-th-faces { display: flex; align-items: center; justify-content: center; height: 100%; padding-bottom: 50px; }
.hb-th-face {
  width: 104px; height: 104px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--accent, var(--yellow)); background: #2a2a2a; margin-left: -20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.6); flex: 0 0 auto;
}
.hb-th-face:first-child { margin-left: 0; }
.hb-th-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.hb-th-face > i.fas { color: #55503a; }

/* Timeline: the eras' own banners, stacked, dim behind their names. */
.hb-th-banners { display: flex; flex-direction: column; height: 100%; gap: 2px; }
.hb-th-banner {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  background: #1f1f1f center / cover no-repeat; position: relative;
}
.hb-th-banner::before { content: ""; position: absolute; inset: 0; background: rgba(20,20,20,.55); }
.hb-th-banner b {
  position: relative; font-family: 'Oswald', sans-serif; font-weight: 400;
  font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t1);
  text-shadow: 0 1px 4px #000;
}

.hb-th-lens-foot { padding: 10px 16px 14px; display: flex; align-items: baseline; gap: 10px; }
.hb-th-lens-title {
  font-family: 'Raleway', sans-serif; font-weight: 900; font-size: 22px; color: var(--t1);
  flex: 1 1 auto;
}
.hb-th-go {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--orange);
}
.hb-th-characters .hb-th-go { color: var(--yellow); }
.hb-th-timeline .hb-th-go   { color: var(--blue); }

/* ---------------------------------------------------------------- boxes */

/* Closed: two boxes to a row, each a square of four cards. */
.hb-th-boxes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap); margin: var(--gap) 0 30px;
}
.hb-th-boxes.hb-th-opened { grid-template-columns: 1fr; margin-top: 18px; }
@media (max-width: 860px) { .hb-th-boxes { grid-template-columns: 1fr; } }
.hb-th-boxes:not(.hb-th-opened) .hb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hb-th-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.hb-th-head .hb-spacer { flex: 1 1 auto; }
.hb-th-title {
  font-family: 'Raleway', sans-serif; font-weight: 900; font-size: 20px;
  color: var(--t1); margin: 0;
}
.hb-th-note { font-size: 13px; color: var(--t3); }
.hb-th-expand {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--orange); text-decoration: none;
}
.hb-th-expand:hover { color: var(--t1); text-decoration: none; }

.hb-th-more-row { text-align: center; margin-top: 16px; }
.hb-th-more {
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; background: none; color: var(--t1);
  border: 1px solid var(--line); padding: 7px 22px; cursor: pointer;
}
.hb-th-more:hover { background: var(--hover); }
.hb-th-more:disabled { opacity: .5; cursor: default; }
/* Bootstrap rings a button on any focus (CLAUDE.md); keep it for the keyboard. */
.hb-th-more:focus { outline: none; box-shadow: none; }
.hb-th-more:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }