/* ==========================================================================
   BAR3AM — Section: skills (Future Skills / 6 program cards)
   Figma node 2475:2201 — "Future Skills Section"  (1280 canvas)
   Depends on tokens.css + base.css (.container .section .sec-head .reveal …)

   NOTE ON DIRECTION: Figma reports this section with *physical* insets — the
   icon badge sits at `right: 13.33px`, the card text is right-aligned and the
   eyebrow rule sits to the right of its label. The page runs `direction: rtl`,
   where physical right IS the inline-START. So every one of those maps to
   `inline-start` / `flex-start` / `text-align: start` below, which reproduces
   the Figma render exactly while staying logical-property clean.
   ========================================================================== */

.skills {
  background: var(--c-card);
  padding-block: 30px; /* Figma: py-30 */
}

/* Figma's Programs Row is 1152px inside the 1280 canvas (64px gutters), i.e.
   the full `--container` width with NO inner padding. `.container` would eat
   24px a side and shrink every card by 8px, so this section carries its own
   wrapper: exact at >=1200, with 24px breathing room below that. */
.skills__inner {
  inline-size: min(100% - 48px, var(--container));
  margin-inline: auto;
}

/* ---- Section head ------------------------------------------------------- */
/* Figma stacks eyebrow / title / subtitle / row with a uniform 14px gap. */
.skills .sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-block-end: 14px;
  text-align: center;
}

/* Figma puts the 24px rule on the INLINE-START side of the label (physically
   right) and paints it primary blue, not green — `row-reverse` flips the
   shared `::after` across without touching base.css. */
.skills .eyebrow {
  flex-direction: row-reverse;
  gap: 14px;
  block-size: 15px;
  margin-block-end: 0;
  line-height: 1.2;
  color: var(--c-text);
}
.skills .eyebrow::after {
  block-size: 3px;
  background: var(--c-primary);
}

/* Figma title is 26px (shared `.sec-title` is 24px) and two-tone. */
.skills .sec-title {
  font-size: 26px;
  line-height: 1.2;
}
.skills__accent { color: var(--c-primary); }

/* Figma subtitle is 16px Medium and sits on one line at 1280, so the shared
   730px clamp has to go. */
.skills .sec-sub {
  max-inline-size: none;
  margin-block-start: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

/* ---- Cards row ---------------------------------------------------------- */
/* Row is 276px tall around 255px cards in Figma — `align-content: start`
   keeps that 21px of slack below the cards instead of stretching them. */
.skills__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: stretch;
  align-content: start;
  min-block-size: 276px;
}

/* ---- One rule for all six cards; tint / accent / link ink / gradient mix
        come from the inline --card-* custom properties -------------------- */
.skills__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 255px;
  overflow: hidden;
  background: var(--c-card);
  border-radius: 10px;
  /* Figma's 1px stroke is drawn INSIDE the 255x180.333 box. A real CSS border
     would add 2px to the card and steal 2px from the text column, so the
     stroke is painted as an inset ring that costs no layout space. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1),
              0 4px 4px rgba(0, 0, 0, 0.17);
  /* opacity is kept slow so the shared .reveal fade-in still reads correctly,
     since this rule wins over .reveal's own transition declaration */
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              opacity var(--dur-slow) var(--ease);
}

.skills__card:hover,
.skills__card:focus-within {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px var(--card-accent),
              0 10px 18px rgba(0, 0, 0, 0.17);
}

/* ---- Tinted header block with the faint ghost icon ---------------------- */
/* Figma: linear-gradient(148.62deg, <tint> 0%, <tint+accent> 71.429%).
   The end stop is the tile token carrying --card-mix of its own accent, which
   lands within ~3/255 per channel of Figma's literal stops. */
.skills__top {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  block-size: 110px;
  overflow: hidden;
  background: linear-gradient(
    148.62deg,
    var(--card-tint) 0%,
    color-mix(in srgb, var(--card-accent) var(--card-mix), var(--card-tint)) 71.429%
  );
}

/* Figma's ghost icon is white at ~55% over the gradient, not an accent tint. */
.skills__ghost {
  inline-size: 46px;
  block-size: 46px;
  color: var(--c-text-on-dark);
  opacity: 0.55;
  transition: transform var(--dur) var(--ease);
}

.skills__card:hover .skills__ghost { transform: scale(1.08); }

/* ---- Accent icon badge, pinned to the inline-start, straddling the tint --- */
.skills__badge {
  position: absolute;
  /* Figma: circle occupies x 120..166 / y 87..133 of the 180.333x255 card, i.e.
     14.33px in from the card's physical right edge — which in RTL is the
     inline START. (The design context reports 13.33/86 because it measures
     from inside the 1px stroke, which no longer takes up space here.) */
  inset-block-start: 87px;
  inset-inline-start: 14.33px;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--r-pill);
  background: var(--card-accent);
  border: 3px solid var(--c-card);
  color: var(--c-text-on-dark);
  transition: transform var(--dur) var(--ease);
}

.skills__card:hover .skills__badge { transform: scale(1.06); }

.skills__icon {
  inline-size: 22px;
  block-size: 22px;
}

/* ---- Body --------------------------------------------------------------- */
/* Figma: px-14, pt-30 (clears the badge), pb-16, 6px gap, END-of-card aligned
   which in RTL is the inline START. */
.skills__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  padding-inline: 14px;
  padding-block: 30px 16px;
  text-align: start;
}

.skills__title {
  font-size: var(--fs-body); /* Figma: 16px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--c-text);
}

.skills__text {
  inline-size: 100%;
  font-size: 13px;
  line-height: 1.23;
  color: var(--c-text-2);
}

/* ---- "سجل الأن" link ---------------------------------------------------- */
/* `margin-block-start: auto` keeps the six links on one baseline the way the
   Figma frame does with hand-padded copy — without copying the <br><br> hack. */
.skills__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: auto;
  padding-block-start: 4px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  line-height: 1.23;
  color: var(--card-ink);
  transition: opacity var(--dur-fast) var(--ease);
}

.skills__link:hover { opacity: 0.82; }

/* arrow follows the text in the DOM, so RTL renders it on the far side —
   pointing toward the inline end, exactly as in Figma */
.skills__arrow {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.skills__link:hover .skills__arrow,
.skills__card:hover .skills__arrow { transform: translateX(-4px); }

/* ---- Responsive (no Figma breakpoints — 6 → 3 → 2 → 1) ------------------ */
@media (max-width: 1152px) {
  .skills__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (max-width: 820px) {
  .skills__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .skills__grid { grid-template-columns: 1fr; min-block-size: 0; }
  .skills .sec-title { font-size: var(--fs-h2); }
}

@media (prefers-reduced-motion: reduce) {
  .skills__card:hover { transform: none; }
}