/*
 * GRANTHA — Vedic Action Cards block styles
 * Loads on frontend + block editor via register_block_type 'style'.
 */

@import url('https://fonts.googleapis.com/css2?family=Mallanna&family=Martel:wght@400;600;700&display=swap');

/* ── Grid container ──────────────────────────────────────────────────────────── */
.vedic-action-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   24px;
    align-items:           stretch;
    margin:                2em 0;
}

/* ── Single card ─────────────────────────────────────────────────────────────── */
.vedic-action-card {
    display:        flex;
    flex-direction: column;
    background:     #fff;
    border:         1px solid rgba(0, 0, 0, 0.12);
    border-radius:  8px;
    padding:        24px;
    box-shadow:     0 2px 6px rgba(0, 0, 0, 0.07);
}

/* ── Title — H3 equivalent, no H3 tag ───────────────────────────────────────── */
.vedic-ac-title {
    font-size:       16pt;
    font-weight:     600;
    line-height:     1.3;
    color:           #1a1a1a;
    margin:          0 0 0.4em;
    text-decoration: none;
}

/* ── Subtitle — H4 equivalent, no H4 tag ────────────────────────────────────── */
.vedic-ac-subtitle {
    font-size:   16pt;
    font-weight: 400;
    line-height: 1.3;
    color:       #1a1a1a;
    margin:      0 0 1em;
}
.vedic-ac-subtitle:empty {
    display: none;
}

/* ── Language fonts ──────────────────────────────────────────────────────────── */
.vedic-ac-lang-en .vedic-ac-title,
.vedic-ac-lang-en .vedic-ac-subtitle {
    font-family: 'Lora', Georgia, serif;
}
.vedic-ac-lang-tel .vedic-ac-title,
.vedic-ac-lang-tel .vedic-ac-subtitle {
    font-family: 'Mallanna', sans-serif;
}
.vedic-ac-lang-hin .vedic-ac-title,
.vedic-ac-lang-hin .vedic-ac-subtitle {
    font-family: 'Martel', serif;
}

/* ── Buttons row — pushed to bottom of card ──────────────────────────────────── */
.vedic-ac-buttons {
    display:     flex;
    flex-wrap:   wrap;
    gap:         12px;
    align-items: center;
    margin-top:  auto;
    padding-top: 20px;
}

/* ── Base button ─────────────────────────────────────────────────────────────── */
.vedic-ac-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         10px 24px;
    border-radius:   999px;
    font-family:     'adobe-clean', 'Adobe Clean', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:       16pt;
    font-weight:     500;
    line-height:     1.2;
    text-decoration: none !important;
    cursor:          pointer;
    white-space:     nowrap;
    border:          2px solid #000;
    transition:      background 0.2s, color 0.2s, border-color 0.2s;
}

/* ── Primary button (rightmost) ──────────────────────────────────────────────── */
.vedic-ac-btn--primary {
    background: #000;
    color:      #fff !important;
}
.vedic-ac-btn--primary:hover {
    background:      #333;
    border-color:    #333;
    color:           #fff !important;
    text-decoration: none !important;
}

/* ── Outline buttons ─────────────────────────────────────────────────────────── */
.vedic-ac-btn--outline {
    background: transparent;
    color:      #000 !important;
}
.vedic-ac-btn--outline:hover {
    background:      #1a1a1a;
    border-color:    #1a1a1a;
    color:           #fff !important;
    text-decoration: none !important;
}

/* ── Mobile: 1 card per row ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .vedic-action-cards {
        grid-template-columns: 1fr;
    }

    .vedic-ac-btn {
        font-size: 14pt;
        padding:   9px 20px;
    }
}