/* =========================================================================
   The site's front door (session 95) - catalog/frontdoor.py,
   templates/frontdoor/. Panels on the grey backdrop in the Toys home's look;
   the counts are toyhome.css's .hb-th-figures; colours are cards.css's.
   Every class is .hb-fd-*.
   ========================================================================= */

/* Inside the page's container, on the grey backdrop - as every rebuilt page. */
.hb-fd { padding: 0 0 40px; color: var(--t1); font-family: 'Raleway', sans-serif; }
.hb-fd a { text-decoration: none; }
.hb-fd-panel { background: var(--panel); padding: 16px; min-width: 0; }
.hb-fd-row { display: grid; gap: var(--gap); margin-top: var(--gap); }
.hb-fd-row-news { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.hb-fd-row-two  { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.hb-fd-row-half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hb-fd-years-panel { margin-top: var(--gap); }
@media (max-width: 900px) {
  .hb-fd-row-news, .hb-fd-row-two, .hb-fd-row-half { grid-template-columns: minmax(0, 1fr); }
}

/* a panel's head */
.hb-fd-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; }
.hb-fd-head h2 { margin: 0; font: 400 18px 'Oswald', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t1); }
.hb-fd-note { font-size: 13px; color: var(--t3); min-width: 0; }
.hb-fd-head .hb-spacer { flex: 1; }
.hb-fd-head a { font: 13px 'Oswald', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); }
.hb-fd-head a:hover, .hb-fd-head a:focus-visible { color: var(--yellow); }
.hb-fd-btn { background: transparent; border: 1px solid var(--line); color: var(--t2); cursor: pointer;
  font: 12px 'Oswald', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 10px; }
.hb-fd-btn:hover { border-color: var(--yellow); color: var(--yellow); }
/* Bootstrap rings every focused button (CLAUDE.md) - a ring for the keyboard only. */
.hb-fd-btn:focus { outline: none; box-shadow: none; }
.hb-fd-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hb-fd-empty { font-size: 13px; color: var(--t3); margin: 0; }

/* hero */
/* The BB-8 strip: the other pages' band height, no title on it; the hero
   box rises over its lower half. */
.hb-fd-strip { min-height: 0; height: 39px; padding: 0; }
.hb-fd-hero { position: relative; z-index: 1; margin-top: -21px; border-top: 4px solid var(--orange); }
.hb-fd-title { margin: 2px 0; font: 900 30px 'Raleway', sans-serif; color: var(--t1); }
.hb-fd-sub { margin: 0 0 16px; font-size: 15px; color: var(--t2); }
.hb-fd-figures { border-bottom: 0; padding-bottom: 6px; }
/* The search box and the three ways in: one line where it fits, else the
   box across the hero and the three sharing the line under it. */
.hb-fd-hero { container-type: inline-size; }
.hb-fd-find { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--gap); margin-top: 12px; }
.hb-fd-find form { display: flex; min-width: 0; margin: 0; }
@container (max-width: 820px) {
  .hb-fd-find { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-fd-find form { grid-column: 1 / -1; }
  .hb-fd-door { justify-content: center; padding: 0 8px; }
}
.hb-fd-find input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; font: 16px 'Raleway', sans-serif;
  background: #1c1c1c; border: 1px solid var(--line); border-right: 0; color: var(--t1); border-radius: 0; }
.hb-fd-find input:focus { outline: none; border-color: var(--blue); }
.hb-fd-find button { height: 44px; padding: 0 18px; background: var(--blue); border: 0; color: #12202e; cursor: pointer;
  font: 15px 'Oswald', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 0; }
.hb-fd-find button:focus { outline: none; }
.hb-fd-find button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.hb-fd-door { display: flex; align-items: center; height: 44px; padding: 0 18px; background: var(--surface);
  border-left: 4px solid var(--orange); color: var(--t1); font: 16px 'Oswald', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
.hb-fd-door-pub { border-left-color: var(--blue); }
.hb-fd-door-cat { border-left-color: var(--yellow); }
.hb-fd-door:hover, .hb-fd-door:focus-visible { background: var(--hover); color: var(--t1); }
.hb-fd-join { margin: 12px 0 0; font-size: 14px; color: var(--t2); }
.hb-fd-join a { color: var(--yellow); font-weight: 700; }
@media (max-width: 600px) {
  .hb-fd-title { font-size: 23px; }
  .hb-fd-door { font-size: 14px; }
}

/* news */
.hb-fd-lead-pic { display: block; height: 330px; background: #1c1c1c; overflow: hidden; }
.hb-fd-lead-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.hb-fd-lead-pic:hover img { transform: scale(1.03); }
@media (max-width: 600px) { .hb-fd-lead-pic { height: 220px; } }
.hb-fd-date { display: block; font: 12px 'Oswald', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--orange); margin: 12px 0 2px; }
.hb-fd-lead h3 { margin: 0 0 6px; font: 900 26px 'Raleway', sans-serif; line-height: 1.15; }
.hb-fd-lead h3 a { color: var(--t1); }
.hb-fd-lead h3 a:hover, .hb-fd-lead h3 a:focus-visible { color: var(--yellow); }
.hb-fd-lead p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--t2); }
.hb-fd-inpost { font: 12px 'Oswald', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--t3); margin: 4px 0 8px; }
.hb-fd-cards { background: transparent; padding: 0; }
.hb-fd-cards + .hb-fd-cards { margin-top: var(--gap); }
/* Four cards to a row, or two by two where the group is too narrow for four
   at 130px - never three and one. Decided by the group's own width. */
.hb-fd-cards { container-type: inline-size; }
.hb-fd-cards .hb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.hb-fd-cards .hb-card { width: auto; }
@container (max-width: 560px) { .hb-fd-cards .hb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hb-fd-post { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line2); color: var(--t1); }
.hb-fd-latest .hb-fd-head + .hb-fd-post { border-top: 0; padding-top: 0; }
.hb-fd-post-pic { display: block; width: 120px; height: 80px; background: #1c1c1c; overflow: hidden; }
.hb-fd-post-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-fd-post .hb-fd-date { margin: 0 0 3px; }
.hb-fd-post b { display: block; font: 700 15px 'Raleway', sans-serif; line-height: 1.3; color: var(--t1); }
.hb-fd-post:hover b, .hb-fd-post:focus-visible b { color: var(--yellow); }

/* Every text that could run long is cut to its lines. */
.hb-fd-lead h3, .hb-fd-lead p, .hb-fd-post b {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.hb-fd-lead h3 { -webkit-line-clamp: 2; }
.hb-fd-lead p { -webkit-line-clamp: 3; }
.hb-fd-post b { -webkit-line-clamp: 3; }

/* Side by side, the two news panels are ONE fixed height, even and never
   running long (Bill, session 95): seven Latest posts at a fixed 101px fill
   it; in the lead the picture takes what the text and the cards leave, and
   the cards keep to one row - four, or two where four will not fit. */
@media (min-width: 900px) {
  .hb-fd-row-news { height: 820px; }
  .hb-fd-row-news > .hb-fd-panel { display: flex; flex-direction: column; overflow: hidden; }
  .hb-fd-lead-pic { flex: 1 1 auto; height: auto; min-height: 180px; }
  .hb-fd-lead > :not(.hb-fd-lead-pic) { flex: 0 0 auto; }
  .hb-fd-post { flex: 0 0 auto; height: 101px; box-sizing: border-box; }
  @container (max-width: 560px) { .hb-fd-lead .hb-cards > :nth-child(n+3) { display: none; } }
  /* A post about both sides: its first side's row only. */
  .hb-fd-lead .hb-fd-cards + .hb-fd-cards { display: none; }
}

/* picture tiles - on this day, the vault */
.hb-fd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hb-fd-square { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The vault: six across, four where the panel is narrow, three on a phone. */
#hb-fd-vault { container-type: inline-size; }
.hb-fd-vault-panel .hb-fd-square { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
@container (max-width: 560px) { .hb-fd-vault-panel .hb-fd-square { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 380px) { .hb-fd-vault-panel .hb-fd-square { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-fd-tile { position: relative; display: block; aspect-ratio: 3 / 4; background: #1c1c1c; overflow: hidden; color: var(--t1); }
.hb-fd-square .hb-fd-tile { aspect-ratio: 1 / 1; }
.hb-fd-tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.hb-fd-yr { position: absolute; left: 0; top: 0; background: rgba(15,15,15,.85); color: var(--yellow);
  font: 13px 'Oswald', sans-serif; letter-spacing: 1px; padding: 2px 7px; }
.hb-fd-nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 7px 6px; font-size: 12px; line-height: 1.25; color: var(--t1);
  background: linear-gradient(to bottom, transparent, rgba(15,15,15,.92) 45%); opacity: 0; transition: opacity .15s; }
.hb-fd-tile:hover .hb-fd-nm, .hb-fd-tile:focus-visible .hb-fd-nm { opacity: 1; }
.hb-fd-day { font: 400 34px 'Oswald', sans-serif; color: var(--yellow); line-height: 1; margin: 0 0 10px; }
.hb-fd-sub-head { margin: 14px 0 8px; font: 13px 'Oswald', sans-serif; letter-spacing: 1.3px; text-transform: uppercase; color: var(--t3); }

/* the years */
.hb-fd-years { position: relative; height: 200px; }

/* spotlight - the circle is the site's (cards.css .hb-ccard) */
.hb-fd-spot-top { display: flex; justify-content: center; }
.hb-fd-spot-top .hb-ccard { width: 200px; }
.hb-fd-spark { position: relative; height: 80px; margin: 10px 0; }
.hb-fd-fl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hb-fd-fl a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; line-height: 1.3; color: var(--t2); }
.hb-fd-fl a:hover, .hb-fd-fl a:focus-visible { color: var(--yellow); }
.hb-fd-fl img { width: 56px; height: 56px; object-fit: cover; object-position: 50% 0; background: #1c1c1c; }
.hb-fd-fl i { display: block; font: normal 11px 'Oswald', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3); }

/* did you know? - catalog/facts.py; frontdoor.js draws the chart */
.hb-fd-fact h3 { margin: 0 0 4px; font: 900 21px 'Raleway', sans-serif; line-height: 1.2; color: var(--t1); }
.hb-fd-fact p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--t2); }
.hb-fd-fact-chart { position: relative; height: 290px; }
.hb-fd-fact-pair { height: 320px; }
.hb-fd-fact-columns { height: 250px; }
.hb-fd-fact-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; font-size: 12px; color: var(--t3); }
.hb-fd-fact-foot .hb-spacer { flex: 1; }
.hb-fd-fact-foot a { font: 13px 'Oswald', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); }
.hb-fd-fact-foot a:hover, .hb-fd-fact-foot a:focus-visible { color: var(--yellow); }
.hb-fd-shape { font: 11px 'Oswald', sans-serif; letter-spacing: 1.4px; text-transform: uppercase;
  color: #12202e; background: var(--yellow); padding: 1px 7px; }
.hb-fd-retire { border-color: #6b3a2a; color: #E8896B; }