/* =========================================================
   SHANTI MEDITATION SCHOOL — HOMEPAGE
   Target layout: compact editorial homepage mockup
   ========================================================= */

:root{
  --ink:#26342c;
  --muted:#667168;
  --cream:#f4f0e8;
  --paper:#fbfaf7;
  --line:#ddd8ce;
  --sand:#e7dfd1;
  --dark:#263b30;
  --gold:#a7845a;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body.homepage{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Georgia,"Times New Roman",serif;
  overflow-x:hidden;
}

.homepage a{color:inherit;text-decoration:none}
.homepage img{display:block;max-width:100%}

.site-container{
  width:min(1180px,calc(100% - 72px));
  margin:0 auto;
}

/* ---------- HEADER ---------- */
.home-header{
  position:absolute;
  inset:0 0 auto;
  z-index:20;
  color:var(--ink);
}

.home-nav-wrap{
  width:min(1280px,calc(100% - 54px));
  min-height:72px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.home-logo{width:145px;display:block}
.home-logo img{width:100%;height:auto}

.home-nav{
  display:flex;
  align-items:center;
  gap:27px;
  font:11px Arial,sans-serif;
  letter-spacing:.01em;
}

.home-nav a{position:relative;white-space:nowrap}
.home-nav a.active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-11px;
  height:1px;
  background:#9d7850;
}
.nav-chevron{font-size:10px;margin-left:3px}
.nav-cta{
  padding:10px 15px;
  border-radius:4px;
  color:#fff!important;
  background:var(--dark);
}
.home-menu-toggle{
  display:none;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:24px;
}

/* ---------- HERO ---------- */
.hero{
  min-height:500px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
}

.hero-image,
.hero-overlay{
  position:absolute;
  inset:0;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-overlay{
  background:linear-gradient(90deg,
    rgba(251,248,239,.94) 0%,
    rgba(251,248,239,.74) 28%,
    rgba(251,248,239,.16) 62%,
    rgba(251,248,239,.03) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 72px));
  margin:55px auto 0;
}

.hero h1{
  margin:0;
  font-size:clamp(54px,5.2vw,78px);
  line-height:.93;
  letter-spacing:-.045em;
  font-weight:400;
  color:#17231b;
}
.hero h1 em{font-style:normal;color:#355b49}

.hero-rule{
  width:24px;
  height:1px;
  background:#a4774b;
  margin:17px 0 13px;
}

.hero-copy{
  margin:0;
  max-width:360px;
  font:13px/1.55 Arial,sans-serif;
  color:#29332d;
}

.hero-highlight{
  margin:10px 0 13px;
  font:700 13px Arial,sans-serif;
  color:#28352d;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:25px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:9px 15px;
  border-radius:4px;
  font:10px Arial,sans-serif;
  letter-spacing:.01em;
}

.button-dark{
  background:var(--dark);
  color:#fff!important;
}
.button-outline{
  border:1px solid #889189;
  background:transparent;
}

.hero-text-link{
  font:10px Arial,sans-serif;
  border:0;
}
.hero-text-link span{font-size:15px;margin-left:5px}

.hero-location{
  position:absolute;
  left:0;
  bottom:-1px;
  font:10px Arial,sans-serif;
  color:#26342c;
}

/* ---------- SHARED SECTION SPACING ---------- */
.section-tight{padding:22px 0 24px}

.section-title{
  text-align:center;
  margin:0 auto 13px;
}
.section-title h2{
  margin:0;
  font-size:17px;
  line-height:1.1;
  font-weight:400;
  letter-spacing:.015em;
}
.section-title p{
  margin:5px 0 0;
  font:10px Arial,sans-serif;
  color:var(--muted);
}
.section-title.left{text-align:left;margin:0}
.title-ornament{
  display:block;
  margin:2px auto 0;
  color:#a98a67;
  font-size:14px;
  line-height:.7;
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-bottom:3px;
  border-bottom:1px solid currentColor;
  font:9px Arial,sans-serif;
  letter-spacing:.02em;
}
.text-link span{font-size:14px;line-height:1}

/* ---------- TWO WAYS ---------- */
.paths{background:var(--paper)}
.path-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.path-card{
  min-height:215px;
  display:grid;
  grid-template-columns:39% 61%;
  background:#fff;
  border:1px solid rgba(38,52,44,.07);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 1px 5px rgba(38,52,44,.035);
}

.path-image{min-height:100%}
.path-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.path-body{padding:13px 14px 12px}
.round-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#3e5949;
  color:#fff;
  font-size:15px;
  margin-bottom:7px;
}
.round-icon.gold{background:#b08a5a}

.path-body h3,
.explore-body h3{
  margin:0 0 3px;
  font-size:14px;
  line-height:1.05;
  font-weight:400;
}
.path-subtitle{
  margin:0 0 7px;
  color:#9a7650;
  font:9px Arial,sans-serif;
}
.path-meta{
  margin:0 0 7px;
  font:9px Arial,sans-serif;
}
.path-body > p:not(.path-subtitle):not(.path-meta):not(.mini-label):not(.themes){
  margin:0 0 6px;
  max-width:290px;
  font:9px/1.42 Arial,sans-serif;
  color:#4d5750;
}
.mini-label{
  margin:5px 0 1px;
  font:700 8px Arial,sans-serif;
}
.themes{
  margin:0 0 5px;
  font:8px/1.35 Arial,sans-serif;
  color:#4d5750;
}

/* ---------- KEEP EXPLORING ---------- */
.explore{
  background:#f7f3ec;
  border-top:1px solid rgba(38,52,44,.025);
}
.explore-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}
.explore-card{
  display:grid;
  grid-template-columns:40% 60%;
  min-height:155px;
  background:#fff;
  border:1px solid rgba(38,52,44,.07);
  border-radius:4px;
  overflow:hidden;
}
.explore-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.explore-body{
  padding:13px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.explore-body > p:last-child{
  margin:0;
  font:9px/1.45 Arial,sans-serif;
  color:#4d5750;
  max-width:230px;
}
.section-button{text-align:center;margin-top:10px}
.section-button .button{min-width:190px}

/* ---------- MONTHLY RHYTHM ---------- */
.rhythm{
  background:var(--paper);
  padding:27px 0;
}
.rhythm-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:38px;
  align-items:center;
}
.rhythm-left{padding:0 4px}
.rhythm-left .section-title h2{font-size:16px}
.rhythm-left .section-title p{font-size:9px}

.rhythm-flow{
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr;
  align-items:center;
  gap:3px;
  margin-top:17px;
}
.rhythm-step{text-align:center}
.rhythm-icon{
  width:32px;
  height:32px;
  border:1px solid #ddd7cb;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 5px;
  font-size:14px;
}
.rhythm-step > span{
  font:8px Arial,sans-serif;
  color:#555f58;
}
.rhythm-step h3{
  margin:4px 0 4px;
  font-size:9px;
  line-height:1.18;
  font-weight:700;
}
.rhythm-step p{
  margin:0;
  font:8px/1.35 Arial,sans-serif;
  color:#68726b;
}
.rhythm-arrow{
  text-align:center;
  color:#6e766f;
  font-size:13px;
}

.upcoming-card{
  padding:15px;
  background:#f4f0e8;
  border-radius:3px;
}
.upcoming-label{
  margin:0 0 7px;
  font:10px Arial,sans-serif;
  letter-spacing:.1em;
}
.upcoming-item{
  display:grid;
  grid-template-columns:95px 1fr;
  gap:11px;
  padding:8px 0;
  border-bottom:1px solid #ddd6c9;
  align-items:center;
}
.upcoming-item img{
  width:95px;
  height:55px;
  object-fit:cover;
}
.upcoming-item span{
  font:7px Arial,sans-serif;
  color:#68726b;
  letter-spacing:.04em;
}
.upcoming-item h3{
  margin:3px 0 2px;
  font-size:13px;
  line-height:1.05;
  font-weight:400;
}
.upcoming-item p{
  margin:0;
  font:8px/1.3 Arial,sans-serif;
  color:#667168;
}
.upcoming-card > .text-link{margin-top:8px}

/* ---------- APPROACH STRIP ---------- */
.approach{
  background:#f3efe7;
  border-top:1px solid #eee8de;
  border-bottom:1px solid #eee8de;
  padding:18px 0;
}
.approach-grid{
  display:grid;
  grid-template-columns:85px 1.2fr 1.9fr;
  gap:24px;
  align-items:center;
}
.approach-mark{
  width:62px;
  height:62px;
  border:7px solid #4c6958;
  border-right-color:transparent;
  border-bottom-color:#809385;
  border-radius:50%;
  transform:rotate(-25deg);
}
.approach-copy h2{
  margin:0 0 5px;
  font-size:12px;
  line-height:1.1;
  font-weight:400;
  letter-spacing:.02em;
}
.approach-copy p{
  margin:0;
  max-width:380px;
  font:8px/1.45 Arial,sans-serif;
  color:#667168;
}
.principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-left:1px solid #ddd7cc;
}
.principles > div{
  padding:0 15px;
  text-align:center;
  border-right:1px solid #ddd7cc;
}
.principles span{
  display:block;
  font-size:18px;
  margin-bottom:4px;
}
.principles h3{
  margin:0 0 3px;
  font:700 9px Arial,sans-serif;
}
.principles p{
  margin:0;
  font:7px/1.4 Arial,sans-serif;
  color:#667168;
}

/* ---------- TRADITIONS ---------- */
.traditions{background:var(--paper)}
.traditions .section-title{margin-bottom:10px}
.tradition-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
.tradition-item{text-align:center}
.tradition-item img{
  width:100%;
  aspect-ratio:1.65;
  object-fit:cover;
  border-radius:3px;
  margin-bottom:5px;
}
.tradition-item h3{
  margin:0 0 3px;
  font-size:9px;
  line-height:1.1;
  font-weight:400;
}
.tradition-item p{
  margin:0;
  font:7px/1.35 Arial,sans-serif;
  color:#667168;
}
.center-link{text-align:center;margin-top:9px}

/* ---------- TEACHER + REVIEWS ---------- */
.teacher-reviews{
  background:#f7f3ec;
}
.teacher-review-grid{
  display:grid;
  grid-template-columns:.8fr 2.2fr;
  gap:27px;
  align-items:start;
}
.teacher-mini{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:12px;
  align-items:center;
}
.teacher-mini > img{
  width:100%;
  aspect-ratio:1.02;
  object-fit:cover;
  border-radius:3px;
}
.small-label{
  margin:0 0 4px;
  font:8px Arial,sans-serif;
  letter-spacing:.12em;
  color:#6c756e;
}
.teacher-mini-copy h2{
  margin:0 0 2px;
  font-size:20px;
  line-height:1;
  font-weight:400;
}
.teacher-role{
  margin:0 0 7px;
  font:7px Arial,sans-serif;
  color:#667168;
}
.teacher-mini-copy > p:not(.small-label):not(.teacher-role){
  margin:0 0 8px;
  font:8px/1.4 Arial,sans-serif;
  color:#667168;
}
.teacher-mini-copy .text-link{font-size:7px}

.reviews-mini .section-title{
  margin:0 0 7px;
}
.reviews-mini .section-title h2{font-size:12px}
.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.review-card{
  min-height:112px;
  background:#fff;
  border:1px solid #e2ddd4;
  border-radius:3px;
  padding:10px;
  display:flex;
  flex-direction:column;
}
.review-quote{
  margin:0 0 3px;
  font-size:24px;
  line-height:.6;
  color:#54705d;
}
.review-card > p:not(.review-quote){
  margin:0;
  flex:1;
  font:8px/1.4 Arial,sans-serif;
  color:#59635c;
}
.review-person{
  margin-top:7px;
  padding-top:5px;
  border-top:1px solid #e5dfd6;
}
.review-person strong{
  display:block;
  font:700 8px Arial,sans-serif;
}
.review-person span{
  display:block;
  margin-top:2px;
  font:7px Arial,sans-serif;
  color:#707970;
}

/* ---------- PLACE + READY ---------- */
.place-cta{
  background:var(--paper);
  padding:14px 0;
}
.place-cta-grid{
  display:grid;
  grid-template-columns:1.55fr 1fr .85fr;
  gap:0;
  align-items:stretch;
}
.place-image img{
  width:100%;
  height:150px;
  object-fit:cover;
}
.place-copy{
  padding:7px 22px;
  border-right:1px solid #ddd7cd;
}
.place-copy h2{
  margin:0 0 6px;
  font-size:19px;
  line-height:1;
  font-weight:400;
}
.place-copy > p:not(.small-label){
  margin:0 0 7px;
  font:8px/1.4 Arial,sans-serif;
  color:#667168;
}
.ready-box{
  padding:7px 0 7px 20px;
}
.ready-box > p:not(.small-label){
  margin:0 0 7px;
  font:8px Arial,sans-serif;
  color:#667168;
}
.ready-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  margin-bottom:5px;
  background:#e9e2d5;
  border-radius:3px;
}
.ready-option:nth-of-type(2){background:#e4d6c1}
.ready-option > span{font-size:14px}
.ready-option strong,
.ready-option small{display:block}
.ready-option strong{font:9px Arial,sans-serif}
.ready-option small{font:7px Arial,sans-serif;color:#69726b;margin-top:2px}

/* ---------- FOOTER ---------- */
.home-footer{
  background:#244235;
  color:#fff;
}
.footer-grid{
  padding:17px 0 13px;
  display:grid;
  grid-template-columns:1.35fr repeat(5,1fr);
  gap:20px;
}
.footer-logo{
  width:112px;
  margin-bottom:5px;
  filter:brightness(0) invert(1);
}
.home-footer p{
  margin:0 0 4px;
  font:7px/1.35 Arial,sans-serif;
  color:rgba(255,255,255,.75);
}
.footer-social{
  margin-top:8px;
  font-size:11px;
}
.home-footer h4{
  margin:0 0 5px;
  font:700 8px Arial,sans-serif;
  color:#d4b98e;
  text-transform:uppercase;
}
.home-footer a{
  display:block;
  margin-bottom:3px;
  font:7px/1.25 Arial,sans-serif;
  color:rgba(255,255,255,.8);
}
.footer-bottom{
  padding:6px 10px;
  border-top:1px solid rgba(255,255,255,.14);
  text-align:center;
  font:7px Arial,sans-serif;
  color:rgba(255,255,255,.55);
}

/* ---------- TABLET ---------- */
@media (max-width:900px){
  .site-container,
  .hero-content{width:calc(100% - 44px)}
  .home-nav-wrap{width:calc(100% - 34px)}
  .home-menu-toggle{display:block}
  .home-nav{
    display:none;
    position:absolute;
    top:64px;
    left:17px;
    right:17px;
    padding:10px 15px;
    background:rgba(251,250,247,.98);
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .home-nav.is-open{display:flex}
  .home-nav a{padding:9px 3px;border-bottom:1px solid #e5dfd5}
  .home-nav .nav-cta{border:0;margin-top:4px;text-align:center}
  .hero{min-height:560px}
  .hero-content{margin-top:65px}
  .path-card{grid-template-columns:42% 58%}
  .rhythm-grid{grid-template-columns:1fr;gap:22px}
  .upcoming-card{max-width:600px}
  .approach-grid{grid-template-columns:65px 1fr}
  .principles{grid-column:1 / -1}
  .teacher-review-grid{grid-template-columns:1fr}
  .teacher-mini{max-width:600px}
  .place-cta-grid{grid-template-columns:1fr 1fr}
  .place-image{grid-row:1 / 3}
  .ready-box{border-left:1px solid #ddd7cd}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:600px){
  .site-container,.hero-content{width:calc(100% - 30px)}
  .home-nav-wrap{width:calc(100% - 26px);min-height:64px}
  .home-logo{width:125px}
  .hero{min-height:590px}
  .hero-content{margin-top:70px}
  .hero h1{font-size:54px}
  .desktop-only{display:none}
  .hero-copy{font-size:12px;max-width:300px}
  .hero-actions{gap:14px}
  .path-grid,.explore-grid{grid-template-columns:1fr}
  .path-card,.explore-card{grid-template-columns:42% 58%}
  .path-body{padding:11px}
  .path-body h3,.explore-body h3{font-size:13px}
  .path-body > p:not(.path-subtitle):not(.path-meta):not(.mini-label):not(.themes){font-size:8px}
  .rhythm-flow{grid-template-columns:1fr;display:flex;flex-direction:column;gap:7px}
  .rhythm-arrow{transform:rotate(90deg)}
  .approach-grid{grid-template-columns:1fr;text-align:center}
  .approach-mark{margin:0 auto}
  .principles{grid-template-columns:1fr;border-left:0}
  .principles > div{border-right:0;border-top:1px solid #ddd7cc;padding:9px}
  .tradition-grid{grid-template-columns:repeat(2,1fr)}
  .teacher-mini{grid-template-columns:1fr}
  .review-grid{grid-template-columns:1fr}
  .place-cta-grid{grid-template-columns:1fr}
  .place-image{grid-row:auto}
  .place-copy{border-right:0;border-bottom:1px solid #ddd7cd;padding:12px 0}
  .ready-box{border-left:0;padding:12px 0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:13px}
}

/* Prevent old global Bootstrap defaults from creating extra vertical rhythm. */
.homepage section h1,
.homepage section h2,
.homepage section h3,
.homepage section p{margin-top:0}

/* ---------- APPROACH PRINCIPLE ICONS ---------- */
.principles span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin:0 auto 4px;
  color:var(--ink);
  font-size:0;
}

.principles span svg{
  display:block;
  width:29px;
  height:29px;
}