/* Galaxyboxx game hubs: "Featured drop, two ways" (design Hub-3, chosen 14 October 2026).
   The featured release as the banner, the sealed and singles panels, "Just landed", the WhatsApp band.
   Markup: theme/inc/hubs.php; each hub's content file in site-plugin/rebuild/pages/. */

.gb-hub-page .wp-site-blocks > main{padding-block:0}
.gb-hub{--gb-soft:#CBD5E1;--gb-display:var(--wp--preset--font-family--display)}
.gb-hub.gb-hub{margin-block:0}
.gb-hub > *{margin-block:0 !important}
.gb-hub :is(h1, h2, h3, p, ul, ol){margin:0}
.gb-hub :is(ul, ol){padding:0;list-style:none}
.wp-block-post-content .gb-hub :is(h1, h2, h3, p, ul, ol){margin-block:0}

/* Every section holds its content to the shop's measure, inside the page gutter */
.gb-hub-hero__inner, .gb-hub-section, .gb-hub-landed__inner, .gb-hub-alerts__inner, .gb-hub-about{
  box-sizing:border-box;width:100%;max-width:calc(var(--gb-measure) + 2 * var(--gb-gutter));margin-inline:auto;padding-inline:var(--gb-gutter);
}

.gb-hub-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:16px}
.gb-hub-head h2, .gb-hub-landed__head h2{font-family:var(--gb-display);font-size:28px;line-height:36px;font-weight:700;letter-spacing:-.005em}
.gb-hub-head p{font-size:15px;font-weight:500;color:var(--wp--preset--color--muted)}

/* Buttons the hub adds to the shared ones (base.css) */
.gb-button--wa{gap:10px;background:#25D366;color:var(--wp--preset--color--canvas)}
.gb-button--wa:hover{background:#4BE08A;color:var(--wp--preset--color--canvas)}
.gb-button--dark{min-height:52px;padding:0 26px;gap:10px;background:var(--wp--preset--color--canvas);color:var(--wp--preset--color--text);font-size:16px}
.gb-button--dark:hover{background:#262833;color:var(--wp--preset--color--text)}
.gb-hub .gb-button:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:3px}

/* ---------- The banner: the featured release itself ---------- */
.gb-hub-hero{background:var(--wp--preset--color--panel);border-bottom:1px solid var(--wp--custom--line)}
.gb-hub-hero__inner{
  display:grid;column-gap:56px;padding-block:48px;min-height:520px;
  grid-template-columns:minmax(0,1fr) minmax(0,520px);
  /* the words sit in the middle of the picture's height: the empty rows above and below share what is left */
  grid-template-rows:1fr auto auto auto auto 1fr;
}
.gb-hub-hero__crumbs{grid-column:1;grid-row:2}
.gb-hub-hero__title{grid-column:1;grid-row:3}
.gb-hub-hero__intro{grid-column:1;grid-row:4}
.gb-drop{grid-column:1;grid-row:5}
.gb-drop__media{grid-column:2;grid-row:1 / -1;align-self:center}
/* A hub with nothing published: one column, no picture's height to fill (theme/inc/hubs.php, "Between drops") */
.gb-hub-hero--empty .gb-hub-hero__inner{grid-template-columns:minmax(0,1fr);min-height:0}
.gb-drop--empty{max-width:64ch}

.gb-hub-hero__crumbs .wc-block-breadcrumbs, .gb-hub-hero__crumbs .woocommerce-breadcrumb{margin:0;font-size:14px;line-height:20px;font-weight:500;color:var(--wp--preset--color--muted)}
.gb-hub-hero__crumbs a{color:var(--gb-soft);text-decoration:underline;text-decoration-color:rgba(203,213,225,.45);text-underline-offset:.2em}
.gb-hub-hero__crumbs a:hover{color:var(--wp--preset--color--cyan)}
.gb-hub-hero__title{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:12px}
.gb-hub-hero__logo{display:block;width:auto;max-width:152px;height:56px;object-fit:contain}
.gb-hub-hero__title h1{font-family:var(--gb-display);font-size:40px;line-height:48px;font-weight:700;letter-spacing:-.01em;color:var(--wp--preset--color--text)}
.gb-hub-hero__title h1 strong{font-weight:inherit}
.gb-hub-hero__intro{margin-top:16px;max-width:64ch}
.gb-hub-hero__intro p{font-size:15px;line-height:1.6;color:var(--gb-soft)}
.gb-hub-hero__intro p + p{margin-top:.75rem}

.gb-drop{display:flex;flex-direction:column;gap:12px;margin-top:36px;padding-top:28px;border-top:1px solid var(--wp--custom--line)}
.gb-drop .gb-kicker{font-size:12px;font-weight:700;line-height:16px;font-family:var(--wp--preset--font-family--body)}
.gb-drop__name{font-family:var(--gb-display);font-size:36px;line-height:42px;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.gb-drop__name a{color:var(--wp--preset--color--text);text-decoration:none}
.gb-drop__name a:hover{color:var(--wp--preset--color--cyan-hi)}
.gb-drop__price{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.gb-drop__amount{font-family:var(--gb-display);font-size:28px;line-height:1.2;font-weight:700;color:var(--wp--preset--color--cyan)}
.gb-drop__amount del{font-size:.7em;font-weight:500;color:var(--wp--preset--color--muted)}
.gb-drop__amount ins{text-decoration:none}
.gb-drop__price.is-out .gb-drop__amount{color:var(--wp--preset--color--muted)}
.gb-stock{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--wp--custom--radius--small);font-size:13px;font-weight:700}
.gb-stock--in{background:rgba(52,211,153,.14);color:#6EE7B7}
.gb-stock--out{background:rgba(255,77,0,.16);color:#FFB199}
.gb-stock--pre{background:rgba(255,215,0,.14);color:var(--wp--preset--color--gold)}
.gb-drop__note{font-size:15px;line-height:22px;font-weight:500;color:var(--gb-soft)}
.gb-drop__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.gb-drop__buy{display:contents}
.gb-drop__buy .gb-button{border:0;cursor:pointer}
/* beside an "Add to cart" button the alerts button steps back to an outline */
.gb-button--wa-quiet{background:transparent;color:var(--wp--preset--color--text);border:1px solid rgba(37,211,102,.6)}
.gb-button--wa-quiet svg{color:#25D366}
.gb-button--wa-quiet:hover{background:rgba(37,211,102,.12);color:var(--wp--preset--color--text)}

.gb-drop__media{display:flex;align-items:center;justify-content:center;height:420px;background:#FFFFFF;border-radius:var(--wp--custom--radius--medium);overflow:hidden}
.gb-drop__img{display:block;width:380px;max-width:85%;height:380px;max-height:90%;object-fit:contain}

/* ---------- Two ways to collect ---------- */
.gb-hub-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-block:40px}
.gb-way{display:flex;gap:24px;min-height:360px;padding:32px;background:var(--wp--preset--color--surface);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--medium)}
.gb-way:only-child{grid-column:1 / -1;min-height:260px}
.gb-way__words{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.gb-way .gb-kicker{font-size:12px;font-weight:700;line-height:16px;font-family:var(--wp--preset--font-family--body)}
.gb-way h2{font-family:var(--gb-display);font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.005em}
.gb-way__lede{font-size:15px;line-height:22px;font-weight:500;color:var(--gb-soft)}
.gb-way__rows li + li .gb-way__row{border-top:1px solid var(--wp--custom--line)}
.gb-way__row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding-block:6px;color:var(--wp--preset--color--text);font-size:15px;font-weight:600;text-decoration:none}
.gb-way__row:hover{color:var(--wp--preset--color--cyan-hi)}
.gb-way__count{flex:none;font-weight:500;color:var(--wp--preset--color--muted)}
.gb-way__count.is-out{color:#FFB199}
.gb-way__go{margin-top:auto;align-self:flex-start}
.gb-way__art{flex:none;width:200px;position:relative}
.gb-way__art--box{display:flex;align-items:center;justify-content:center;background:#FFFFFF;border-radius:6px}
.gb-way__box{display:block;width:160px;height:160px;object-fit:contain}
.gb-way__card{position:absolute;width:132px;height:184px;object-fit:cover;border-radius:7px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.gb-way__card:nth-child(1){left:0;top:30px;transform:rotate(-9deg)}
.gb-way__card:nth-child(2){left:66px;top:70px;transform:rotate(7deg)}
.gb-way__card:nth-child(3){left:30px;top:100px}
.gb-way:only-child .gb-way__art{width:240px}

/* ---------- Just landed ---------- */
.gb-hub-landed{max-width:none;padding:40px 0 32px;background:var(--wp--preset--color--panel)}
.gb-hub-landed__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.gb-hub-landed__head > div{display:flex;flex-direction:column;gap:8px}
.gb-hub-landed .gb-kicker{font-size:12px;font-weight:700;line-height:16px;font-family:var(--wp--preset--font-family--body)}
.gb-hub-landed__all{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;color:var(--wp--preset--color--cyan-hi);text-decoration:none}
.gb-hub-landed__all:hover{color:var(--wp--preset--color--cyan);text-decoration:underline}
.gb-hub-landed .gb-carousel .wc-block-product-template > .wc-block-product{flex-basis:calc((100% - 3 * 1.5rem) / 4) !important}
.gb-hub-landed .gb-carousel .wc-block-product-template{gap:1.5rem !important}

/* ---------- About the game (a hub with more to say than its banner holds) ---------- */
.gb-hub-about{padding-block:40px}
.gb-hub-about h2{font-family:var(--gb-display);font-size:22px;line-height:1.3;font-weight:700;margin-bottom:.75rem}
.gb-hub-about p{max-width:72ch;font-size:15px;line-height:1.65;color:var(--gb-soft)}

/* ---------- The WhatsApp band ---------- */
.gb-hub-alerts{background:#25D366;color:var(--wp--preset--color--canvas)}
.gb-hub-alerts__inner{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;min-height:160px;padding-block:28px}
.gb-hub-alerts h2{font-family:var(--gb-display);font-size:32px;line-height:38px;font-weight:700;color:var(--wp--preset--color--canvas)}
.gb-hub-alerts p{margin-top:6px;font-size:16px;line-height:24px;font-weight:600;color:var(--wp--preset--color--canvas)}
.gb-hub-alerts .gb-button{flex:none}
.gb-hub-alerts .gb-button:focus-visible{outline-color:var(--wp--preset--color--canvas)}

/* ---------- Tablets ---------- */
@media (max-width:1100px){
  .gb-hub-hero__inner{column-gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,400px);min-height:0}
  .gb-drop__media{height:360px}
  .gb-hub-ways{grid-template-columns:1fr}
  .gb-hub-landed .gb-carousel .wc-block-product-template > .wc-block-product{flex-basis:calc((100% - 2 * 1.5rem) / 3) !important}
}

/* ---------- Phones ---------- */
@media (max-width:781px){
  .gb-hub-hero__inner{
    display:flex;flex-direction:column;padding-block:20px 24px;
  }
  .gb-hub-hero__crumbs{order:1}
  .gb-hub-hero__crumbs .wc-block-breadcrumbs, .gb-hub-hero__crumbs .woocommerce-breadcrumb{font-size:13px;line-height:18px}
  .gb-hub-hero__title{order:2;margin-top:8px;gap:12px}
  .gb-hub-hero__logo{max-width:98px;height:36px}
  .gb-hub-hero__title h1{font-size:28px;line-height:34px}
  .gb-drop__media{order:3;height:200px;margin-top:16px}
  .gb-drop__img{width:180px;height:180px}
  .gb-drop{order:4;gap:8px;margin-top:12px;padding-top:0;border-top:0}
  .gb-drop .gb-kicker{font-size:11px;gap:10px}
  .gb-drop .gb-kicker::before{width:24px}
  .gb-drop__name{font-size:22px;line-height:28px}
  .gb-drop__amount{font-size:22px}
  .gb-stock{height:24px;padding:0 8px;font-size:12px}
  .gb-drop__note{font-size:14px;line-height:20px}
  .gb-drop__actions{flex-direction:column;gap:8px;margin-top:4px}
  .gb-drop__actions .gb-button{width:100%}
  /* on a phone the hub's own words follow the product, so the product is on the first screen */
  .gb-hub-hero__intro{order:5;margin-top:20px;padding-top:16px;border-top:1px solid var(--wp--custom--line)}
  .gb-hub-hero__intro p{font-size:14px;line-height:1.55}

  .gb-hub-head{margin-bottom:12px}
  .gb-hub-head h2, .gb-hub-landed__head h2{font-size:22px;line-height:28px}
  .gb-hub-head p{display:none}

  .gb-hub-ways{gap:12px;padding-block:14px 24px}
  .gb-way{position:relative;min-height:0;padding:20px;overflow:hidden}
  .gb-way__words{gap:10px}
  .gb-way .gb-kicker{font-size:11px;gap:10px}
  .gb-way .gb-kicker::before{width:24px}
  .gb-way h2{font-size:24px;line-height:30px}
  .gb-way__lede{font-size:13px;line-height:18px}
  .gb-way__go{align-self:stretch;margin-top:6px}
  .gb-way__art--box{display:none}
  .gb-way__art--fan{position:absolute;right:14px;top:16px;width:110px;height:120px}
  .gb-way--binder :is(.gb-kicker, h2, .gb-way__lede){max-width:calc(100% - 120px)}
  .gb-way__card{width:68px;height:96px;border-radius:5px}
  .gb-way__card:nth-child(1){left:0;top:6px}
  .gb-way__card:nth-child(2){left:36px;top:14px;transform:rotate(6deg)}
  .gb-way__card:nth-child(3){display:none}

  .gb-hub-landed{padding:24px 0 8px}
  .gb-hub-landed__head{align-items:center}
  .gb-hub-landed__head .gb-kicker{display:none}
  .gb-hub-landed .gb-carousel .wc-block-product-template{gap:.75rem !important}
  .gb-hub-landed .gb-carousel .wc-block-product-template > .wc-block-product{flex-basis:200px !important}

  .gb-hub-about{padding-block:24px}

  .gb-hub-alerts__inner{flex-direction:column;align-items:stretch;gap:16px;min-height:0;padding-block:24px}
  .gb-hub-alerts h2{font-size:24px;line-height:30px}
  .gb-hub-alerts p{font-size:14px;line-height:20px;margin-top:8px}
  .gb-hub-alerts .gb-button{min-height:48px;font-size:15px}
}