/* ==========================================================
   CARDS — Afghan Community
   - Token-based
   - Layered (components)
   - Keeps your existing class names so nothing breaks
   ========================================================== */


  /* ======================================================
     GLOBAL CARD HOVER EFFECT (ONE SYSTEM: LIFT)
     - Uses tokens for timing + easing
     - Adds keyboard parity via :focus-within
     ====================================================== */
  .resource-card,
  .domain-card,
  .blog-card,
  .ngo-card,
  .community-card{
    transition:
      transform var(--anim-speed-fast,180ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)),
      box-shadow var(--anim-speed-fast,180ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1));
  }

  .resource-card:hover,
  .domain-card:hover,
  .blog-card:hover,
  .ngo-card:hover,
  .community-card:hover,
  .resource-card:focus-within,
  .domain-card:focus-within,
  .blog-card:focus-within,
  .ngo-card:focus-within,
  .community-card:focus-within{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
  }

  /* ======================================================
     RESOURCE / DOMAIN / NGO — BASE STYLE
     ====================================================== */
  .resource-card,
  .domain-card,
  .ngo-card{
    background:var(--color-white);
    border-radius:var(--radius-base);
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    border:1px solid rgba(53,83,82,.12); /* derived from --color-dark */
  }

  .resource-card{padding:24px 22px 20px;}
  .domain-card{padding:26px 24px;}
  .ngo-card{padding:22px 22px 20px;}

  /* ======================================================
     CARD CATEGORY LABELS (consistent)
     - Ressources: neutral chip
     - Domain + Blog: turquoise chip (same rule everywhere)
     ====================================================== */
  .resource-card .card-category{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    background:rgba(0,0,0,.06);
    border:1px solid rgba(0,0,0,.08);
    color:var(--color-dark);
  }

  .domain-card .domain-category,
  .blog-card .blog-category{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    background:var(--color-primary);
    border:1px solid rgba(0,0,0,.12);
    color:var(--color-dark);
  }

  .blog-card .blog-category{margin-bottom:10px;}

  /* ======================================================
     CARD LINKS
     ====================================================== */
  .resource-card .card-link,
  .domain-card .card-link,
  .blog-card .card-link{
    font-weight:600;
    color:var(--color-primary);
    text-decoration:none;
  }
  .resource-card .card-link:hover,
  .domain-card .card-link:hover,
  .blog-card .card-link:hover{
    color:var(--color-primary-dark);
    text-decoration:underline;
    text-underline-offset:2px;
  }

  /* ======================================================
     EVENTS / COMMUNITY — GRID
     ====================================================== */
  .cards-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-top:40px;
  }

  /* ======================================================
     EVENTS / COMMUNITY — CARD BASE
     ====================================================== */
  .community-card{
    background:var(--color-white);
    border-radius:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(53,83,82,.12);
  }

  /* EVENTS — IMAGE */
  .community-card-img img{
    width:100%;
    height:220px;
    object-fit:cover;
  }

  /* EVENTS — TOP META */
  .community-card-meta-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px 0;
  }

  /* ======================================================
     EVENTS — BADGES
     ====================================================== */
  .badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    font-size:13px;
    padding:6px 12px;
    font-weight:600;
  }

  .badge-tag{
    background:var(--color-bg);
    color:var(--color-dark);
    border:1px solid rgba(53,83,82,.10);
  }

  .badge-light{
    background:var(--color-bg);
    color:var(--color-dark);
    border:1px solid rgba(53,83,82,.08);
    opacity:.95;
  }

  /* ======================================================
     EVENTS — DATE PILL
     ====================================================== */
  .card-date-pill{
    display:flex;
    border-radius:12px;
    overflow:hidden;
    background:var(--color-bg);
    font-size:13px;
  }
  .card-date-day{
    background:var(--color-white);
    padding:8px 12px;
    font-weight:700;
    color:var(--color-dark);
  }
  .card-date-info{
    padding:8px 12px;
    font-weight:600;
    color:var(--color-dark);
  }

  /* ======================================================
     EVENTS — TITLE / TEXT
     ====================================================== */
  .community-card-title{
    font-family:var(--font-title);
    font-size:20px;
    line-height:1.35;
    margin:14px 20px 10px;
    color:var(--color-dark);
  }

  .community-card-text{
    margin:0 20px 16px;
    font-size:15px;
    line-height:1.65;
    color:var(--color-dark);
    opacity:.95;
  }

  .community-card-meta-bottom{
    padding:0 20px 20px;
  }

  /* ======================================================
     Reduced motion (cards must obey it too)
     ====================================================== */
  @media (prefers-reduced-motion: reduce){
    .resource-card,
    .domain-card,
    .blog-card,
    .ngo-card,
    .community-card{
      transition:none !important;
    }
    .resource-card:hover,
    .domain-card:hover,
    .blog-card:hover,
    .ngo-card:hover,
    .community-card:hover,
    .resource-card:focus-within,
    .domain-card:focus-within,
    .blog-card:focus-within,
    .ngo-card:focus-within,
    .community-card:focus-within{
      transform:none !important;
      box-shadow:0 6px 18px rgba(0,0,0,.06) !important;
    }
  }

  /* RESPONSIVE — ONE COLUMN GRID */
  @media(max-width:900px){
    .cards-grid{grid-template-columns:1fr;}
  }