/* پروفایل عمومی تصویربردار — CreatorProfile.module.css (پیشوند cp-) */

/* ==========================================================================
   Creator profile
   --------------------------------------------------------------------------
   A card mosaic on a near-black ground: each thing a buyer wants to know
   sits in its own tile, and tiles vary in width by how much attention the
   content deserves rather than by how much text it happens to contain.

   The accent is the creator's own choice. It appears in exactly four places
   -- the cover edge, the specialty chips, the rate figure, and the contact
   button -- so a profile reads as personal without turning into a colour
   test. Everything else stays neutral.
   ========================================================================== */

.cp-page {
  --bg: #0b0b0d;
  --tile: #141417;
  --tile-2: #1b1b1f;
  --line: rgba(255, 255, 255, .07);
  --fg: #f4f4f6;
  --fg-2: #a8a8b0;
  --fg-3: #6c6c76;

  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  direction: rtl;
  padding-bottom: 60px;
}

/* position + z-index matter here: the cover below is positioned, and a
   positioned element paints above a static one whatever the DOM order. The
   identity block is pulled up into the cover by a negative margin, so without
   this it ends up underneath it. */
.cp-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- cover ---------------------------------------------------- */

.cp-cover {
  position: relative;
  height: clamp(130px, 22vw, 210px);
  background: var(--tile);
  overflow: hidden;
}
.cp-coverImg { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-coverEmpty {
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 180% at 80% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    var(--tile);
}
/* A hairline of the creator's colour separates cover from page. */
.cp-coverEdge {
  position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: var(--accent);
}

.cp-identity {
  --avatar: 108px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  /* Only the avatar overlaps the cover. The name sits below the accent line
     rather than across it -- text on top of a bright rule is hard to read,
     and the rule is meant to separate the two areas, not run through them. */
  margin-top: calc(var(--avatar) / -2);
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.cp-avatar {
  width: var(--avatar); height: var(--avatar); border-radius: 26px;
  border: 4px solid var(--bg); background: var(--tile-2);
  object-fit: cover; flex-shrink: 0;
}
.cp-avatarEmpty {
  width: var(--avatar); height: var(--avatar); border-radius: 26px;
  border: 4px solid var(--bg);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 700; color: #0b0b0d;
  flex-shrink: 0;
}
/* Pushed down by the half of the avatar that sits above the cover edge, so
   the name starts clear of the line. */
.cp-identityText {
  flex: 1;
  min-width: 200px;
  padding-top: calc(var(--avatar) / 2 + 10px);
}
.cp-name { font-size: clamp(24px, 4vw, 34px); font-weight: 700; margin: 0 0 6px; letter-spacing: -.02em; }
.cp-location { font-size: 13px; color: var(--fg-2); margin: 0; }

/* ---------- mosaic ---------------------------------------------------- */

.cp-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.cp-tile {
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 24px;
  min-width: 0;
}
/* Width is set by importance, not by text length. */
.cp-w2 { grid-column: span 2; }
.cp-w3 { grid-column: span 3; }
.cp-w4 { grid-column: span 4; }
.cp-w6 { grid-column: span 6; }

.cp-eyebrow {
  font-size: 11px; letter-spacing: .07em; color: var(--fg-3);
  margin: 0 0 10px; text-transform: uppercase;
}
.cp-tileTitle { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.cp-tileBody { font-size: 13.5px; line-height: 2; color: var(--fg-2); margin: 0; white-space: pre-wrap; }

.cp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cp-chip {
  font-size: 12.5px; padding: 7px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.cp-chipQuiet {
  font-size: 12.5px; padding: 7px 14px; border-radius: 12px;
  background: rgba(255,255,255,.05); color: var(--fg-2);
}

/* Headline rate: the number a buyer is looking for, in the accent. */
.cp-rateBig {
  font-size: clamp(26px, 4.4vw, 38px); font-weight: 700;
  color: var(--accent); line-height: 1.1; letter-spacing: -.02em;
}
.cp-rateUnit { font-size: 13px; color: var(--fg-3); margin-top: 8px; }

.cp-statRow { display: flex; gap: 26px; flex-wrap: wrap; }
.cp-stat { min-width: 74px; }
.cp-statNum { font-size: 26px; font-weight: 700; line-height: 1.15; }
.cp-statLabel { font-size: 11px; color: var(--fg-3); margin-top: 5px; line-height: 1.6; }

.cp-specs { margin: 0; }
.cp-specRow {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.cp-specRow:last-child { border-bottom: none; padding-bottom: 0; }
.cp-specRow dt { color: var(--fg-3); }
.cp-specRow dd { margin: 0; text-align: end; color: var(--fg); }

/* ---------- contact --------------------------------------------------- */

.cp-contactOpen { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.cp-phoneLink {
  display: block; font-size: 25px; font-weight: 700;
  color: var(--accent); text-decoration: none; direction: ltr; text-align: start;
  letter-spacing: .01em;
}
.cp-socialRow { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.cp-socialLink { font-size: 13px; color: var(--fg-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.cp-socialLink:hover { color: var(--fg); }

.cp-lockText { font-size: 13px; line-height: 1.95; color: var(--fg-2); margin: 0 0 16px; }
.cp-unlockBtn {
  display: inline-block; padding: 12px 22px; border-radius: 14px;
  background: var(--accent); color: #0b0b0d; border: none;
  font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}

/* ---------- gallery --------------------------------------------------- */

.cp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cp-galleryItem {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--tile-2);
  display: flex;
  flex-direction: column;
}
.cp-galleryImg {
  width: 100%;
  /* Height follows the width instead of being pinned, so the crop matches
     the shape the browser is actually drawing. */
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cp-caption { font-size: 12px; color: var(--fg-3); padding: 10px 12px; line-height: 1.8; flex: 1; }
.cp-client { display: block; margin-top: 3px; color: var(--fg-2); }

.cp-videoGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cp-videoItem { margin: 0; }
.cp-videoFrame { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000; }
.cp-videoIframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cp-videoPoster {
  width: 100%; aspect-ratio: 16/9; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--line); font-family: inherit; color: var(--fg);
  background: var(--tile-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.cp-videoPoster:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.cp-playIcon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #0b0b0d;
  display: flex; align-items: center; justify-content: center;
}
.cp-videoLabel { font-size: 13px; color: var(--fg-2); padding: 0 16px; text-align: center; }

.cp-backLink {
  display: inline-block; font-size: 13px; color: var(--fg-3);
  text-decoration: none; padding: 18px 0 6px;
}
.cp-backLink:hover { color: var(--fg); }

/* ---------- responsive ------------------------------------------------- */

@media (max-width: 820px) {
  .cp-w2, .cp-w3, .cp-w4 { grid-column: span 3; }
  .cp-identity { --avatar: 84px; gap: 14px; }
  .cp-avatar, .cp-avatarEmpty { border-radius: 20px; }
}

/* On a narrow screen the name wraps under the avatar anyway, so the extra
   top padding would only add a gap. */
@media (max-width: 460px) {
  .cp-identityText { padding-top: 4px; }
}
@media (max-width: 520px) {
  .cp-mosaic { grid-template-columns: 1fr; }
  .cp-w2, .cp-w3, .cp-w4, .cp-w6 { grid-column: span 1; }
  .cp-tile { padding: 18px 20px; border-radius: 20px; }
}

/* The thumbnail is a button now, so it needs the frame reset that a bare
   image didn't. */
.cp-galleryBtn {
  display: block;
  width: 100%;
  /* The frame owns the shape; the button just fills it. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}
.cp-galleryBtn:hover .cp-galleryImg { transform: scale(1.03); }
.cp-galleryImg { transition: transform .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .cp-galleryImg { transition: none; }
  .cp-galleryBtn:hover .cp-galleryImg { transform: none; }
}