/* =========================================================
   Component — Plan card and the billing switch

   Promoted out of pages/pricing.css when the home page needed the
   same four cards under its own heading (م15). Two pages showing
   the same prices in two different cards is how a table and a page
   start disagreeing about what a plan costs, and the constitution
   (§4.2) says the second use is the moment to lift.

   The switch is a segmented control and the prices are both already
   in the markup — see the note on the [data-cycle] rule below — so
   nothing here writes a number and a visitor with JavaScript off
   still reads a complete monthly page.
   ========================================================= */

/* ---------------------------------------------------------
   Cycle switch

   A segmented control, not a toggle switch: two written words
   beat a slider whose left and right have to be learned — and
   in RTL a slider's direction is a coin toss.
   --------------------------------------------------------- */
.pr-cycle {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}

.pr-cycle__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.pr-cycle__btn:hover { color: var(--color-text); }
.pr-cycle__btn.is-on {
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.pr-cycle__save { padding-block: 2px; }

/* ---------------------------------------------------------
   Plan cards
   --------------------------------------------------------- */
/* stretch, not start. The tiers carry four, five and six features, so
   on `start` each card ended wherever its own list ran out and the row
   closed on a staircase — four different bottom edges under four price
   lines that are meant to be read across. Stretching costs a little
   white space inside the shorter cards and buys one baseline for the
   row, which is what makes it read as a comparison. */
.pr-plans__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

/* Three, when the free tier has been lifted out of the row and stood on
   its own. It is the shape the reference is drawn for, and the one the
   tuck below is honest in: with three cards the chosen tier really is
   the middle one, so the two beside it lean in symmetrically instead of
   shingling from one end. */
.pr-plans__grid--trio { grid-template-columns: repeat(3, 1fr); }

.pr-card {
  position: relative;
  gap: var(--space-2);
  height: 100%;
}

/* ---------------------------------------------------------
   The tier accent

   One colour per tier, taken in order off the mark's own ramp —
   blue at the foot, teal in the middle, brass at the top — and spent
   at three different strengths, which is the part that matters. Three
   equal accents would say "three equally special things" and delete
   the recommendation the row exists to make. So the entry tier gets a
   rule at its head and nothing else, the top tier gets the rule and a
   hairline, and the chosen one keeps the full border, the raised
   surface and the only filled button in the row.

   --tier is the single property all of that reads, so a tier's colour
   is set in one place and its badge, its rule and its border cannot
   drift apart.
   --------------------------------------------------------- */
/* overflow:hidden is a fix, not a style.

   The tier rule below is a 2px bar pinned to inset-block-start: 0 and
   stretched inset-inline: 0. The card is rounded; the bar is not, and
   nothing was clipping it — so it ran straight out to both top
   corners and squared them off, and the card read as having a
   straight top edge on rounded sides. The flag badge in the corner
   had the same problem and was carrying hand-written corner radii to
   hide it.

   Clipping to the border box fixes both at the source. */
.pr-card {
  --tier: transparent;
  overflow: hidden;
}

.pr-card--entry { --tier: var(--color-entry); }
.pr-card--featured {
  --tier: var(--color-growth);
  --card-border: var(--color-growth);
}
.pr-card--premium { --tier: var(--color-gold); }

/* The rule at the head of the card, in the tier's colour. It was the
   premium shell's alone; every tier carries one now, and .card--premium
   in card.css is left as it is because four other pages use its gold. */
.pr-card--entry::before,
.pr-card--featured::before,
.pr-card--premium::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--tier);
  opacity: 0.75;
}

/* The flag sits in the corner, inside the card.

   It used to hang above the top edge, which cost the premium shell its
   overflow clip (so the gold rule had to be inset by a corner radius to
   stop it escaping) and left a badge floating on the band with nothing
   under it. Inside the corner it is attached to the thing it labels,
   the clip goes back, and the rule can run edge to edge again.

   The corners are the tab's whole shape: the outer one follows the
   card's own radius and the inner one is rounded, the two along the
   card's edges square. */
.pr-card--premium { overflow: hidden; }

.pr-card__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 1;
  padding: 0.3rem 0.7rem;
  border-start-start-radius: 0;
  border-start-end-radius: calc(var(--radius-premium) - 1px);
  border-end-end-radius: 0;
  border-end-start-radius: var(--radius-md);
}

.pr-card__name {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-h4);
  color: var(--color-text);
}

.pr-card__pitch {
  margin: 0;
  min-height: 3.4em;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}

.pr-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.pr-card__cur {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}
.pr-card__amount {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-text);
}
.pr-card__per {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.pr-card__save {
  margin: var(--space-2) 0 0;
  min-height: 2.6em;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.pr-card__cta { margin-top: var(--space-5); }

.pr-card__list {
  margin-block: var(--space-5) 0;
  gap: var(--space-2);
}
.pr-card__list .checks__item { font-size: var(--fs-xs); }

/* The switch. Both prices are in the markup; the grid's state
   decides which one is on the page, so the language toggle
   never has to rewrite a number. */
.pr-plans__grid[data-cycle="monthly"] [data-price="yearly"],
.pr-plans__grid[data-cycle="yearly"] [data-price="monthly"] {
  display: none;
}

.pr-plans__foot {
  margin: var(--space-10) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   Centred switch

   The pricing page sets its switch under a left-aligned hero and
   inherits that alignment. A section that leads a grid centres its
   head, and the control above the grid has to agree with it.
   --------------------------------------------------------- */
.pr-cycle--center {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* ---------------------------------------------------------
   The stacked grid — one card forward, the rest tucked behind it

   Four cards of equal weight give the eye nowhere to land, and the
   tier most stores actually want is in the middle of the ramp. So the
   chosen card keeps its true size and its true place, and the others
   step back a fraction *and slide toward it*, so their outer edges
   close on it and the row reads as a hand of cards rather than as a
   row of four equal boxes.

   The slide is the half people actually see. Scale alone at this size
   is about eleven pixels on a 268px card, which reads as a rendering
   accident before it reads as depth; it is the closing gap along the
   featured card's edge that says which one is in front.

   --tuck is set per card in the markup: how many places that card sits
   from the featured one, signed by which side it is on. It is a signed
   distance and not a flat direction because the lead is not in the
   middle of four cards — see the note in the markup. The sign is read
   off source order, which is screen order only in LTR, so --tuck-step
   carries the flip and one property turns the whole row around.

   transform, not scale-the-font: the reveal uses the separate
   `translate` property, so the two compose instead of fighting. And
   the origin is the top edge, so the cards stay flush along their
   heads while their feet lift — a centre origin floats the smaller
   ones in the middle of the row with a gap above each.

   Hovering or tabbing into any card brings it out of the shelf at
   full size, so the ones standing back are still the first-class
   thing they describe and not a frame around the featured one.

   The gesture is a lift and not just an untuck, and that is the whole
   reason it is written this way. The featured card already rests at
   full size in its own place with the deep shadow on it — which is
   exactly what the old hover rule set — so hovering the one card the
   row is built around did nothing at all. Every neighbour answered
   the pointer and the tier being sold sat there dead. Six pixels up
   is a change the featured card can also make.
   --------------------------------------------------------- */
.pr-plans__grid--stacked {
  /* 18px against a 20px gap: with the 4px each side that the scale
     already takes off, the inner edge travels 14px and leaves a
     six-pixel seam. Thirty, the reference's figure, was measured
     against a narrower gutter and buries the seam entirely. */
  --tuck-step: 18px;
}
[dir="ltr"] .pr-plans__grid--stacked { --tuck-step: -18px; }

.pr-plans__grid--stacked > .pr-card {
  transform: translateX(calc(var(--tuck, 0) * var(--tuck-step))) scale(0.96);
  transform-origin: top center;
  z-index: 1;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.pr-plans__grid--stacked > .pr-card--featured {
  transform: none;
  z-index: 2;
  box-shadow: var(--shadow-lg);
}
.pr-plans__grid--stacked > .pr-card:hover,
.pr-plans__grid--stacked > .pr-card:focus-within {
  transform: translateY(-6px);
  z-index: 3;
  box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .pr-plans__grid--stacked > .pr-card { transform: none; transition: none; }
  .pr-plans__grid--stacked > .pr-card:hover,
  .pr-plans__grid--stacked > .pr-card:focus-within { transform: none; }
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1080px) {
  .pr-plans__grid { grid-template-columns: repeat(2, 1fr); }
  .pr-card__pitch { min-height: 0; }
  .pr-card__save { min-height: 0; }

  /* Three cards in two columns is one orphan, and the trio has the
     whole width to itself once its row has stopped being two. */
  .pr-plans__grid--trio { grid-template-columns: repeat(3, 1fr); }
}

/* The trio gives up earlier than the four-up grid does: three columns
   inside a 760px window is a 224px card, which is narrower than the
   price line wants.

   Two things have to go with the column, and both were missed the first
   time. A card left to fill the column came out 757px wide — one card
   the width of the page, which is not a card. And the tuck outlived the
   row it was tucking into: between here and the 720px rule below, three
   stacked cards were still scaled to 96% and shifted 18px off the
   gutter, with nothing beside them to explain why. */
@media (max-width: 860px) {
  .pr-plans__grid--trio {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .pr-plans__grid--trio > .pr-card {
    inline-size: 100%;
    max-inline-size: 24rem;
    transform: none;
  }
}

@media (max-width: 720px) {
  .pr-plans__grid { grid-template-columns: 1fr; }
  .pr-card__flag { inset-inline-start: var(--space-5); }

  /* Stacked one to a column there is no row to tuck into, and a card
     that is 96% wide and shifted 18px off the gutter just reads as a
     rendering mistake. */
  .pr-plans__grid--stacked > .pr-card { transform: none; }
}

@media (max-width: 520px) {
  .pr-cycle { width: 100%; }
  .pr-cycle__btn {
    flex: 1;
    justify-content: center;
    padding-inline: var(--space-3);
  }
}