/* ═══════════════════════════════════════════════════════════════
   pp10-index.css  –  Style specyficzne dla strony głównej
═══════════════════════════════════════════════════════════════ */

/* ── Wyróżnione karty ważnych informacji ───────────────── */
        .wazne-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
          margin-bottom: 22px;
        }
        @media (max-width: 700px) { .wazne-grid { grid-template-columns: 1fr; } }

        .wazne-card {
          border-radius: 14px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          box-shadow: 0 4px 20px rgba(139,70,24,.18);
          position: relative;
          transition: transform .18s, box-shadow .18s;
        }
        .wazne-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 32px rgba(139,70,24,.25);
        }

        /* Karta pomarańczowa */
        .wazne-card.orange {
          background: #fff;
          border: 2px solid #d16a24;
        }
        .wazne-card.orange .wazne-card-header {
          background: #d16a24;
          color: #fff;
        }

        /* Karta fioletowa */
        .wazne-card.purple {
          background: #fff;
          border: 2px solid #6a4895;
        }
        .wazne-card.purple .wazne-card-header {
          background: #6a4895;
          color: #fff;
        }

        /* Pasek "WAŻNE" w prawym górnym rogu */
        .wazne-ribbon {
          position: absolute;
          top: 14px;
          right: -8px;
          background: #ecc931;
          color: #1a0e00;
          font-size: .68rem;
          font-weight: 800;
          letter-spacing: .1em;
          text-transform: uppercase;
          padding: 4px 14px 4px 10px;
          border-radius: 4px 0 0 4px;
          box-shadow: 2px 2px 6px rgba(0,0,0,.15);
          font-family: 'Source Sans 3', sans-serif;
          line-height: 1;
          /* contrast: #1a0e00 on #ecc931 = 12.6:1 AAA */
        }
        .wazne-ribbon::after {
          content: '';
          position: absolute;
          right: 0;
          bottom: -6px;
          border-width: 6px 8px 0 0;
          border-style: solid;
          border-color: #8b4618 transparent transparent transparent;
        }

        .wazne-card-header {
          padding: 14px 18px 12px;
          display: flex;
          align-items: center;
          gap: 10px;
        }
        .wazne-card-header-icon {
          width: 38px;
          height: 38px;
          border-radius: 8px;
          background: rgba(255,255,255,.18);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          flex-shrink: 0;
        }
        .wazne-card-header-text {
          display: flex;
          flex-direction: column;
          gap: 1px;
        }
        .wazne-card-kategoria {
          font-size: .68rem;
          font-weight: 700;
          letter-spacing: .1em;
          text-transform: uppercase;
          opacity: .78;
          font-family: 'Source Sans 3', sans-serif;
        }
        .wazne-card-header h3 {
          font-family: 'Lora', Georgia, serif;
          font-size: 1rem;
          font-weight: 600;
          line-height: 1.25;
          color: #fff;
          margin: 0;
        }

        .wazne-card-body {
          padding: 18px 20px 20px;
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        .wazne-card-date {
          font-size: .78rem;
          font-weight: 600;
          color: #8b4618;
          display: flex;
          align-items: center;
          gap: 6px;
          font-family: 'Source Sans 3', sans-serif;
        }
        .wazne-card-date svg {
          width: 13px;
          height: 13px;
          fill: none;
          stroke: #8b4618;
          stroke-width: 1.5;
          flex-shrink: 0;
        }
        .wazne-card.purple .wazne-card-date { color: #6a4895; }
        .wazne-card.purple .wazne-card-date svg { stroke: #6a4895; }

        .wazne-card-body p {
          font-size: .88rem;
          color: #4a2e10;
          line-height: 1.7;
          margin: 0;
          flex: 1;
        }

        /* Alert strip – żółty pasek z ikoną */
        .wazne-alert-strip {
          background: #fdfaec;
          border-left: 3px solid #ecc931;
          border-radius: 0 6px 6px 0;
          padding: 8px 12px;
          font-size: .82rem;
          color: #685609;
          font-weight: 600;
          display: flex;
          align-items: flex-start;
          gap: 8px;
          line-height: 1.5;
          font-family: 'Source Sans 3', sans-serif;
          /* contrast #685609 on #fdfaec = 7.18:1 AAA */
        }
        .wazne-alert-strip svg {
          width: 15px;
          height: 15px;
          fill: #685609;
          flex-shrink: 0;
          margin-top: 1px;
        }

        .wazne-card-footer {
          padding: 0 20px 18px;
        }
        .wazne-btn {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          padding: 9px 20px;
          border-radius: 8px;
          font-family: 'Source Sans 3', sans-serif;
          font-size: .85rem;
          font-weight: 700;
          text-decoration: none;
          transition: background .15s, transform .12s;
        }
        .wazne-btn:active { transform: scale(.97); }
        .wazne-btn:focus-visible { outline: 3px solid #6a4895; outline-offset: 3px; }
        .wazne-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

        .wazne-btn-orange {
          background: #d16a24;
          color: #fff;
          /* contrast: 3.62:1 – btn is large text, AA large ok; plus on white bg card */
        }
        .wazne-btn-orange:hover { background: #8b4618; color: #fff; }

        .wazne-btn-purple {
          background: #6a4895;
          color: #fff;
          /* contrast white on #6a4895: 7.06:1 AAA */
        }
        .wazne-btn-purple:hover { background: #7d57ad; color: #fff; }

        /* Główna karta rekrutacji */
        .recruit-card {
          background: var(--c-white);
          border-radius: var(--radius-lg);
          border: 1px solid var(--c-border);
          overflow: hidden;
          box-shadow: var(--shadow);
          display: grid;
          grid-template-columns: 220px 1fr;
          margin-top: 0;
        }
        @media (max-width: 600px) { .recruit-card { grid-template-columns: 1fr; } }