/**
 * Albion Craft Pro — hubs unifiés (Phase 9.4)
 * Accueil, calculateurs, outils : même grille de cartes.
 */

.hub-page {
  max-width: 980px;
  margin: 0 auto;
}

.hub-page--home {
  max-width: 1080px;
}

/* Hero */
.hub-hero {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(155deg, rgba(26, 35, 50, .95) 0%, rgba(15, 20, 25, .6) 100%);
  border: 1px solid rgba(201, 162, 39, .22);
  box-shadow: var(--shadow-md);
}

.hub-hero-badge {
  display: inline-block;
  margin-bottom: .85rem;
  padding: .28rem .75rem;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid rgba(62, 207, 142, .35);
}

.hub-hero h1 {
  margin: 0 0 .65rem;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.15;
  color: var(--text);
}

.hub-hero-lead {
  margin: 0 auto 1.1rem;
  max-width: 620px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

.hub-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.hub-server-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border-radius: var(--radius-pill);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--border);
}

.hub-server-pill::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(62, 207, 142, .55);
}

.hub-server-link {
  font-size: .82rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hub-server-link:hover { color: var(--accent); }

/* Sections */
.hub-section { margin-bottom: 2rem; }

.hub-section-head { margin-bottom: 1rem; }

.hub-section-head h2 {
  margin: 0 0 .3rem;
  font-size: 1.15rem;
  letter-spacing: .01em;
  color: var(--text);
}

.hub-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}

.home-section .hub-section-head h2 {
  font-size: 1.45rem;
  text-align: center;
}

.home-section .hub-section-head p {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

/* Grille cartes */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.hub-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hub-grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
}

/* Carte hub */
.hub-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 1.2rem 1.25rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(26, 35, 50, .98) 0%, rgba(20, 28, 40, .92) 100%);
  color: var(--text);
  position: relative;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}

.hub-card:hover {
  border-color: rgba(201, 162, 39, .45);
  color: var(--text);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.hub-card.is-featured {
  border-color: rgba(201, 162, 39, .55);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .12) inset;
}

.hub-card.is-locked {
  opacity: .88;
  border-style: dashed;
}

.hub-card.is-locked:hover {
  opacity: 1;
  border-color: var(--accent);
}

.hub-card-badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  font-size: .68rem;
  font-weight: 700;
  padding: .18rem .5rem;
  border-radius: var(--radius-sm);
  letter-spacing: .02em;
}

.hub-card-badge-essential {
  background: var(--pro-blue-soft);
  color: #9ec9ff;
  border: 1px solid rgba(124, 184, 255, .35);
}

.hub-card-badge-pro {
  background: var(--accent);
  color: #111;
  border: none;
}

.hub-card-top {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: .6rem;
}

.hub-card-icon {
  position: relative;
  flex-shrink: 0;
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  background: transparent;
  color: var(--accent);
}

.hub-card-icon > img,
.hub-card-icon > .calc-hub-item-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.hub-card-icon-craft,
.hub-card-icon-refine,
.hub-card-icon-farm,
.hub-card-icon-consumable,
.hub-card-icon-breeding,
.hub-card-icon-top,
.hub-card-icon-repair,
.hub-card-icon-ip,
.hub-card-icon-builds,
.hub-card-icon-ency {
  background: transparent;
}

.hub-card-lock {
  position: absolute;
  right: -.35rem;
  bottom: -.35rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-card-lock svg { width: .75rem; height: .75rem; }

.hub-card.is-locked .hub-card-icon { opacity: .75; }

.hub-card h3 {
  margin: .15rem 0 0;
  font-size: 1.06rem;
  line-height: 1.25;
  flex: 1;
}

.hub-card-desc {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.48;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hub-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.hub-card-tags li span {
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: var(--radius-pill);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(154, 168, 188, .18);
}

.hub-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: auto;
  padding-top: .85rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--accent);
}

.hub-card-cta::after {
  content: "→";
  transition: transform .15s;
}

.hub-card:hover .hub-card-cta::after {
  transform: translateX(3px);
}

/* Panel « comment ça marche » */
.hub-how-panel {
  margin-top: .5rem;
  padding: 1.35rem 1.4rem 1.2rem;
  border-radius: var(--radius);
  background: rgba(26, 35, 50, .55);
  border: 1px solid var(--border);
}

.hub-how-panel h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  text-align: center;
  color: var(--text);
}

.hub-how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.hub-how-steps li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.hub-step-num {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: .82rem;
}

.hub-how-steps strong {
  display: block;
  margin-bottom: .15rem;
  font-size: .88rem;
  line-height: 1.3;
}

.hub-how-steps p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 900px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-how-steps { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hub-grid,
  .hub-grid--compact,
  .hub-grid--single {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .hub-card {
    min-height: 0;
    padding: 1rem 1.05rem .95rem;
  }

  .hub-card-desc {
    -webkit-line-clamp: 2;
  }

  .hub-hero {
    padding: 1.35rem 1rem 1.15rem;
    margin-bottom: 1.5rem;
  }

  .home-section .hub-section-head h2 {
    font-size: 1.25rem;
  }
}

/* Alias legacy — calculateurs existants */
.calc-cards-v3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.calc-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; color: var(--text); position: relative; transition: border-color .2s; }
.calc-card:hover { border-color: var(--accent); color: var(--text); }

@media (max-width: 900px) {
  .calc-cards-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .calc-cards-v3 { grid-template-columns: 1fr; }
}