/* Red Planet Apps: shared styles for the home chooser and the Learn / Games hubs (v1.0.0) */

/* ---------- Home: two doors ---------- */
.choose-hero { text-align:center; padding:3.2rem 1rem 0; max-width:900px; margin:0 auto; }
.choose-eyebrow { font-family:'JetBrains Mono',monospace; font-size:.78rem; letter-spacing:.22em; color:var(--color-secondary); margin-bottom:1rem; }
.choose-hero .title { margin-bottom:1rem; }
.choose-hero .subtitle { max-width:640px; margin:0 auto; }
.doors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.9rem; max-width:1100px; margin:2.6rem auto 1rem; padding:0 .5rem; }
.door { position:relative; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; text-decoration:none; color:#fff;
        background:var(--door-bg); border:1px solid var(--door-border); box-shadow:0 14px 40px rgba(0,0,0,.45);
        transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
.door:hover, .door:focus-visible { transform:translateY(-7px); border-color:var(--door-accent); box-shadow:0 24px 60px var(--door-glow); outline:none; }
.door-art { position:relative; height:220px; overflow:hidden; }
.door-art img { width:100%; height:100%; object-fit:cover; object-position:center 22%; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.door:hover .door-art img { transform:scale(1.06); }
.door-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, var(--door-bg) 100%); }
.door-art-learn { background:linear-gradient(135deg,#0a2a33,#07131f); }
.door-art-learn .door-glyph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:5.2rem; z-index:1; filter:drop-shadow(0 0 22px rgba(86,228,216,.55)); }
.door-body { display:flex; flex-direction:column; gap:.85rem; padding:.4rem 1.9rem 2rem; flex:1; }
.door-kicker { font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.16em; color:var(--door-accent); }
.door h2 { font-size:clamp(2.1rem,4vw,2.9rem); line-height:1.05; font-weight:800; margin:0; }
.door p { color:#c9cfd6; line-height:1.6; font-size:1.02rem; margin:0; }
.door-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }
.door-tag { padding:.28rem .8rem; border-radius:999px; border:1px solid var(--door-border); font-size:.82rem; color:var(--door-accent); background:rgba(255,255,255,.03); }
.door-cta { margin-top:auto; padding-top:.6rem; }
.door-cta span { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:12px; font-weight:700; background:var(--door-accent); color:var(--door-ink); transition:gap .25s, filter .25s; }
.door:hover .door-cta span { gap:.9rem; filter:brightness(1.08); }
.door-note { font-size:.8rem; color:#9aa1a8; }
.door-learn { --door-bg:#0b1d2b; --door-border:rgba(86,228,216,.32); --door-accent:#56e4d8; --door-ink:#04141a; --door-glow:rgba(86,228,216,.24); }
.door-games { --door-bg:#180a0d; --door-border:rgba(255,92,72,.36); --door-accent:#ff5a47; --door-ink:#fff; --door-glow:rgba(255,64,40,.28); }
.choose-about { max-width:760px; margin:3.2rem auto 0; text-align:center; padding:0 1rem; }
.choose-about .section-title { margin-bottom:1rem; }
.choose-about p { color:var(--color-text-muted); line-height:1.7; font-size:1.05rem; }
.subscribe-interest { margin:.2rem 0 .9rem; display:flex; justify-content:center; }
.subscribe-interest select { background:rgba(255,255,255,.06); color:#fff; border:1px solid var(--color-glass-border); border-radius:10px; padding:.7rem 1rem; font:inherit; min-width:260px; }
.subscribe-interest select option { color:#111; }

/* ---------- Hubs ---------- */
.hub-hero { text-align:center; padding:2.2rem 1rem .5rem; max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.hub-badge { display:inline-flex; align-items:center; gap:.55rem; padding:.4rem 1rem; border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:.76rem; letter-spacing:.14em;
             color:var(--color-primary); border:1px solid var(--color-glass-border); background:rgba(255,255,255,.04); }
.hub-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--color-primary); box-shadow:0 0 10px var(--color-primary); }
.hub-hero .subtitle { max-width:680px; }
.hub-shelf { margin:3rem auto 0; max-width:1240px; }
.shelf-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem 1.1rem; margin:0 .4rem 1.3rem; padding-bottom:.8rem; border-bottom:1px solid var(--color-glass-border); }
.shelf-head h2 { font-size:1.6rem; font-weight:800; margin:0; }
.shelf-head p { color:var(--color-text-muted); margin:0; font-size:.98rem; }
.shelf-head .shelf-icon { font-size:1.5rem; }
.hub-shelf-single .portfolio-grid { grid-template-columns:minmax(0,620px); justify-content:center; }
.hub-shelf-trio .portfolio-grid > :last-child:nth-child(3) { grid-column:1 / -1; width:calc(50% - 15px); justify-self:center; }
@media (max-width:900px) { .hub-shelf-trio .portfolio-grid > :last-child:nth-child(3) { width:auto; } }
.hub-note { max-width:860px; margin:3rem auto 0; padding:1.2rem 1.5rem; border:1px solid var(--color-glass-border); border-radius:14px; background:rgba(255,255,255,.03); color:var(--color-text-muted); font-size:.95rem; line-height:1.6; text-align:center; }
.hub-note strong { color:#fff; }
.app-breadcrumbs-margin { margin-top:1.2rem; }

@media (max-width:820px) {
  .doors { grid-template-columns:1fr; gap:1.4rem; }
  .door-art { height:170px; }
  .door-body { padding:.3rem 1.4rem 1.6rem; }
}
@media (prefers-reduced-motion:reduce) {
  .door, .door-art img, .door-cta span { transition:none; }
  .door:hover { transform:none; }
}