/* ─────────────────────────────────────────────────────────────
   OSUS Homepage — Community-first Products Showcase (.hpc)
   Replaces the old filter-tabs + large product-card grid.
   Community-first: pick a community → its logo slides to the
   inline-start, its products preview on the inline-end. One CTA
   per community leads to that community's dedicated page.
   Unified light homepage atmosphere (transparent — no dark block).
   Fully RTL/LTR via logical properties. Respects reduced-motion.
   ───────────────────────────────────────────────────────────── */

.hpc { margin-top: clamp(2.5rem, 5vw, 4rem); position: relative; }

/* ── Initial state: 4 community tiles ─────────────────────────── */
.hpc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  max-width: 1040px;
  margin-inline: auto;
}
.hpc__tile {
  --hpc-c: var(--sage); --hpc-deep: #2a6a65; --hpc-rgb: 145,185,180;
  display: flex; flex-direction: column; align-items: center; gap: clamp(0.7rem, 1.4vw, 1rem);
  text-align: center;
  padding: 0.5rem 0.25rem;
  background: none; border: none; border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
/* Circular logo container — clean light surface, subtle border, very soft shadow */
.hpc__tile-logo {
  width: clamp(104px, 11.5vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid rgba(15,40,55,0.07);
  box-shadow: 0 8px 24px rgba(15,40,55,0.06);
  transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.3s, border-color 0.3s;
}
.hpc__tile-logo img { width: 60%; height: 60%; object-fit: contain; }
.hpc__tile:hover .hpc__tile-logo,
.hpc__tile:focus-visible .hpc__tile-logo {
  transform: translateY(-5px);
  border-color: rgba(var(--hpc-rgb),0.55);
  box-shadow: 0 16px 38px rgba(var(--hpc-rgb),0.24);
}
.hpc__tile:focus-visible { outline: none; }
.hpc__tile:focus-visible .hpc__tile-logo { outline: 2px solid var(--hpc-c); outline-offset: 3px; }
.hpc__tile-name { font-size: clamp(0.98rem, 1.4vw, 1.12rem); font-weight: 800; color: var(--hpc-deep); line-height: 1.35; }
.hpc__tile-count { display: block; margin-top: 0.2rem; font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary, #7a909a); }

/* ── Selected state: stage (aside + products) ─────────────────── */
.hpc__stage {
  --hpc-c: var(--sage); --hpc-deep: #2a6a65; --hpc-rgb: 145,185,180;
  display: grid;
  grid-template-columns: minmax(250px, 300px) 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
.hpc__stage[hidden] { display: none; }

/* Left aside — centered on one vertical axis (logo → name → desc → nav) */
.hpc__aside { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hpc__logo {
  width: clamp(88px, 12vw, 112px); height: clamp(88px, 12vw, 112px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 2px solid rgba(var(--hpc-rgb),0.45);
  box-shadow: 0 10px 34px rgba(var(--hpc-rgb),0.18);
  margin-bottom: 1.4rem;
}
.hpc__logo img { width: 58%; height: 58%; object-fit: contain; }
.hpc__name { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 900; color: var(--hpc-deep); line-height: 1.25; margin-bottom: 0.7rem; }
.hpc__desc { font-size: 0.95rem; color: var(--text-secondary, #4a6070); line-height: 1.8; margin-bottom: 1.5rem; max-width: 34ch; margin-inline: auto; }

/* Right main column — products, with the CTA centered beneath them */
.hpc__main { display: flex; flex-direction: column; }
.hpc__main .hpc__cta { align-self: center; margin-top: clamp(2rem, 4.5vw, 3.25rem); }

/* Prev / next community nav */
.hpc__nav { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0; }
.hpc__arrow {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--hpc-rgb),0.10);
  border: 1.5px solid rgba(var(--hpc-rgb),0.4);
  color: var(--hpc-deep);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.hpc__arrow:hover { background: rgba(var(--hpc-rgb),0.2); transform: translateY(-2px); }
.hpc__arrow svg { width: 16px; height: 16px; }
:root[dir="rtl"] .hpc__nav svg,
[dir="rtl"] .hpc__nav svg { transform: scaleX(-1); }
.hpc__count { font-size: 0.82rem; font-weight: 700; color: var(--text-tertiary, #7a909a); letter-spacing: 0.02em; }

/* Community CTA */
.hpc__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.9rem; border-radius: 100px;
  background: var(--hpc-deep); color: #fff;
  font-weight: 800; font-size: 0.95rem; text-decoration: none;
  box-shadow: 0 6px 20px rgba(var(--hpc-rgb),0.28), 0 0 30px rgba(var(--hpc-rgb),0.20);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.hpc__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(var(--hpc-rgb),0.38), 0 0 40px rgba(var(--hpc-rgb),0.30); filter: brightness(1.06); }
.hpc__cta svg { width: 16px; height: 16px; }
[dir="rtl"] .hpc__cta svg { transform: scaleX(-1); }

/* Right products preview — premium square-ish product tiles */
.hpc__products { display: grid; gap: clamp(0.9rem, 1.6vw, 1.25rem); }
.hpc__products[data-count="1"] { grid-template-columns: 1fr; }
.hpc__products[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.hpc__products[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

.hpc-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  text-decoration: none;   /* card is now a link — keep its typography, no underline */
  color: inherit;
  cursor: pointer;
  background: rgba(255,255,255,0.66);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(15,40,55,0.07);
  border-radius: 18px;
  padding: 1.7rem 1.15rem 1.5rem;
  transition: transform 0.24s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.24s, border-color 0.24s;
}
.hpc-prod:hover { transform: translateY(-4px); border-color: rgba(var(--hpc-rgb),0.35); box-shadow: 0 14px 34px rgba(15,40,55,0.10); }
/* Logo — large, box-free, sits directly in the tile */
.hpc-prod__logo {
  width: clamp(64px, 13vw, 82px);
  height: clamp(64px, 13vw, 82px);
  display: grid; place-items: center;
  margin-bottom: 0.15rem;
}
.hpc-prod__logo img { width: 100%; height: 100%; object-fit: contain; }
/* Status — small chip pinned to the top corner */
.hpc-prod__status {
  position: absolute; top: 0.7rem; inset-inline-end: 0.7rem;
  font-size: 0.62rem; font-weight: 800; padding: 0.18rem 0.55rem;
  border-radius: 100px; white-space: nowrap; letter-spacing: 0.01em;
}
.hpc-prod__status--open     { background: rgba(145,185,180,0.18); color: #2a6a65; }
.hpc-prod__status--upcoming { background: rgba(var(--hpc-rgb),0.14); color: var(--hpc-deep); }
.hpc-prod__text { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.hpc-prod__name { font-size: 1.02rem; font-weight: 800; color: var(--navy, #0F2837); letter-spacing: -0.01em; }
.hpc-prod__sub { font-size: 0.8rem; color: var(--text-secondary, #5a7080); line-height: 1.55; max-width: 24ch; }

/* Single-product community — one wide, featured horizontal card */
.hpc__products[data-count="1"] .hpc-prod {
  flex-direction: row;
  align-items: center;
  text-align: start;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.6rem, 3.5vw, 2.5rem);
}
.hpc__products[data-count="1"] .hpc-prod__logo { width: clamp(84px, 13vw, 104px); height: clamp(84px, 13vw, 104px); margin-bottom: 0; }
.hpc__products[data-count="1"] .hpc-prod__text { align-items: flex-start; text-align: start; gap: 0.4rem; }
.hpc__products[data-count="1"] .hpc-prod__name { font-size: 1.25rem; }
.hpc__products[data-count="1"] .hpc-prod__sub { max-width: 48ch; font-size: 0.86rem; }

/* ── Reveal animations ────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hpc__tile { opacity: 0; transform: translateY(20px); }
  .hpc__tile.is-in { opacity: 1; transform: none; }
  .hpc__tile:nth-child(1).is-in { transition-delay: 0s; }
  .hpc__tile:nth-child(2).is-in { transition-delay: 0.12s; }
  .hpc__tile:nth-child(3).is-in { transition-delay: 0.24s; }
  .hpc__tile:nth-child(4).is-in { transition-delay: 0.36s; }

  /* Selected-state SEQUENTIAL reveal (after the shared logo lands via the flight):
     logo → name → desc → nav → (products, JS-staggered) → cta.
     The aside no longer slides in from the side; each element eases up in order. */
  .hpc__logo { opacity: 0; transform: scale(0.9);      transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22,0.61,0.36,1); }
  .hpc__name { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.61,0.36,1); }
  .hpc__desc { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.61,0.36,1); }
  .hpc__nav  { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.61,0.36,1); }
  .hpc__stage.is-in .hpc__logo { opacity: 1; transform: none; }
  .hpc__stage.is-in .hpc__name { opacity: 1; transform: none; transition-delay: 0.12s; }
  .hpc__stage.is-in .hpc__desc { opacity: 1; transform: none; transition-delay: 0.22s; }
  .hpc__stage.is-in .hpc__nav  { opacity: 1; transform: none; transition-delay: 0.32s; }

  .hpc-prod { opacity: 0; transform: translateY(14px); }
  .hpc-prod.is-in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.61,0.36,1); }

  .hpc__cta { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.2s, filter 0.2s; }
  .hpc__stage.is-in .hpc__cta { opacity: 1; transform: none; transition-delay: 0.42s; }
}
@media (prefers-reduced-motion: reduce) {
  .hpc__tile, .hpc__aside, .hpc__logo, .hpc__name, .hpc__desc, .hpc__nav, .hpc-prod, .hpc__cta { opacity: 1 !important; transform: none !important; }
}

/* Shared-element flight clone — the selected community logo travelling from its
   overview tile position into the selected-state aside logo position (JS-driven). */
.hpc-fly {
  position: fixed;
  z-index: 55;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid rgba(15,40,55,0.10);
  box-shadow: 0 12px 32px rgba(15,40,55,0.14);
  pointer-events: none;
  will-change: transform;
}
.hpc-fly img { width: 58%; height: 58%; object-fit: contain; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hpc__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); max-width: 540px; }
  .hpc__stage { grid-template-columns: 1fr; gap: 1.75rem; }
  .hpc__aside { text-align: center; }
  .hpc__logo { margin-inline: auto; }
  .hpc__desc { margin-inline: auto; }
  .hpc__nav { justify-content: center; }
  .hpc__products[data-count="1"] { justify-content: center; }
  .hpc__products[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .hpc__grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .hpc__tile { flex-direction: column; text-align: center; gap: 0.7rem; }
  .hpc__products[data-count="2"],
  .hpc__products[data-count="3"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  /* Single-product card stacks vertically on small phones */
  .hpc__products[data-count="1"] .hpc-prod { flex-direction: column; text-align: center; }
  .hpc__products[data-count="1"] .hpc-prod__logo { margin-bottom: 0.15rem; }
  .hpc__products[data-count="1"] .hpc-prod__text { align-items: center; text-align: center; }
}
@media (max-width: 420px) {
  .hpc__products[data-count="2"],
  .hpc__products[data-count="3"] { grid-template-columns: 1fr; }
}
/* Communities circles: single column only on very small screens */
@media (max-width: 360px) {
  .hpc__grid { grid-template-columns: 1fr; max-width: 220px; }
}