/*
 * Healing Flora — "The Green Room" (News page template)
 * Scoped page-specific styles only — every class below is prefixed
 * `gr-` so nothing here touches any other template's markup or the
 * shared design-system.css rules.
 *
 * @package FloraChild
 * @version 1.0.0
 */

:root{
  --gr-dark:      #1E3A1C;  /* deep apothecary green — headings, icon strokes, CTA button */
  --gr-dark-2:    #14260F;  /* darker shade for button hover / gradient depth */
  --gr-circle-bg: #EEEDE2;  /* pale warm-gray circle fill behind icons */
  --gr-band-bg:   #E7EBDD;  /* soft sage band background */
  --gr-amber:     #B8791E;  /* amber accent — reward icon only */
  --gr-amber-bg:  #F3E7D3;  /* pale amber circle fill — reward icon only */
}

/* ── Full-bleed hero banner ───────────────────────────────────────── */
/* v3.4.6: the hero was constrained by the Astra content container, so it
   rendered with side gutters instead of edge-to-edge. Break it out of the
   container to the full viewport width. Scoped to .gr-hero (News page only). */
.gr-hero{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  line-height:0;
  border-bottom:3px solid var(--acc);
}
.gr-hero img{
  display:block;
  width:100%;
  height:auto;
}

/* ── Section heading (small-caps serif, centered) ─────────────────── */
.gr-section-heading{
  text-align:center;
  margin:48px 0 10px;
}
.gr-section-heading h2{
  font-family:'Cinzel',serif;
  font-variant-caps:small-caps;
  font-size:1.5rem;
  font-weight:600;
  color:var(--gr-dark);
  margin:0;
  letter-spacing:.02em;
}
.gr-heading-leaf{
  display:flex;
  justify-content:center;
  color:var(--acc);
  margin:8px 0 22px;
}

/* ── "What You Can Expect" card ───────────────────────────────────── */
.gr-expect-card{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:36px 10px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.gr-expect-item{
  text-align:center;
  padding:0 20px;
  border-left:1px solid var(--line);
}
.gr-expect-item:first-child{border-left:none;}
.gr-icon-circle{
  width:64px;height:64px;border-radius:50%;
  background:var(--gr-circle-bg);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  color:var(--gr-dark);
}
.gr-expect-item h3{
  font-family:'Cinzel',serif;font-weight:600;font-size:1.02rem;
  color:var(--ink);margin:0 0 8px;
}
.gr-expect-item p{
  font-size:.86rem;color:var(--ink-soft);line-height:1.5;margin:0;
}

@media(max-width:880px){
  .gr-expect-card{grid-template-columns:repeat(2,1fr);row-gap:28px;}
  .gr-expect-item:nth-child(3){border-left:none;}
  .gr-expect-item:nth-child(1),.gr-expect-item:nth-child(2),
  .gr-expect-item:nth-child(3),.gr-expect-item:nth-child(4){padding-top:6px;}
}
@media(max-width:520px){
  .gr-expect-card{grid-template-columns:1fr;}
  .gr-expect-item{border-left:none !important;padding:14px 8px;}
}

/* ── Two-column layout: Recent + What's Inside ────────────────────── */
.gr-two-col{
  display:grid;
  grid-template-columns:1.85fr 1fr;
  gap:26px;
  align-items:start;
  margin-top:56px;
}
@media(max-width:880px){
  .gr-two-col{grid-template-columns:1fr;}
}

.gr-col-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:14px;
}
.gr-col-head h2{
  font-family:'Cinzel',serif;font-variant-caps:small-caps;
  font-size:1.28rem;font-weight:600;color:var(--gr-dark);margin:0;
}
.gr-view-all{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.84rem;font-weight:600;color:var(--acc);
  text-decoration:none;white-space:nowrap;
}
.gr-view-all:hover{color:var(--ah);}
.gr-view-all svg{width:14px;height:14px;}

.gr-card{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:8px 22px;
}

/* Recent list rows */
.gr-recent-item{
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.gr-recent-item:last-child{border-bottom:none;}
.gr-recent-icon{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gr-circle-bg);color:var(--gr-dark);
}
.gr-recent-icon.is-reward{background:var(--gr-amber-bg);color:var(--gr-amber);}
.gr-recent-body{flex:1;min-width:0;}
.gr-tag-pill{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);background:var(--cream);
  border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin-bottom:7px;
}
.gr-recent-title{
  font-weight:700;color:var(--ink);font-size:.98rem;margin:0 0 4px;
}
.gr-recent-desc{
  font-size:.86rem;color:var(--ink-soft);margin:0 0 8px;line-height:1.45;
}
.gr-recent-date{
  display:flex;align-items:center;gap:6px;font-size:.78rem;color:#9a9a9a;
}
.gr-recent-date svg{width:13px;height:13px;flex:none;}
.gr-recent-chevron{
  flex:none;align-self:center;color:#c9cdc9;font-size:1.3rem;line-height:1;
  padding-left:4px;
}

.gr-view-all-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:18px 0 20px;padding:13px 20px;
  border:1.5px solid var(--gr-dark);border-radius:999px;
  color:var(--gr-dark);font-weight:600;font-size:.92rem;
  text-decoration:none;background:transparent;
}
.gr-view-all-btn:hover{background:var(--gr-dark);color:#fff;}

/* What's Inside sidebar list */
.gr-sidebar-item{
  display:flex;align-items:flex-start;gap:14px;padding:16px 0;
}
.gr-sidebar-item + .gr-sidebar-item{border-top:1px solid var(--line);}
.gr-sidebar-icon{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--gr-circle-bg);color:var(--gr-dark);
  display:flex;align-items:center;justify-content:center;
}
.gr-sidebar-icon svg{width:18px;height:18px;}
.gr-sidebar-body h4{
  font-family:'Cinzel',serif;font-weight:600;font-size:.94rem;color:var(--ink);margin:0 0 4px;
}
.gr-sidebar-body p{
  font-size:.82rem;color:var(--ink-soft);margin:0;line-height:1.45;
}

/* ── Bottom CTA band ───────────────────────────────────────────────── */
.gr-cta-band{
  position:relative;overflow:hidden;
  background:var(--gr-band-bg);
  border-radius:var(--radius);
  padding:36px 40px;
  margin:52px 0 60px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.gr-cta-branch{
  position:absolute;left:-10px;bottom:-10px;color:var(--sage-dark);opacity:.25;
  pointer-events:none;
}
.gr-cta-text{position:relative;z-index:1;}
.gr-cta-text h3{
  font-family:'Cinzel',serif;font-size:1.4rem;font-weight:600;color:var(--gr-dark);margin:0 0 8px;
}
.gr-cta-text p{
  color:var(--ink-soft);margin:0 0 6px;max-width:520px;line-height:1.55;
}
.gr-cta-italic{
  font-family:'Cinzel',serif;font-style:italic;color:var(--gr-dark);font-size:.98rem;
}
.gr-cta-button{
  position:relative;z-index:1;flex:none;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--gr-dark);color:#fff;
  padding:14px 26px;border-radius:999px;
  font-weight:600;font-size:.94rem;text-decoration:none;
}
.gr-cta-button:hover{background:var(--gr-dark-2);color:#fff;}
.gr-cta-button svg{width:15px;height:15px;}

@media(max-width:700px){
  .gr-cta-band{flex-direction:column;align-items:flex-start;padding:30px 26px;}
  .gr-cta-button{width:100%;justify-content:center;}
}


/* ── How to Access — three-step cards (2026-07-09) ── */
.gr-access-intro{ text-align:center; max-width:640px; margin:0 auto 30px; color:var(--ink-soft); font-size:.92rem; line-height:1.6; }
.gr-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gr-step{ position:relative; background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px 24px 26px; text-align:center; }
.gr-step-num{ position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:32px; height:32px; border-radius:50%; background:var(--gr-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; font-weight:700; font-size:.92rem; box-shadow:0 4px 10px -3px rgba(20,38,15,.5); }
.gr-step-icon{ width:64px; height:64px; border-radius:50%; background:var(--gr-circle-bg); color:var(--gr-dark); display:flex; align-items:center; justify-content:center; margin:10px auto 16px; }
.gr-step h3{ font-family:'Cinzel',serif; font-weight:600; font-size:1.02rem; color:var(--ink); margin:0 0 8px; }
.gr-step p{ font-size:.86rem; color:var(--ink-soft); line-height:1.55; margin:0; }
.gr-access-cta{ display:flex; justify-content:center; margin:30px 0 4px; }
@media(max-width:820px){ .gr-steps{ grid-template-columns:1fr; gap:28px; } }