/* ================= FÁZY MESIACA / ASTRO ================= */
.astro-page { max-width: 1100px; }


.astro-hero { background:linear-gradient(135deg,rgba(15,20,9,.95) 0%,rgba(43,58,39,.85) 100%); color:var(--cream); padding:28px 32px; border-radius:14px; margin-bottom:22px; border:1px solid rgba(201,169,97,.2); box-shadow:var(--shadow-md); position:relative; overflow:hidden; }
.astro-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 25%,rgba(201,169,97,.18),transparent 45%),radial-gradient(circle at 20% 75%,rgba(201,169,97,.08),transparent 35%); pointer-events:none; }
.astro-hero::after { content:''; position:absolute; inset:0; background-image:radial-gradient(1px 1px at 20% 15%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 80% 35%,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 40% 60%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 60% 80%,rgba(255,255,255,.3),transparent); pointer-events:none; }
.astro-hero-content { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.astro-hero-left { min-width:0; }
.astro-hero-eyebrow { font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.astro-hero h3 { font-family:'Lora',serif; font-size:26px; color:var(--gold); font-weight:800; letter-spacing:1px; margin-bottom:6px; }
.astro-hero-date { font-family:'Lora',serif; font-style:italic; font-size:15px; color:var(--parchment); opacity:.9; }
.astro-hero-now { background:rgba(201,169,97,.12); border:1px solid rgba(201,169,97,.3); border-radius:10px; padding:14px 22px; text-align:center; min-width:160px; flex-shrink:0; }
.astro-hero-now .lbl { font-size:9px; text-transform:uppercase; letter-spacing:2px; color:var(--parchment); opacity:.75; font-weight:600; }
.astro-hero-now .val { font-family:'Lora',serif; font-size:28px; color:var(--gold); font-weight:800; margin-top:4px; letter-spacing:2px; }

.astro-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px; }
.astro-card { background:var(--cream-light); border:1px solid var(--border); border-radius:12px; padding:22px 24px; box-shadow:var(--shadow-sm); }
.astro-card-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.astro-card-header .ico { width:36px; height:36px; border-radius:8px; background:var(--green-deep); border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.astro-card-header .ico svg { width:18px; height:18px; fill:var(--gold); }
.astro-card-header h4 { font-family:'Lora',serif; font-size:16px; color:var(--green-deep); font-weight:700; letter-spacing:.5px; }

.sun-arc { height:160px; position:relative; margin-bottom:18px; }
.sun-arc svg { width:100%; height:100%; }
.sun-times-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.sun-time { background:var(--cream); border:1px solid var(--border); border-radius:8px; padding:10px 8px; text-align:center; }
.sun-time .ic { font-size:18px; margin-bottom:2px; }
.sun-time .lbl { font-size:9px; text-transform:uppercase; letter-spacing:1.4px; color:var(--brown-wood); font-weight:600; }
.sun-time .val { font-family:'Lora',serif; font-size:16px; color:var(--green-deep); font-weight:800; margin-top:4px; }

.moon-display { text-align:center; margin-bottom:18px; }
.moon-shape { width:140px; height:140px; border-radius:50%; margin:0 auto 16px; background:radial-gradient(circle at 35% 35%,#faf3e3 0%,#e0c37a 35%,#c9a961 60%,#8b6f47 100%); position:relative; box-shadow:0 0 30px rgba(201,169,97,.35),inset -42px 0 50px -8px rgba(15,20,9,.7); }
.moon-shape .crater { position:absolute; border-radius:50%; background:rgba(0,0,0,.1); }
.moon-shape .crater.c1 { width:14px; height:14px; top:28px; left:38px; }
.moon-shape .crater.c2 { width:10px; height:10px; top:65px; left:36px; opacity:.7; }
.moon-shape .crater.c3 { width:8px; height:8px; top:50px; left:60px; opacity:.55; }
.moon-shape .crater.c4 { width:12px; height:12px; top:90px; left:50px; opacity:.6; }
.moon-shape .crater.c5 { width:6px; height:6px; top:38px; left:65px; opacity:.5; }
.moon-phase-name { font-family:'Lora',serif; font-size:22px; color:var(--green-deep); font-weight:800; letter-spacing:.5px; margin-bottom:4px; }
.moon-phase-illum { font-family:'Lora',serif; font-size:36px; color:var(--gold-dark); font-weight:800; letter-spacing:-1px; line-height:1; }
.moon-phase-illum sup { font-size:16px; color:var(--brown-wood); font-weight:600; margin-left:2px; vertical-align:super; }
.moon-phase-illum-sub { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--brown-wood); font-weight:600; margin-top:4px; }
.moon-cycle-bar { margin-top:16px; height:6px; background:var(--parchment); border-radius:3px; position:relative; }
.moon-cycle-bar::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0%,var(--gold-light) 25%,var(--gold) 50%,var(--gold-light) 75%,transparent 100%); border-radius:3px; opacity:.35; }
.moon-cycle-bar .marker { position:absolute; top:-4px; width:14px; height:14px; border-radius:50%; background:var(--gold); border:2px solid var(--cream-light); box-shadow:0 0 0 2px var(--gold-dark); transform:translateX(-50%); z-index:1; }
.moon-cycle-labels { display:flex; justify-content:space-between; margin-top:8px; font-size:9px; text-transform:uppercase; letter-spacing:1.2px; color:var(--brown-wood); font-weight:600; }

.phase-milestones { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.phase-milestone { background:var(--cream-light); border:1px solid var(--border); border-radius:10px; padding:18px 14px; text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); }
.phase-milestone::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold); }
.phase-milestone.full::before { background:linear-gradient(90deg,#f5e6c0,#c9a961); }
.phase-milestone.new::before { background:var(--brown-dark); }
.phase-milestone.first::before { background:linear-gradient(90deg,var(--gold),var(--brown-leather)); }
.phase-milestone.last::before { background:linear-gradient(90deg,var(--brown-leather),var(--gold)); }
.milestone-icon { width:44px; height:44px; border-radius:50%; margin:0 auto 10px; background-color:#c9a961; }
.milestone-icon.full { background:radial-gradient(circle at 35% 35%,#faf3e3 0%,#e0c37a 35%,#c9a961 65%,#8b6f47 100%); }
.milestone-icon.new { background:radial-gradient(circle at 35% 35%,#3d2817 0%,#1a2416 100%); }
.milestone-icon.first { background:linear-gradient(90deg,#1a2416 50%,transparent 50%),radial-gradient(circle at 65% 35%,#faf3e3 0%,#c9a961 60%,#8b6f47 100%); }
.milestone-icon.last { background:linear-gradient(90deg,transparent 50%,#1a2416 50%),radial-gradient(circle at 35% 35%,#faf3e3 0%,#c9a961 60%,#8b6f47 100%); }
.milestone-name { font-family:'Lora',serif; font-size:11px; color:var(--green-deep); font-weight:700; text-transform:uppercase; letter-spacing:1.3px; }
.milestone-days { font-family:'Lora',serif; font-size:26px; color:var(--gold-dark); font-weight:800; margin:8px 0 4px; line-height:1; }
.milestone-days .unit { font-family:'Inter',sans-serif; font-size:11px; color:var(--brown-wood); font-weight:600; margin-left:4px; }
.milestone-date { font-size:11px; color:var(--brown-wood); font-family:'Lora',serif; font-style:italic; }

.moon-week { background:var(--cream-light); border:1px solid var(--border); border-radius:12px; padding:22px 24px; box-shadow:var(--shadow-sm); }
.moon-week-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.week-day-card { flex:1 1 110px; background:var(--cream); border:1px solid var(--border); border-radius:10px; padding:14px 8px; text-align:center; transition:transform .15s,border-color .15s; }
.week-day-card:hover { transform:translateY(-2px); border-color:var(--gold); }
.week-day-card.today { background:linear-gradient(135deg,var(--green-deep),var(--green-dark)); color:var(--gold); border-color:var(--gold); box-shadow:0 4px 12px rgba(43,58,39,.25); }
.week-day-name { font-size:10px; text-transform:uppercase; letter-spacing:1.4px; color:var(--brown-wood); font-weight:700; }
.week-day-card.today .week-day-name { color:var(--parchment); }
.week-mini-moon { width:36px; height:36px; border-radius:50%; margin:10px auto; background:radial-gradient(circle at 35% 35%,#faf3e3 0%,#e0c37a 35%,#c9a961 65%,#8b6f47 100%); position:relative; }
.week-mini-moon.full-moon { box-shadow:0 0 8px rgba(201,169,97,.6); }
.week-mini-moon.new-moon { background:radial-gradient(circle at 35% 35%,#3d2817 0%,#1a2416 100%); }
.week-mini-moon.gibbous-e { box-shadow:inset 10px 0 10px -2px rgba(15,20,9,.7); }
.week-mini-moon.gibbous-w { box-shadow:inset -10px 0 10px -2px rgba(15,20,9,.7); }
.week-mini-moon.gibbous-w-darker { box-shadow:inset -14px 0 11px -2px rgba(15,20,9,.7); }
.week-mini-moon.first-q { background:linear-gradient(90deg,#1a2416 50%,transparent 50%),radial-gradient(circle at 65% 35%,#faf3e3 0%,#c9a961 60%,#8b6f47 100%); }
.week-mini-moon.last-q { background:linear-gradient(90deg,transparent 50%,#1a2416 50%),radial-gradient(circle at 35% 35%,#faf3e3 0%,#c9a961 60%,#8b6f47 100%); }
.week-mini-moon.crescent-e { background:linear-gradient(90deg,#1a2416 65%,transparent 65%),radial-gradient(circle at 75% 35%,#faf3e3 0%,#c9a961 60%,#8b6f47 100%); }
.week-mini-moon.crescent-w { background:linear-gradient(90deg,transparent 35%,#1a2416 35%),radial-gradient(circle at 25% 35%,#faf3e3 0%,#c9a961 60%,#8b6f47 100%); }
.week-day-phase { font-family:'Lora',serif; font-size:11px; color:var(--ink); font-weight:600; line-height:1.3; }
.week-day-card.today .week-day-phase { color:var(--gold-light); }
.week-day-illum { font-size:10px; color:var(--brown-wood); margin-top:3px; font-family:'Lora',serif; font-weight:700; }
.week-day-card.today .week-day-illum { color:var(--parchment); opacity:.85; }

.hunter-moon-tip { margin-top:18px; padding:14px 18px; background:linear-gradient(90deg,rgba(43,58,39,.06),transparent); border-left:3px solid var(--gold); border-radius:0 8px 8px 0; font-family:'Lora',serif; font-style:italic; font-size:14px; color:var(--brown-dark); line-height:1.55; }
.hunter-moon-tip b { font-family:'Lora',serif; color:var(--green-deep); font-style:normal; font-weight:700; }

@media (max-width: 760px) {
  .astro-grid { grid-template-columns:1fr; }
  .phase-milestones { grid-template-columns:repeat(2,1fr); }
  .astro-hero { padding:18px 18px; }
  .astro-hero-now { margin:0 auto; }
}