/* ===== ALIGNED workshop landing page =====
   Page-scoped styles only. Everything here is prefixed .al- so it cannot
   collide with the main site. Palette, fonts, buttons and waves are all
   inherited from style.css so this page stays part of Aligned Myndset. */

/* ---------- Hero ---------- */
.al-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  padding:calc(var(--s8) + var(--s4)) 0 var(--s7);
  text-align:center;
}

/* Static concentric rings. Deliberately not animated: the site avoids
   fragile motion effects, and a breathing animation reads as busy against
   the Quiet Editorial direction. */
.al-rings{
  position:absolute; top:50%; left:50%;
  width:900px; height:900px;
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:0;
}
.al-rings span{
  position:absolute; top:50%; left:50%;
  border:1px solid var(--sage);
  border-radius:50%;
  opacity:0.14;
}
.al-rings span:nth-child(1){ width:260px;  height:260px;  margin:-130px 0 0 -130px; }
.al-rings span:nth-child(2){ width:460px;  height:460px;  margin:-230px 0 0 -230px; opacity:0.11; }
.al-rings span:nth-child(3){ width:660px;  height:660px;  margin:-330px 0 0 -330px; opacity:0.08; }
.al-rings span:nth-child(4){ width:860px;  height:860px;  margin:-430px 0 0 -430px; opacity:0.06; }

.al-hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.al-hero .crumb{ margin-bottom:var(--s4); }

.al-wordmark{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.6rem, 12vw, 6rem);
  line-height:1.05;
  color:var(--sage-deep);
  letter-spacing:clamp(0.08em, 2vw, 0.28em);
  padding-left:clamp(0.08em, 2vw, 0.28em); /* optical centering against the tracking */
  margin:var(--s3) 0 var(--s4);
}

.al-tagline{
  font-family:var(--font-display);
  font-size:clamp(1.35rem, 3vw, 2rem);
  line-height:1.35;
  color:var(--ink);
  max-width:22ch;
  margin:0 auto var(--s5);
  letter-spacing:-0.02em;
}

.al-meta{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--s2) var(--s4);
  margin-bottom:var(--s5);
  font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase;
  color:#6b6558;
}
.al-meta span{ display:inline-block; }

/* ---------- Who this is for ---------- */
.al-section{ padding:var(--s7) 0; }
.al-head{ text-align:center; margin-bottom:var(--s5); }
.al-head .eyebrow{ margin-bottom:var(--s2); }
.al-rule{ width:56px; height:1px; background:var(--sage); margin:var(--s3) auto 0; opacity:0.6; }

.al-intro{
  text-align:center; font-family:var(--font-display); font-style:italic;
  font-size:1.15rem; color:var(--sage-deep); margin-bottom:var(--s4);
}

.al-list{ max-width:640px; margin:0 auto; list-style:none; padding:0; }
.al-list li{
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(1.05rem, 2.2vw, 1.3rem);
  line-height:1.45;
  color:var(--ink);
  padding:var(--s3) 0 var(--s3) var(--s4);
  border-bottom:1px solid var(--line);
}
.al-list li:last-child{ border-bottom:none; }
/* the client used an em dash as the bullet mark; a small ring keeps the
   editorial feel without putting a dash character into visible copy */
.al-list li::before{
  content:''; position:absolute; left:2px; top:calc(var(--s3) + 0.62em);
  width:7px; height:7px; border:1px solid var(--sage); border-radius:50%;
}

/* ---------- What to expect ---------- */
.al-expect{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--s5) var(--s4);
  max-width:980px; margin:0 auto;
}
.al-expect-item{ }
.al-step{
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:#D9E0CB; font-weight:500;
  padding-bottom:var(--s2); margin-bottom:var(--s2);
  border-bottom:1px solid rgba(246,241,231,0.3);
}
.al-expect-item h3{ margin-bottom:var(--s2); }
.al-expect-item p{ font-size:0.98rem; line-height:1.7; }

/* ---------- About Ferdous ---------- */
.al-about{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  gap:var(--s6); align-items:center;
}
.al-about-photo img{
  width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover;
  border-radius:28px;
  box-shadow:0 24px 48px -22px rgba(38,38,31,0.32);
}
.al-quote{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.3rem, 2.6vw, 1.75rem);
  line-height:1.45; color:var(--ink);
  margin-bottom:var(--s3); letter-spacing:-0.02em;
}
.al-about-body{ color:#4a4a3f; line-height:1.8; }
.al-signoff{ margin-top:var(--s4); }
.al-signoff strong{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:1.1rem; color:var(--sage-deep);
}
.al-signoff span{ font-size:0.85rem; color:#6b6558; letter-spacing:0.04em; }

/* ---------- Details ---------- */
.al-details-layout{
  display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:var(--s6); align-items:center;
}
.al-details-card{
  background:var(--paper); border:1px solid var(--line);
  padding:var(--s5);
}
.al-details-card h2{ margin-bottom:var(--s4); }
.al-detail{
  display:grid; grid-template-columns:9rem 1fr; gap:var(--s3);
  padding:var(--s3) 0; border-top:1px solid var(--line);
}
.al-detail:first-of-type{ border-top:none; padding-top:0; }
.al-detail dt{
  font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--sage-deep); font-weight:500;
}
.al-detail dd{ margin:0; font-family:var(--font-display); font-size:1.1rem; }
.al-detail dd small{
  display:block; font-family:var(--font-body); font-size:0.85rem;
  color:#6b6558; letter-spacing:0.02em; margin-top:4px;
}
.al-details-photo img{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:28px; box-shadow:0 24px 48px -22px rgba(38,38,31,0.32);
}
.al-details-cta{ margin-top:var(--s5); }

/* ---------- Details band (ALIGNED page): one row across, no card ---------- */
.al-details-band{ padding:var(--s6) 0; }
.al-details-band .al-head{ margin-bottom:var(--s4); }
.al-facts{
  display:grid; grid-template-columns:repeat(6, 1fr);
  margin:0; text-align:center; align-items:stretch;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:var(--s4) 0;
}
.al-facts > div{ padding:0 var(--s2); border-left:1px solid var(--line); }
.al-facts > div:first-child{ border-left:none; }
.al-facts dt{
  font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--sage-deep); font-weight:500; margin-bottom:var(--s2);
}
.al-facts dd{
  margin:0; font-family:var(--font-display); font-size:1.02rem; line-height:1.3;
}
.al-facts dd small{
  display:block; font-family:var(--font-body); font-size:0.76rem;
  color:#6b6558; line-height:1.5; margin-top:6px;
}

/* ---------- Waitlist ---------- */
.al-join{ padding:var(--s7) 0; text-align:center; }
.al-join h2{ max-width:18ch; margin:0 auto var(--s3); }
.al-join .al-join-sub{ color:#4a4a3f; margin-bottom:var(--s5); }
.al-form-card{
  background:var(--paper); border:1px solid var(--line);
  padding:var(--s5); max-width:520px; margin:0 auto;
  text-align:left;
}
.al-form-note{
  font-size:0.85rem; color:#6b6558; margin-top:var(--s3); text-align:center;
}
.al-form-card .btn{ width:100%; justify-content:center; }

/* ---------- Confirmation page ---------- */
.al-confirm{ padding:calc(var(--s8) + var(--s4)) 0 var(--s7); text-align:center; }
.al-confirm-card{
  background:var(--paper); border:1px solid var(--line);
  padding:var(--s6) var(--s5); max-width:620px; margin:0 auto;
}
.al-confirm-mark{
  display:flex; align-items:center; justify-content:center;
  width:60px; height:60px; margin:0 auto var(--s4);
  border:1px solid var(--sage); border-radius:50%; color:var(--sage-deep);
}
.al-confirm-mark svg{ width:26px; height:26px; }
.al-confirm-card h1{ font-size:clamp(2rem, 5vw, 3rem); margin-bottom:var(--s3); }
.al-confirm-card p{ color:#4a4a3f; }
.al-confirm-card .btn{ margin-top:var(--s5); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .al-about, .al-details-layout{ grid-template-columns:1fr; gap:var(--s5); }
  /* justify-self, not margin:auto. An auto side-margin on a grid item cancels
     the default stretch, so the item falls back to fit-content, which is zero
     until a lazy image loads. That reserved nothing, shifted the page 456px on
     load, and made the "Join the Waitlist" anchor land short of the form. */
  .al-about-photo{ max-width:420px; width:100%; justify-self:center; }
  .al-details-photo{ max-width:420px; width:100%; justify-self:center; }
}

/* details band reflows: 3 across on tablet, 2 on phones. Vertical rules are
   dropped once it wraps, otherwise they land mid-row and look like mistakes. */
@media (max-width:1024px){
  .al-facts{ grid-template-columns:repeat(3, 1fr); gap:var(--s4) 0; }
  .al-facts > div:nth-child(3n+1){ border-left:none; }
}
@media (max-width:560px){
  .al-facts{ grid-template-columns:repeat(2, 1fr); gap:var(--s4) 0; padding:var(--s3) 0; }
  .al-facts > div{ border-left:none; }
  .al-facts > div:nth-child(even){ border-left:1px solid var(--line); }
}

@media (max-width:767px){
  .al-details-band{ padding:var(--s5) 0; }
  .al-hero{ padding:calc(var(--s8) + var(--s2)) 0 var(--s6); }
  .al-section, .al-join{ padding:var(--s6) 0; }
  .al-rings{ width:560px; height:560px; }
  .al-rings span:nth-child(4){ display:none; }
  .al-tagline{ max-width:20ch; }
  .al-meta{ gap:var(--s1) var(--s3); font-size:0.72rem; letter-spacing:0.09em; }
  .al-detail{ grid-template-columns:1fr; gap:6px; }
  .al-details-card, .al-form-card{ padding:var(--s4); }
  .al-list li{ padding-left:var(--s3); }
}

@media (max-width:400px){
  .al-wordmark{ letter-spacing:0.06em; padding-left:0.06em; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}