/* ==========================================================================
   BAR3AM — Section: dev (مرحلة تطوير شاملة / 5 development pillars)
   Depends on tokens.css + base.css (.container .section .section--bg
   .sec-head .eyebrow .sec-title .deco .reveal …)

   The flagship band of the page, so it is the only section that carries an
   ambient wash: three token-tinted radial blooms sit behind a light `--c-bg`
   field, and each card is themed from ONE inline custom property
   (`--dev-accent`) rotating primary → orange → pink. Every accent surface —
   tile gradient, halo, glow, hover ring, bottom rule — is derived from that
   single value with color-mix, so the five cards share one rule set.

   DIRECTION: the page runs `direction: rtl`. Everything below is written in
   logical properties, so the ghost watermark that reads "top outer corner"
   lands physically LEFT here and would flip cleanly in an LTR context.
   ========================================================================== */

.dev {
  position: relative;
  /* Taller than the shared 64px band — this section has to feel like the
     centre of gravity of the page. */
  padding-block: clamp(56px, 6vw, 88px);
  /* base.css clips the bleed of the sections it knows about; `dev` is new, so
     it contains its own decorative overflow. `clip` (not `hidden`) keeps the
     section from becoming a scroll container. */
  overflow: clip;
}

/* ---- Ambient background blooms ----------------------------------------- */
/* `.deco` (base.css) already supplies position/round/pointer-events. Radial
   gradients instead of `filter: blur()` — same softness, no paint cost. */
.dev__deco {
  z-index: 0;
  opacity: 0.9;
}

.dev__deco--a {
  inline-size: clamp(280px, 38vw, 460px);
  block-size: clamp(280px, 38vw, 460px);
  inset-block-start: -22%;
  inset-inline-start: -12%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--c-primary) 20%, transparent) 0%,
    transparent 68%
  );
}

.dev__deco--b {
  inline-size: clamp(240px, 32vw, 400px);
  block-size: clamp(240px, 32vw, 400px);
  inset-block-end: -24%;
  inset-inline-end: -10%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--c-yellow-fig) 18%, transparent) 0%,
    transparent 68%
  );
}

.dev__deco--c {
  inline-size: clamp(180px, 22vw, 300px);
  block-size: clamp(180px, 22vw, 300px);
  inset-block-start: 8%;
  inset-inline-end: 16%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--c-green-fig) 14%, transparent) 0%,
    transparent 70%
  );
}

/* Content rides above the blooms. */
.dev__wrap {
  position: relative;
  z-index: 1;
}

/* ---- Section head ------------------------------------------------------- */
.dev .sec-head {
  margin-block-end: clamp(28px, 3.4vw, 46px);
}

/* RTL inline-flex: ::before sits on the RIGHT (reading-start), ::after on the
   LEFT.  The dash belongs on the right to match the page's RTL flow. */
.dev .eyebrow {
  color: var(--c-primary);
  margin-block-end: 12px;
}
.dev .eyebrow::before {
  content: "";
  inline-size: 24px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--c-primary);
}
.dev .eyebrow::after {
  display: none;
}

/* The page's second-loudest headline after the hero. */
.dev .sec-title {
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.3;
  text-wrap: balance;
}
.dev__accent { color: var(--c-primary); }

/* ---- Grid: 4 → 3 → 2 → 1 ------------------------------------------------ */
.dev__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.5vw, 20px);
  align-items: stretch;
}

/* ---- Card --------------------------------------------------------------- */
/* One rule for all four; the inline `--dev-accent` does the theming. */
.dev__card {
  position: relative;
  /* own stacking context so the z-index:-1 watermark stays above the card
     background instead of falling behind the section */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-block-size: 214px;
  padding-block: 30px 22px;
  padding-inline: 16px;
  text-align: center;
  overflow: hidden;
  background: var(--c-card);
  border-radius: var(--r-xl);
  /* inset ring instead of a real border: no 2px stolen from the text column */
  box-shadow: inset 0 0 0 1px var(--c-line), var(--sh-sm);
  /* opacity is kept on the slow curve so the shared `.reveal` fade still reads
     correctly — this declaration wins over `.reveal`'s own transition */
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              opacity var(--dur-slow) var(--ease);
}

/* Accent bar that wipes across the top edge on hover. */
.dev__card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: linear-gradient(90deg, transparent, var(--dev-accent), transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%; /* symmetric wipe — direction-agnostic */
  transition: transform var(--dur) var(--ease);
}

.dev__card:hover,
.dev__card:focus-within {
  transform: translateY(-8px);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dev-accent) 55%, transparent),
              0 18px 38px color-mix(in srgb, var(--dev-accent) 24%, transparent);
}

.dev__card:hover::before,
.dev__card:focus-within::before { transform: scaleX(1); }

/* ---- Oversized watermark of the same glyph ------------------------------ */
.dev__ghost {
  position: absolute;
  z-index: -1;
  inset-block-start: -16px;
  inset-inline-end: -16px;
  inline-size: 104px;
  block-size: 104px;
  color: var(--dev-accent);
  opacity: 0.08;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.dev__card:hover .dev__ghost {
  opacity: 0.14;
  transform: scale(1.08) rotate(-6deg);
}

/* ---- Icon tile ---------------------------------------------------------- */
.dev__tile {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--r-lg);
  background: linear-gradient(
    148deg,
    color-mix(in srgb, var(--dev-accent) 76%, var(--c-card)) 0%,
    var(--dev-accent) 100%
  );
  color: var(--c-text-on-dark);
  /* drop glow + soft accent halo ring, both derived from the same accent */
  box-shadow: 0 10px 20px color-mix(in srgb, var(--dev-accent) 32%, transparent),
              0 0 0 6px color-mix(in srgb, var(--dev-accent) 10%, transparent);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.dev__card:hover .dev__tile,
.dev__card:focus-within .dev__tile {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--dev-accent) 40%, transparent),
              0 0 0 11px color-mix(in srgb, var(--dev-accent) 12%, transparent);
}

.dev__icon {
  inline-size: 32px;
  block-size: 32px;
}

/* ---- Title -------------------------------------------------------------- */
.dev__title {
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  color: var(--c-text);
  text-wrap: balance;
}

/* ---- Bottom accent rule ------------------------------------------------- */
/* `margin-block-start: auto` parks it on the card floor, so the five rules
   share one baseline however many lines each title wraps to. */
.dev__rule {
  display: block;
  margin-block-start: auto;
  inline-size: 26px;
  block-size: 3px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--dev-accent) 45%, var(--c-line));
  transition: inline-size var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.dev__card:hover .dev__rule,
.dev__card:focus-within .dev__rule {
  inline-size: 54px;
  background: var(--dev-accent);
}

/* ---- Responsive --------------------------------------------------------- */
/* 3-up. Six tracks with each card spanning two lets the orphan row of two be
   centred (card 4 starts on track 2) instead of hugging the inline start. */
@media (max-width: 1152px) {
  .dev__grid { grid-template-columns: repeat(6, 1fr); }
  .dev__card { grid-column: span 2; }
  .dev__card:nth-child(4) { grid-column-start: 3; }
}

/* 2-up. Four cards fill two whole rows, so there is no orphan left to centre. */
@media (max-width: 820px) {
  .dev__grid { grid-template-columns: repeat(2, 1fr); }
  .dev__card,
  .dev__card:nth-child(4) { grid-column: auto; }
}

@media (max-width: 480px) {
  .dev__grid { grid-template-columns: 1fr; }
  .dev__card,
  .dev__card:nth-child(4) {
    grid-column: auto;
    min-block-size: 0;
  }
  .dev__card { padding-block: 26px 20px; }
  .dev__ghost { inline-size: 88px; block-size: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .dev__card:hover,
  .dev__card:focus-within { transform: none; }
  .dev__card:hover .dev__tile,
  .dev__card:focus-within .dev__tile { transform: none; }
  .dev__card:hover .dev__ghost { transform: none; }
}