/* =====================================================================
   صفحه‌های «زندگی در …» — افزوده بر country.css
   ===================================================================== */

/* برچسب کلید خانه (به‌جای کارت پرواز در قهرمان) */
.l-key {
  right: 2%; bottom: 6%; width: 230px; padding: 46px 22px 22px; border-radius: 6px;
  clip-path: polygon(24% 0, 76% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  transform: translateZ(140px) rotate(-9deg);
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.25));
  text-align: center; color: #111;
}
.l-key::before { content: ""; position: absolute; left: 50%; top: 14px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #2b2927; }
.l-key__ic { display: block; width: 92px; height: 92px; margin: 0 auto 4px; }
.l-key__ic svg { width: 100%; height: 100%; overflow: visible; }
.l-key__ic .l-m { stroke-width: 3.2; } .l-key__ic .l-d { stroke-width: 2; } .l-key__ic .l-h { stroke-width: 1.4; }
.l-key b { display: block; font-size: 18px; font-weight: 700; }
.l-key small { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #777; direction: ltr; }

/* ---------- کارت‌های چرخان زندگی روزمره ---------- */
.flips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.flip { perspective: 1200px; height: 290px; cursor: pointer; outline: none; opacity: 0; transform: translateY(40px); transition: opacity .6s ease, transform .8s cubic-bezier(.16, .84, .3, 1); transition-delay: var(--d, 0s); }
.flip.is-in { opacity: 1; transform: none; }
.flip:focus-visible .flip__face { outline: 2px solid #111; outline-offset: 4px; }
.flip__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, 1.2, .4, 1); }
.flip.is-flipped .flip__in { transform: rotateY(180deg); }
.flip__face {
  position: absolute; inset: 0; border-radius: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 22px 34px -24px rgba(0,0,0,.45);
  display: flex; flex-direction: column; padding: 26px 26px 22px;
}
.flip__front { align-items: center; justify-content: center; text-align: center; gap: 10px; }
.flip__ic { display: block; width: 104px; height: 104px; transform: translateZ(0); }
.flip__ic svg { width: 100%; height: 100%; overflow: visible; }
.flip__ic .l-m { stroke-width: 2.8; } .flip__ic .l-d { stroke-width: 1.8; } .flip__ic .l-h { stroke-width: 1.2; }
.flip__front h3 { margin: 0; font-size: 20px; font-weight: 700; color: #111; }
.flip__hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #8a8884; }
.flip__hint svg { width: 16px; height: 16px; }
.flip__back { transform: rotateY(180deg); justify-content: center; }
.flip__back h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: #111; }
.flip__back p { margin: 0; font-size: 14.5px; line-height: 2.05; color: #3f3d3a; text-align: justify; text-align-last: right; }
.flip__back::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 16px; border-bottom: 1px dashed rgba(43,41,39,.3); }

/* ---------- نقاط قوت و چالش‌ها: دو برگه با عمق سه‌بعدی ---------- */
.proscons { --px: 0; --py: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; perspective: 1600px; }
.sheet {
  position: relative; padding: 38px 30px 28px 26px; border-radius: 3px;
  background-image:
    linear-gradient(90deg, transparent calc(100% - 26px), rgba(43,41,39,.28) calc(100% - 26px), rgba(43,41,39,.28) calc(100% - 25px), transparent calc(100% - 25px)),
    repeating-linear-gradient(180deg, transparent 0 41px, rgba(43,41,39,.1) 41px 42px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-color: #fbfaf6; background-position: 0 0, 0 30px, 0 0;
  box-shadow: 0 1px 1px rgba(0,0,0,.08), calc(var(--px) * -18px) calc(28px + var(--py) * -12px) 44px -26px rgba(0,0,0,.45);
  transition: transform .9s cubic-bezier(.16, .84, .3, 1), opacity .7s ease;
  opacity: 0;
}
.sheet--pro { transform: rotateY(calc(16deg + var(--px) * 6deg)) rotateX(calc(var(--py) * -4deg)) translateZ(-40px) translateX(40px); transform-origin: 0 50%; }
.sheet--con { transform: rotateY(calc(-16deg + var(--px) * 6deg)) rotateX(calc(var(--py) * -4deg)) translateZ(-40px) translateX(-40px); transform-origin: 100% 50%; }
.proscons.is-in .sheet { opacity: 1; }
.proscons.is-in .sheet--pro { transform: rotateY(calc(7deg + var(--px) * 5deg)) rotateX(calc(var(--py) * -4deg)); transition-duration: .4s, .7s; }
.proscons.is-in .sheet--con { transform: rotateY(calc(-7deg + var(--px) * 5deg)) rotateX(calc(var(--py) * -4deg)); transition-duration: .4s, .7s; }
.sheet h3 { margin: 0 0 12px; font-size: 19px; font-weight: 700; color: #111; display: flex; align-items: center; gap: 10px; }
.sheet ul { list-style: none; margin: 0; padding: 0; }
.sheet li { display: flex; align-items: flex-start; gap: 12px; min-height: 42px; padding-top: 9px; font-size: 15px; line-height: 1.6; color: #2b2927; }
.mark { flex: none; width: 22px; height: 22px; margin-top: 1px; overflow: visible; }
.mark path { fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- لینک‌های مرتبط ---------- */
.rel { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.rel a {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: 999px;
  background: #111; color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 5px 0 #000, 0 14px 22px -10px rgba(0,0,0,.5); transition: transform .15s ease, box-shadow .15s ease;
}
.rel a:hover { transform: translateY(-2px); }
.rel a:active { transform: translateY(4px); box-shadow: 0 1px 0 #000, 0 6px 12px -6px rgba(0,0,0,.5); }
.rel a svg { width: 20px; height: 11px; }
.rel a:focus-visible { outline: 2px solid #111; outline-offset: 4px; }

@media (max-width: 980px) {
  .flips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proscons { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sheet--pro, .proscons.is-in .sheet--pro { transform: rotateX(calc(var(--py) * -3deg)); }
  .sheet--con, .proscons.is-in .sheet--con { transform: rotateX(calc(var(--py) * -3deg)); }
}
@media (max-width: 560px) {
  .flips { grid-template-columns: minmax(0, 1fr); }
  .flip { height: 270px; }
  .l-key { width: 138px; right: 1%; bottom: 1%; padding: 34px 12px 12px; }
  .l-key__ic { width: 52px; height: 52px; }
  .l-key b { font-size: 14px; }
  .l-key small { font-size: 9px; letter-spacing: .1em; }
  .sheet { padding: 32px 22px 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .flip, .flip__in, .sheet { transition: none; opacity: 1; }
}