/* ===== Author / writer profile page (Figma 4952:3221 desktop / 4984:14805 mobile) ===== */
:root {
  --blk: #030a11;
  --gray: #6c6c6c;
  --auth-name-gold: #b58d41;
}

.hdr.hdr--solid { background:#fff; box-shadow:0 2px 18px rgba(0,0,0,.07); }

.auth {
  background:#f6f6f6;
  direction:rtl;
  padding-top:calc(100vw * 137 / 1920);
}

/* fluid 1296px centered column inside 1920 canvas */
.auth__wrap {
  width:calc(100vw * 1296 / 1920);
  max-width:1296px;
  margin:0 auto;
}

/* ---------- Breadcrumb (4960:7172) ---------- */
.auth__crumb {
  display:flex;
  align-items:center;
  justify-content:flex-start;        /* RTL flex-start = visual RIGHT (Figma: x=930-1610, home far-right) */
  gap:calc(100vw * 8 / 1920);
  height:calc(100vw * 48 / 1920);
  margin-top:calc(100vw * 32 / 1920);
  font-family:var(--font-body);
  font-weight:var(--w-reg);
  font-size:calc(100vw * 18 / 1920);
  color:var(--blk);
}
.auth__crumb a { color:inherit; text-decoration:none; }
.auth__crumb-cur { color:var(--blk); }
.auth__crumb-home {
  width:calc(100vw * 16 / 1920);
  height:calc(100vw * 16 / 1920);
  display:block;
}

/* ---------- Profile card (4960:7161) ---------- */
.auth__card {
  position:relative;
  display:flex;
  flex-direction:row;               /* RTL: photo (DOM 1st) RIGHT, text LEFT — per Figma */
  background:#fff;
  height:calc(100vw * 552 / 1920);
  margin-top:calc(100vw * 60 / 1920);
}

/* photo — left half */
.auth__photo {
  flex:0 0 calc(100vw * 649 / 1920);
  width:calc(100vw * 649 / 1920);
  height:calc(100vw * 552 / 1920);
  object-fit:cover;
  object-position:center;
  display:block;
}

/* text — right side */
.auth__bio {
  flex:1 1 auto;
  position:relative;
  padding:calc(100vw * 40 / 1920) calc(100vw * 51 / 1920) 0 calc(100vw * 47 / 1920);
  text-align:right;
}

.auth__name {
  font-family:var(--font-body);
  font-weight:var(--w-reg);
  font-size:calc(100vw * 46 / 1920);
  line-height:calc(100vw * 48 / 1920);
  color:#000;
  margin:0;
}
.auth__name b { font-weight:var(--w-reg); }
.auth__name em {
  font-style:normal;
  color:var(--auth-name-gold);
}

.auth__count {
  font-family:var(--font-body);
  font-weight:var(--w-reg);
  font-size:calc(100vw * 18 / 1920);
  color:#818181;
  margin:calc(100vw * 12 / 1920) 0 0;
}

.auth__about-lbl {
  font-family:var(--font-body);
  font-weight:var(--w-semi);
  font-size:calc(100vw * 24 / 1920);
  color:var(--basic-black);
  margin:calc(100vw * 22 / 1920) 0 0;
}

.auth__bio-txt {
  font-family:var(--font-body);
  font-weight:var(--w-reg);
  font-size:calc(100vw * 20 / 1920);
  line-height:calc(100vw * 28 / 1920);
  color:var(--basic-black);
  margin:calc(100vw * 16 / 1920) 0 0;
  width:calc(100vw * 548 / 1920);
}

/* social circles row (5224:3738) */
.auth__social {
  display:flex;
  flex-direction:row;
  justify-content:flex-end;          /* RTL flex-end = visual LEFT (Figma x=425) */
  gap:calc(100vw * 9 / 1920);
  margin-top:calc(100vw * 30 / 1920);
}
.auth__social a {
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(100vw * 51.74 / 1920);
  height:calc(100vw * 51.74 / 1920);
  border:1px solid var(--green-900);
  border-radius:50%;
  transition:background .2s ease;
}
.auth__social a img {
  width:calc(100vw * 20 / 1920);
  height:calc(100vw * 20 / 1920);
  display:block;
}
.auth__social a:hover { background:#f2f2f2; }

/* ---------- Articles heading (4960:7171) ---------- */
.auth__art-title {
  font-family:var(--font-body);
  font-weight:var(--w-bold);
  font-size:calc(100vw * 36 / 1920);
  color:var(--blk);
  text-align:center;
  margin:calc(100vw * 57 / 1920) 0 0;
}

/* ---------- Articles grid (3 cols) ---------- */
.auth__grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:calc(100vw * 40 / 1920) calc(100vw * 40 / 1920);
  margin-top:calc(100vw * 33 / 1920);
  padding-bottom:calc(100vw * 149 / 1920);
}

/* ---------- Article card (4960:7178) ---------- */
.acard {
  position:relative;
  background:#fff;
  border-radius:var(--r-card);
  box-shadow:0 0 40px rgba(0,0,0,0.06);
  height:calc(100vw * 469 / 1920);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-decoration:none;
}
.acard__img {
  width:100%;
  height:calc(100vw * 200 / 1920);
  object-fit:cover;
  display:block;
  background:var(--blk);
}
.acard__body {
  padding:calc(100vw * 22 / 1920) calc(100vw * 21 / 1920) 0;
  text-align:right;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.acard__title {
  font-family:var(--font-body);
  font-weight:var(--w-semi);
  font-size:calc(100vw * 28 / 1920);
  line-height:calc(100vw * 36 / 1920);
  color:var(--blk);
  margin:0;
}
.acard__excerpt {
  font-family:var(--font-body);
  font-weight:var(--w-reg);
  font-size:calc(100vw * 20 / 1920);
  line-height:calc(100vw * 26 / 1920);
  color:var(--blk);
  margin:calc(100vw * 16 / 1920) 0 0;
}

/* Figma button-2: rectangular outlined, arrow segment on LEFT split by a divider line */
.acard__cta {
  display:flex;
  direction:ltr;
  align-items:stretch;
  width:calc(100vw * 184 / 1920);
  height:calc(100vw * 48 / 1920);
  margin-top:auto;
  margin-bottom:calc(100vw * 29 / 1920);
  border:1px solid var(--green-900);
  border-radius:2px;
  overflow:hidden;
  padding:0;
  box-sizing:border-box;
  background:transparent;
  text-decoration:none;
}
.acard__cta .lbl {
  font-family:var(--font-body);
  font-weight:var(--w-bold);
  font-size:calc(100vw * 20 / 1920);
  color:var(--green-900);
  white-space:nowrap;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.acard__cta .circ {
  flex:0 0 calc(100vw * 48 / 1920);
  width:calc(100vw * 48 / 1920);
  height:100%;
  border:0;
  border-right:1px solid rgba(13,44,33,0.4);
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.acard__cta .circ img {
  width:calc(100vw * 24 / 1920);
  height:calc(100vw * 24 / 1920);
  display:block;
}
.acard:hover .acard__cta { background:#fafafa; }


/* ======================================================================
   TABLET  (<=1024px)
   ====================================================================== */
@media (max-width:1024px) {
  .auth { padding-top:84px; }
  .auth__wrap { width:auto; max-width:none; margin:0; padding:0 24px; }

  .auth__crumb {
    height:auto; margin-top:18px; font-size:14px; gap:6px;
  }
  .auth__crumb-home { width:14px; height:14px; }

  .auth__card {
    flex-direction:column;
    height:auto;
    margin-top:22px;
  }
  .auth__photo {
    flex:none;
    width:100%;
    height:auto;
    aspect-ratio:649/552;
    order:-1;
  }
  .auth__bio {
    padding:24px 0 0;
    width:auto;
  }
  .auth__name   { font-size:32px; line-height:1.15; }
  .auth__count  { font-size:15px; margin-top:8px; }
  .auth__about-lbl { font-size:20px; margin-top:18px; }
  .auth__bio-txt {
    width:auto; font-size:17px; line-height:1.55; margin-top:12px;
  }
  .auth__social { gap:10px; margin-top:22px; }
  .auth__social a { width:46px; height:46px; }
  .auth__social a img { width:18px; height:18px; }

  .auth__art-title { font-size:26px; margin-top:36px; }

  .auth__grid {
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:22px;
    padding-bottom:60px;
  }
  .acard { height:auto; }
  .acard__img { height:auto; aspect-ratio:407/200; }
  .acard__body { padding:18px 18px 0; }
  .acard__title   { font-size:20px; line-height:1.25; }
  .acard__excerpt { font-size:15px; line-height:1.5; margin-top:12px; }
  .acard__cta {
    width:160px; height:44px; margin-top:18px; margin-bottom:20px;
    gap:8px; padding-right:18px;
  }
  .acard__cta .lbl  { font-size:16px; }
  .acard__cta .circ { width:44px; height:44px; }
  .acard__cta .circ img { width:22px; height:22px; }
}


/* ======================================================================
   MOBILE  (<=768px) — single column (Figma 4984:14805)
   ====================================================================== */
@media (max-width:768px) {
  .auth__wrap { padding:0 16px; }

  .auth__card { margin-top:18px; }
  .auth__name   { font-size:28px; }
  .auth__bio-txt { font-size:16px; }

  .auth__art-title { font-size:24px; margin-top:30px; }

  .auth__grid {
    grid-template-columns:1fr;
    gap:16px;
    padding-bottom:48px;
  }
  .acard__title   { font-size:21px; }
  .acard__excerpt { font-size:16px; }
}