/* anashaddadfit.com: the guides (/guides/, /ar/guides/ and one page per
   guide). Loaded after site.css, which supplies the fonts, colour tokens,
   glow, grain, the top bar and the page footer. Mobile first. No JavaScript.
   Class names here start with g- (or pdf) so they never collide with the
   calculator's classes in site.css. */

.guides {
  --wrap: 560px;
}

.g-main {
  padding: 36px 0 0;
}

/* Page heading */
.g-head h1 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.6rem, 12vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.g-head h1::after {
  content: ".";
  color: var(--acc);
}
.g-intro {
  max-width: 34ch;
  margin: 16px 0 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- The list: one tappable card per guide ---------- */
.g-list {
  display: grid;
  gap: 14px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.g-card {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px 16px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(245, 241, 234, 0.03), rgba(245, 241, 234, 0)), var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--t-fast) ease, background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.g-stage {
  position: relative;
  display: block;
}
.g-stage::before {
  /* soft amber light behind the cover */
  content: "";
  position: absolute;
  inset: 12% -10% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(207, 143, 46, 0.22), rgba(207, 143, 46, 0));
  filter: blur(6px);
}
.g-cover,
.g-cover-lg {
  position: relative;
  display: block;
}
.g-cover img,
.g-cover-lg img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
.g-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-bottom: 28px;
}
.g-t {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.g-s {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.g-go {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink-2);
  transition: transform var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.g-go svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .g-card:hover {
    background: var(--card-on);
    border-color: var(--line-2);
  }
  .g-card:hover .g-go {
    border-color: var(--acc);
    color: var(--acc);
    transform: translateX(2px);
  }
}
.g-card:active {
  transform: scale(0.985);
  background: var(--card-on);
}
.g-card:focus-visible {
  border-radius: var(--r-lg);
}

/* ---------- One guide: cover, title, line, the language choice ---------- */
.g-one {
  text-align: center;
}
.g-hero {
  position: relative;
  width: min(62%, 240px);
  margin: 8px auto 34px;
}
.g-hero::before {
  content: "";
  position: absolute;
  inset: 8% -30% -4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(207, 143, 46, 0.26), rgba(207, 143, 46, 0));
  filter: blur(10px);
}
.g-cover-lg img {
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.g-one .g-head h1 {
  font-size: clamp(2.3rem, 10.6vw, 3.2rem);
  line-height: 1.04;
}
.g-one .g-head h1::after {
  content: none;
}
.g-one .g-intro {
  margin-inline: auto;
}
.g-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 420px;
  margin: 32px auto 0;
}
.pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: normal;
  text-decoration: none;
  transition: transform var(--t-fast) ease, background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.pdf svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.pdf.on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
@media (hover: hover) {
  .pdf:hover {
    border-color: var(--line-on);
  }
  .pdf.on:hover {
    background: #fff;
  }
}
.pdf:active {
  transform: scale(0.97);
}
.pdf:focus-visible {
  border-radius: 999px;
}

/* ---------- Arabic ---------- */
[dir="rtl"] .g-head h1,
[dir="rtl"] .g-t {
  letter-spacing: 0;
}
[dir="rtl"] .g-head h1 {
  line-height: 1.3;
}
[dir="rtl"] .g-t {
  line-height: 1.45;
}
[dir="rtl"] .g-intro,
[dir="rtl"] .g-s {
  line-height: 1.8;
}
[dir="rtl"] .g-card {
  padding: 14px 14px 14px 16px;
}
[dir="rtl"] .g-go svg {
  transform: scaleX(-1);
}
@media (hover: hover) {
  [dir="rtl"] .g-card:hover .g-go {
    transform: translateX(-2px);
  }
}

/* ---------- Gentle entrance, only without a reduced-motion preference ---------- */
@keyframes g-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .g-head,
  .g-list > li,
  .g-hero,
  .g-choice {
    animation: g-in 520ms var(--ease) both;
  }
  .g-list > li:nth-child(1),
  .g-one .g-head { animation-delay: 70ms; }
  .g-list > li:nth-child(2),
  .g-choice { animation-delay: 140ms; }
  .g-list > li:nth-child(3) { animation-delay: 210ms; }
}

@media (min-width: 700px) {
  .g-main {
    padding-top: 56px;
  }
  .g-card {
    grid-template-columns: 120px 1fr;
    gap: 22px;
  }
}