/* ==========================================================================
   /studios — the Photographers & Studios product page.

   Loaded AFTER design.css and landing.css, so it inherits the tokens, the
   buttons and the site chrome, and only adds what is specific to this page.

   The brief asked for something warmer and more editorial than the main landing
   page. That is done with SPACE and TYPE rather than with extra colours:
   much larger section padding, a wider line-height, and a warm off-white for the
   alternating bands. Introducing a new accent hue would have made the page look
   like a different product, which is the opposite of the intent — it is the same
   product sold to a different audience.
   ========================================================================== */

.studios-page {
  /* A warm neutral, a couple of degrees off the app's #f8fafc, used only as a
     banded background. Subtle on purpose: it should register as "calmer here",
     not as a second theme. */
  --stu-warm: #fbf8f4;
  --stu-warm-2: #f7f2ec;
  --stu-ink: #0f172a;
  --stu-max: 1180px;
}

/* The shared wrapper. Deliberately its own class rather than reusing
   `.container`: landing.css scopes `.container` inside specific sections
   (`.hero .container`, `.narrative-card .container`), so depending on it here
   would couple this page to another page's layout rules. */
.stu-wrap {
  max-width: var(--stu-max);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.stu-center { text-align: center; }
.stu-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin: 0 0 12px;
}
.stu-h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--stu-ink);
}
.stu-sub {
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 auto 40px;
  max-width: 620px;
}

/* Some sections already carry `.section` (84px); this page wants more air. */
.studios-page .section { padding: 104px 24px; }

/* ---------------------------------------------------------------- 1. Hero */
.stu-hero {
  position: relative;
  padding: 76px 24px 92px;
  /* The "subtle background treatment": a brand-tinted wash that fades into the
     warm neutral, so the hero reads as its own space without a hard edge. */
  background:
    radial-gradient(1100px 460px at 78% -8%, rgba(99, 102, 241, .13), transparent 62%),
    radial-gradient(760px 380px at 4% 4%, rgba(6, 182, 212, .10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--stu-warm) 100%);
}
.stu-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: 56px;
  align-items: center;
}
/* Grid and flex children default to `min-width: auto`, which refuses to shrink
   below their content's intrinsic width. A long unbroken Persian word (or a URL)
   then pushes the column wider than the page and forces a horizontal scrollbar on
   a 375px screen. This is the one-line fix, and it is why the check below exists. */
.stu-hero-text,
.stu-benefit,
.stu-deck,
.stu-tier,
.stu-steps li { min-width: 0; }
.stu-hero-text h1 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--stu-ink);
}
.stu-lede {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 30px;
  max-width: 540px;
}
.stu-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.stu-btn { font-size: 15px; padding: 13px 24px; }
.stu-btn-lg { font-size: 16px; padding: 15px 30px; }
.stu-trust {
  font-size: 14px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.6;
}
.stu-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  /* A real shadow, because this photograph is dark and would otherwise float
     without weight against the light hero wash. */
  box-shadow: 0 26px 60px rgba(15, 23, 42, .22);
}

/* ------------------------------------------------------------ 2. Benefits */
.stu-benefits { background: var(--stu-warm); }
.stu-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 56px;
}
.stu-benefit {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
}
.stu-bico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--brand-50);
  font-size: 22px;
  margin-bottom: 16px;
}
.stu-benefit h3 {
  font-size: 18px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  color: var(--stu-ink);
}
.stu-benefit p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
}
.stu-craft { margin: 0; }
.stu-craft img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------- 3. The two decks */
.stu-shots { background: #fff; }
.stu-deck-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 46px 40px;
}
.stu-deck { margin: 0; }

/* The pile. Every capture occupies the SAME grid cell and is nudged down-right
   and tilted a hair, so the group reads as one stack of screens rather than
   four loose pictures. The step is a single variable because the offsets and
   the room reserved for them (the padding) have to agree: a mismatch either
   clips the bottom card or leaves a gap under the caption. */
.stu-deck-cards {
  --stu-deck-step: clamp(15px, 2.6vw, 30px);
  display: grid;
  padding: 0 calc(var(--stu-deck-step) * 3 + 10px)
           calc(var(--stu-deck-step) * 2.1 + 14px) 0;
}
.stu-deck-card {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  /* The builder writes every frame at exactly 16:10, so this never crops a
     screenshot — it only absorbs sub-pixel rounding. */
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .16);
  /* Paint order used to be DOM order, which was enough while nothing could
     change places. `--i` is now rewritten by studios-decks.js as the deck is
     flicked, so the stacking has to follow it explicitly. */
  position: relative;
  z-index: var(--i);
  transform: translate(calc(var(--i) * var(--stu-deck-step)),
                       calc(var(--i) * var(--stu-deck-step) * .68))
             rotate(calc(var(--i) * .8deg))
             scale(var(--stu-deck-scale, 1));
  transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s ease;
}
/* Cards start at the offsets the script will assign, so the pile is already a
   pile before (and without) any JavaScript. */
.stu-deck-card:nth-child(1) { --i: 0; }
.stu-deck-card:nth-child(2) { --i: 1; }
.stu-deck-card:nth-child(3) { --i: 2; }
.stu-deck-card:nth-child(4) { --i: 3; }
/* Only a deck the script is driving is clickable — a pointer cursor on a pile
   that cannot move is a lie. */
.stu-deck-live .stu-deck-cards { cursor: pointer; }
/* The front card is the one the caption describes, so hovering the deck lifts
   it a hair and deepens every shadow. Deliberately NOT a fan-out: the padding
   above is the exact room the resting offsets need, and spreading the cards on
   hover would push the deck past the section's gutter on a narrow screen. */
.stu-deck:hover .stu-deck-card,
.stu-deck:focus-within .stu-deck-card { box-shadow: 0 16px 34px rgba(15, 23, 42, .20); }
.stu-deck:hover .stu-deck-card:nth-child(4),
.stu-deck:focus-within .stu-deck-card:nth-child(4),
.stu-deck:hover .stu-deck-card.stu-deck-top,
.stu-deck:focus-within .stu-deck-card.stu-deck-top { --stu-deck-scale: 1.02; }

/* ‹ n / m › — the same shape as the app's own lightbox controls, because a
   visitor who has used the product should recognise it here. Hidden until
   studios-decks.js runs, so nobody is offered a button that does nothing. */
.stu-deck-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.stu-deck-bar[hidden] { display: none; }
.stu-deck-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: #fff;
  color: var(--stu-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.stu-deck-nav:hover {
  background: var(--brand-50);
  border-color: var(--brand-500);
  color: var(--brand-700);
}
.stu-deck-nav:active { transform: scale(.94); }
.stu-deck-nav:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
/* A Farsi page reads right to left, so "next" is the left-hand chevron: the row
   is laid out by the writing direction and only the glyph has to flip. */
[dir="rtl"] .stu-deck-nav span { transform: scaleX(-1); }
.stu-deck-count {
  min-width: 46px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.stu-deck figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
  font-size: 14px;
}
.stu-deck figcaption b { color: var(--stu-ink); }
.stu-deck figcaption span { color: var(--text-2); }

/* ------------------------------------------------------------- 4. Tiers */
.stu-tiers { background: var(--stu-warm-2); }
/* Horizontal scroll on narrow screens; the grid keeps four columns from 900px
   up. A stacked list would destroy the only thing this row is for — comparing
   the plans at a glance. */
.stu-tier-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Room for the focus ring and the popular badge, which would otherwise be
     clipped by the scroll container. */
  padding: 10px 4px 14px;
  margin: 0 -4px;
}
.stu-tier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(212px, 1fr));
  gap: 18px;
  min-width: 900px;
}
.stu-tier {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
}
.stu-tier-pop {
  border-color: var(--brand-500);
  box-shadow: 0 10px 26px rgba(79, 70, 229, .16);
}
.stu-tier-badge {
  position: absolute;
  top: -11px;
  inset-inline-start: 20px;
  background: var(--brand-600);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.stu-tier-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--stu-ink);
  margin-bottom: 6px;
}
.stu-tier-price {
  font-size: 21px;
  font-weight: 800;
  color: var(--brand-600);
  margin-bottom: 14px;
}
/* The figure and its "— toumans billed …" note are SEPARATE LINES, mirroring the
   landing page and /pricing. The note used to be an inline span right after the
   number, so it trailed the price onto the card edge instead of reading as a
   footnote to it. `.stu-tier-amt` keeps the price's own size — without the
   reset the wrapped number would inherit the note's 12px grey. */
.stu-tier-amt { font-size: inherit; font-weight: inherit; color: inherit; }
.stu-tier-note {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  margin-top: 3px;
  /* A long localized note ("— تومان پرداخت سالانه") must wrap INSIDE the card
     rather than push the grid column wider. */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* The annual note ships hidden; a plan without an annual figure (Free, or a plan
   whose yearly switch is off) must never show one, and with JS off the monthly
   state is the one on screen. */
.stu-tier [hidden] { display: none !important; }
.stu-tier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.stu-tier-list li {
  padding-inline-start: 20px;
  position: relative;
}
.stu-tier-list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: #16a34a;
  font-weight: 800;
}
.stu-tier-more {
  text-align: center;
  margin: 26px 0 0;
  font-size: 15px;
}
.stu-tier-more a { color: var(--brand-600); font-weight: 600; text-decoration: none; }
.stu-tier-more a:hover { text-decoration: underline; }

/* -------------------------------------------------------- 5. How it works */
.stu-how { background: #fff; }
.stu-steps {
  list-style: none;
  counter-reset: stu;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stu-steps li {
  position: relative;
  padding-top: 8px;
}
/* A connector between the steps, so the four read as a sequence rather than as
   four unrelated cards. Suppressed on the last one and when stacked. */
.stu-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  inset-inline-start: 100%;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-100), transparent);
}
.studios-page.is-fa .stu-steps li:not(:last-child)::after {
  background: linear-gradient(270deg, var(--brand-100), transparent);
}
.stu-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 14px;
}
.stu-steps h3 {
  font-size: 16.5px;
  margin: 0 0 8px;
  color: var(--stu-ink);
}
.stu-steps p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}
/* The section's photograph, under the four steps. Deliberately the same shape as
   `.stu-craft` (rounded, full width, real shadow) so the page has ONE way of
   presenting a photograph rather than a new treatment per section.

   No `max-height`: `.stu-craft` caps at 420px, which is right for a 4:3 frame
   sitting under three cards, but this one is a 2.26 band and cutting it further
   would take the mountain out of the lens — the whole point of the picture. Its
   natural height is ~500px at the 1180px wrapper. */
.stu-how-art {
  margin: 64px 0 0;
}
.stu-how-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(15, 23, 42, .18);
}

/* ------------------------------------------------------------- 6. FAQ */
.stu-faq { background: var(--stu-warm); }
.stu-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stu-q {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 18px;
}
.stu-q summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  padding: 16px 0;
  color: var(--stu-ink);
  list-style: none;
}
/* The native marker differs per browser and sits on the wrong side in RTL, so it
   is replaced with a chevron drawn in CSS that flips with the document. */
.stu-q summary::-webkit-details-marker { display: none; }
.stu-q summary::after {
  content: "＋";
  float: inline-end;
  color: var(--brand-600);
  font-weight: 700;
}
.stu-q[open] summary::after { content: "－"; }
.stu-q p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-2);
}

/* --------------------------------------------------------- 7. Final CTA */
.stu-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 108px 24px;
  text-align: center;
}
.stu-final-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* The duotoned CTA frame is light in the middle, so the headline needs a veil to
   stay readable. Kept dark and slightly warm so it does not read as a plain grey
   scrim over the brand image. */
.stu-final-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 23, 42, .72), rgba(30, 27, 75, .80));
}
.stu-final-inner { color: #fff; }
.stu-final h2 {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  margin: 0 0 26px;
  color: #fff;
}
.stu-final-note {
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
}

/* ==========================================================================
   Responsive. The three widths the brief names: 1440 desktop, 768 tablet,
   375 mobile.
   ========================================================================== */

/* Tablet — same layout, tighter spacing, and the grids drop to two columns. */
@media (max-width: 1024px) {
  .studios-page .section { padding: 78px 22px; }
  .stu-hero { padding: 58px 22px 70px; }
  .stu-hero-grid { gap: 36px; }
  .stu-benefit-grid { gap: 18px; }
  .stu-benefit { padding: 24px 20px; }
  .stu-steps { grid-template-columns: repeat(2, 1fr); gap: 26px; row-gap: 32px; }
  .stu-steps li:not(:last-child)::after { display: none; }
}

/* Small tablet / large phone — the hero stacks: photo on top, then text, then
   the CTAs. Explicit order rather than relying on source order, because the
   markup keeps the text first for the sake of search engines and screen
   readers. */
@media (max-width: 860px) {
  .stu-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .stu-hero-art { order: -1; }
  .stu-benefit-grid { grid-template-columns: 1fr; gap: 16px; }
  .stu-deck-grid { grid-template-columns: 1fr; }
  .stu-lede { max-width: none; }
}

/* Mobile — full-width CTAs, and the tier row keeps scrolling rather than
   stacking. */
@media (max-width: 560px) {
  .studios-page .section { padding: 62px 18px; }
  .stu-hero { padding: 40px 18px 54px; }
  .stu-wrap { padding: 0 18px; }
  .stu-hero-ctas { gap: 10px; }
  .stu-hero-ctas .btn { width: 100%; justify-content: center; box-sizing: border-box; }
  .stu-hero-art img { border-radius: 14px; }
  .stu-steps { grid-template-columns: 1fr; }
  .stu-craft img { max-height: 260px; }
  /* A 2.26 band at 287px wide is only 127px tall, which is too thin to read as a
     photograph rather than a stripe. Cropping it to 16:9 gives it back some
     presence — and because the subject is centred, `object-fit: cover` keeps the
     lens and the mountain and loses only valley either side. */
  .stu-how-art { margin-top: 44px; }
  .stu-how-art img { aspect-ratio: 16 / 9; object-fit: cover; }
  .stu-tier-scroll { margin: 0 -18px; padding-inline: 18px; }
  .stu-final { padding: 74px 18px; }
  .stu-final .btn { width: 100%; box-sizing: border-box; }
}

/* Respect a reduced-motion preference. Nothing here animates today, but the
   rule is cheap insurance for the next change made to this file. */
@media (prefers-reduced-motion: reduce) {
  .studios-page * { transition: none !important; animation: none !important; }
}