:root {
   --teal: #2A9D8F;
   --teal-light: #3BBFAF;
   --teal-pale: #E0F5F3;
   --lavender: #C9B8E8;
   --lav-light: #EDE6FA;
   --cream: #FDFAF6;
   --charcoal: #2D2D2D;
   --muted: #6B7280;
   --card-bg: rgba(255, 255, 255, 0.82);
   --shadow: 0 8px 32px rgba(42, 157, 143, 0.10);
 }


 
 .stories {
   position: relative;
   padding: 80px 40px 60px;
   display: flex;
   top: 30px;
   flex-direction: column;
   text-align: center;
   align-items: center;
   overflow: hidden;
 }

 .stories::before {
   content: '';
   position: absolute;
   top: -80px;
   left: 50%;
   transform: translateX(-50%);
   width: 700px;
   height: 700px;
   background: radial-gradient(circle, rgba(201, 184, 232, 0.25) 0%, transparent 70%);
   pointer-events: none;
 }

 .ss-banner-section-eyebrow {
   display: inline-block;
   background: var(--teal-pale);
   color: var(--teal);
   width: fit-content;
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   padding: 6px 18px;
   border-radius: 50px;
   margin-bottom: 20px;
 }

 .stories h1 {

   font-size: clamp(2.2rem, 5vw, 3.4rem);
   font-weight: 600;
   line-height: 1.25;
   margin-bottom: 16px;
 }

 .stories h1 em {
   font-style: italic;
   color: var(--teal);
 }

 .stories p {
   max-width: 520px;
   margin: 0 auto 36px;
   font-size: 1.08rem;
   color: var(--muted);
   line-height: 1.7;
 }

 .ss-banner-section-actions {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap;
 }

 .btn-primary {
   background: var(--teal);
   color: #fff;
   border: none;
   border-radius: 50px;
   padding: 14px 32px;
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
   font-family: 'Nunito', sans-serif;
   transition: background 0.2s, transform 0.15s;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .btn-primary:hover {
   background: var(--teal-light);
   transform: translateY(-2px);
 }

 .btn-secondary {
   background: transparent;
   color: var(--teal);
   border: 2px solid var(--teal);
   border-radius: 50px;
   padding: 13px 28px;
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
   font-family: 'Nunito', sans-serif;
   transition: all 0.2s;
 }

 .btn-secondary:hover {
   background: var(--teal-pale);
   transform: translateY(-2px);
 }

 /* ── STATS BAR ── */
 .stats-bar {
   display: flex;
   justify-content: center;
   gap: 48px;
   background: var(--teal);
   padding: 70px 40px;
   flex-wrap: wrap;
 }

 .stat {
   text-align: center;
   color: #fff;
 }

 .stat-num {
   font-size: 1.9rem;
   font-weight: 800;
   display: block;
 }

 .stat-label {
   font-size: 0.82rem;
   opacity: 0.85;
   font-weight: 600;
   letter-spacing: 0.05em;
 }

 /* ── FILTERS ── */
 .filters-section {
   padding: 48px 40px 20px;
 }

 .filters-section h2 {
   font-weight: 600;
   margin-bottom: 8px;
 }

 .filters-section h2 span {
   color: var(--teal);
 }

 .filters-section p {
   color: var(--muted);
   margin-bottom: 24px;
   font-size: 0.97rem;
 }

 .filter-tabs {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
 }

 .filter-tab {
   padding: 8px 20px;
   border-radius: 50px;
   border: 1.5px solid #D1D5DB;
   background: #fff;
   color: var(--muted);
   font-size: 0.88rem;
   font-weight: 600;
   cursor: pointer;
   font-family: 'Nunito', sans-serif;
   transition: all 0.2s;
 }

 .filter-tab:hover {
   border-color: var(--teal);
   color: var(--teal);
 }

 .filter-tab.active {
   background: var(--teal);
   color: #fff;
   border-color: var(--teal);
 }

 /* ── STORIES GRID ── */
 .stories-section {
   padding: 32px 40px 100px;
 }

 .stories-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 24px;
 }

 /* ── STORY CARD ── */
 .story-card {
   background: var(--card-bg);
   border-radius: 20px;
   overflow: hidden;
   box-shadow: var(--shadow);
   border: 1px solid rgba(42, 157, 143, 0.09);
   transition: transform 0.25s, box-shadow 0.25s;
   cursor: pointer;
   position: relative;
 }

 .story-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 48px rgba(42, 157, 143, 0.18);
 }

 .story-card.featured {
   grid-column: span 2;
   display: grid;
   grid-template-columns: 1fr 1fr;
 }

 .card-ribbon {
   position: absolute;
   top: 16px;
   left: 16px;
   background: var(--lavender);
   color: #5b3e8a;
   font-size: 0.72rem;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   padding: 4px 12px;
   border-radius: 50px;
   z-index: 2;
 }

 .card-ribbon.healing {
   background: #D1FAE5;
   color: #065F46;
 }

 .card-ribbon.hope {
   background: #FEF3C7;
   color: #92400E;
 }

 .card-ribbon.strength {
   background: #DBEAFE;
   color: #1E40AF;
 }

 .card-visual {
   height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 5rem;
   position: relative;
   overflow: hidden;
 }

 .card-visual.v1 {
   background: linear-gradient(135deg, #E0F5F3 0%, #C9B8E8 100%);
 }

 .card-visual.v2 {
   background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
 }

 .card-visual.v3 {
   background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
 }

 .card-visual.v4 {
   background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%);
 }

 .card-visual.v5 {
   background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
 }

 .card-visual.v6 {
   background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
 }

 .card-visual .bg-circle {
   position: absolute;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.35);
   bottom: -40px;
   right: -30px;
 }

 .card-body {
   padding: 22px 22px 18px;
 }

 .card-meta {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 12px;
 }

 .avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   flex-shrink: 0;
 }

 .av1 {
   background: #E0F5F3;
 }

 .av2 {
   background: #FEF3C7;
 }

 .av3 {
   background: #DBEAFE;
 }

 .av4 {
   background: #FCE7F3;
 }

 .av5 {
   background: #D1FAE5;
 }

 .av6 {
   background: #EDE9FE;
 }

 .author-info {
   flex: 1;
 }

 .author-name {
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--charcoal);
 }

 .author-date {
   font-size: 0.75rem;
   color: var(--muted);
 }

 .card-title {
   font-size: 1.08rem;
   font-weight: 600;
   line-height: 1.4;
   margin-bottom: 10px;
   color: var(--charcoal);
 }

 .card-excerpt {
   font-size: 0.88rem;
   color: var(--muted);
   line-height: 1.65;
   margin-bottom: 16px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 .card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 14px;
   border-top: 1px solid #F3F4F6;
 }

 .card-tags {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
 }

 .tag {
   background: var(--teal-pale);
   color: var(--teal);
   font-size: 0.72rem;
   font-weight: 700;
   padding: 3px 10px;
   border-radius: 50px;
 }

 .card-actions {
   display: flex;
   gap: 12px;
   align-items: center;
 }

 .action-btn {
   background: none;
   border: none;
   cursor: pointer;
   font-size: 0.82rem;
   color: var(--muted);
   font-family: 'Nunito', sans-serif;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 4px;
   transition: color 0.2s;
 }

 .action-btn:hover {
   color: var(--teal);
 }

 .action-btn.liked {
   color: #E57373;
 }

 .read-more {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--teal);
   font-size: 0.85rem;
   font-weight: 700;
   text-decoration: none;
   margin-top: 4px;
   transition: gap 0.2s;
 }

 .read-more:hover {
   gap: 10px;
 }

 /* ── SHARE BANNER ── */
 .share-banner {
   margin: 0 40px 64px;
   background: linear-gradient(135deg, var(--teal) 0%, #1a7a6e 100%);
   border-radius: 24px;
   padding: 52px 48px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   flex-wrap: wrap;
   position: relative;
   overflow: hidden;
 }

 .share-banner::before {
   content: '💬';
   position: absolute;
   right: 48px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 9rem;
   opacity: 0.08;
 }

 .share-banner-text h2 {
   font-size: 1.8rem;
   color: #fff;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .share-banner-text p {
   color: rgba(255, 255, 255, 0.8);
   font-size: 1rem;
   line-height: 1.6;
   max-width: 460px;
 }

 .share-options {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
 }

 .share-opt {
   background: rgba(255, 255, 255, 0.15);
   border: 1.5px solid rgba(255, 255, 255, 0.3);
   color: #fff;
   border-radius: 14px;
   padding: 14px 20px;
   text-align: center;
   cursor: pointer;
   transition: background 0.2s;
   font-family: 'Nunito', sans-serif;
   font-weight: 700;
   min-width: 110px;
 }

 .share-opt:hover {
   background: rgba(255, 255, 255, 0.25);
 }

 .share-opt .opt-icon {
   font-size: 1.6rem;
   display: block;
   margin-bottom: 6px;
 }

 .share-opt .opt-label {
   font-size: 0.82rem;
 }

 @media only screen and (max-width: 480px){
  .stories-grid {
    display: flex;
    flex-direction: column;
    grid-template-rows  : repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
    .story-card.featured {
    /* grid-column: span 2; */
    display:  flex;
    flex-direction: column;
    /* grid-template-columns: 1fr 1fr; */
}
 }