/* ════════════════════════════════════════════════════════════════════
   PF DESIGN SYSTEM — Card Component
   ────────────────────────────────────────────────────────────────────
   Container component for grouped content. Provides consistent surface
   treatment, padding, and elevation across all card-like UI patterns.

   USAGE
     <article class="pf-card">
       <header class="pf-card__header">
         <h3 class="pf-card__title">Card title</h3>
         <p class="pf-card__meta">Subtitle or metadata</p>
       </header>
       <div class="pf-card__body">
         <p>Card content goes here.</p>
       </div>
       <footer class="pf-card__footer">
         <button class="pf-button pf-button--secondary pf-button--sm">Cancel</button>
         <button class="pf-button pf-button--sm">Save</button>
       </footer>
     </article>

     <!-- Variants -->
     <article class="pf-card pf-card--elevated">High shadow</article>
     <article class="pf-card pf-card--outlined">Border-only, no shadow</article>
     <article class="pf-card pf-card--flat">No border, no shadow</article>
     <article class="pf-card pf-card--interactive">Hover-state for clickable cards</article>

     <!-- Status accents (left-border or top-border) -->
     <article class="pf-card pf-card--success">Success-tinted</article>
     <article class="pf-card pf-card--warning">Warning-tinted</article>
     <article class="pf-card pf-card--danger">Danger-tinted</article>
     <article class="pf-card pf-card--info">Info-tinted</article>

   ACCESSIBILITY
     • Use semantic HTML elements (article, section) — class is presentation-only
     • Interactive cards must use <a> or <button> wrapper, not onclick on div
     • Status colors supplemented by icon (not color alone)
     • Card titles should be h3-h6 depending on document hierarchy
     • prefers-reduced-motion respected for hover transforms

   Version: 1.0.0
   Last revised: 2026-05-10
   ──────────────────────────────────────────────────────────────────── */

/* ─── Block: .pf-card (default = raised with subtle border) ─── */

.pf-card {
    /* Layout */
    display: flex;
    flex-direction: column;
    gap: var(--pf-card-gap);

    /* Surface */
    background: var(--pf-card-bg);
    color: var(--pf-card-fg);
    border: 1px solid var(--pf-card-border);
    border-radius: var(--pf-card-radius);
    padding: var(--pf-card-padding);
    box-shadow: var(--pf-card-shadow);

    /* Smooth interactive transitions */
    transition:
        background var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        border-color var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        box-shadow var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        transform var(--pf-motion-duration-fast) var(--pf-motion-ease-out);
}

/* ─── Element: __header ─────────────────────────────────────── */

.pf-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-1);
    /* No padding — parent .pf-card supplies it */
}

/* ─── Element: __title ──────────────────────────────────────── */

.pf-card__title {
    margin: 0; /* Reset h1-h6 default margin */
    font-size: var(--pf-card-title-size);
    font-weight: var(--pf-card-title-weight);
    color: var(--pf-card-title-color);
    line-height: var(--pf-text-leading-snug);
}

/* ─── Element: __meta (subtitle, timestamp, author byline) ──── */

.pf-card__meta {
    margin: 0;
    font-size: var(--pf-card-meta-size);
    color: var(--pf-card-meta-color);
    line-height: var(--pf-text-leading-normal);
}

/* ─── Element: __body (main content area) ────────────────────── */

.pf-card__body {
    color: var(--pf-card-body-color);
    font-size: var(--pf-card-body-size);
    line-height: var(--pf-text-leading-normal);
}

.pf-card__body > :first-child { margin-top: 0; }
.pf-card__body > :last-child  { margin-bottom: 0; }

/* ─── Element: __footer (actions / metadata at bottom) ─────── */

.pf-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pf-space-2);
    padding-top: var(--pf-space-3);
    border-top: 1px solid var(--pf-card-border);
}

/* Footer alignment modifiers */
.pf-card__footer--start  { justify-content: flex-start; }
.pf-card__footer--center { justify-content: center; }
.pf-card__footer--between { justify-content: space-between; }

/* ─── Element: __media (image/video at top — full-bleed) ───── */

.pf-card__media {
    /* Negative margin breaks out of card padding for full-bleed images */
    margin: calc(var(--pf-card-padding) * -1) calc(var(--pf-card-padding) * -1) 0;
    border-top-left-radius: var(--pf-card-radius);
    border-top-right-radius: var(--pf-card-radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--pf-color-surface-sunken);
}

.pf-card__media img,
.pf-card__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Modifier: --elevated (higher shadow for emphasis) ────── */

.pf-card--elevated {
    box-shadow: var(--pf-card-shadow-hover);
}

/* ─── Modifier: --outlined (border-only, no shadow) ────────── */

.pf-card--outlined {
    box-shadow: none;
    border-color: var(--pf-color-border-strong);
}

/* ─── Modifier: --flat (no border, no shadow) ────────────────── */

.pf-card--flat {
    border-color: transparent;
    box-shadow: none;
}

/* ─── Modifier: --interactive (hover state for clickable cards) ── */

.pf-card--interactive {
    cursor: pointer;
}

.pf-card--interactive:hover {
    background: var(--pf-card-bg-hover);
    border-color: var(--pf-color-border-strong);
    box-shadow: var(--pf-card-shadow-hover);
    transform: translateY(-1px);
}

.pf-card--interactive:active {
    transform: translateY(0);
}

.pf-card--interactive:focus-visible {
    outline: none;
    box-shadow: var(--pf-card-shadow-hover), var(--pf-focus-ring);
}

/* ─── Modifier: --compact (less padding) ────────────────────── */

.pf-card--compact {
    padding: var(--pf-space-3);
}

/* ─── Modifier: --spacious (more padding) ────────────────────── */

.pf-card--spacious {
    padding: var(--pf-space-8);
}

/* ─── Status accents (left-border indicator) ────────────────── */

.pf-card--success,
.pf-card--warning,
.pf-card--danger,
.pf-card--info {
    border-inline-start-width: 4px;
}

.pf-card--success { border-inline-start-color: var(--pf-color-status-success); }
.pf-card--warning { border-inline-start-color: var(--pf-color-status-warning); }
.pf-card--danger  { border-inline-start-color: var(--pf-color-status-danger); }
.pf-card--info    { border-inline-start-color: var(--pf-color-status-info); }

/* ─── Reduced-motion respect ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .pf-card,
    .pf-card--interactive:hover,
    .pf-card--interactive:active {
        transition: none;
        transform: none;
    }
}