/**
 * Block Styles CSS
 * Estilos para os diferentes block styles registrados em inc/block-styles.php
 * 
 * @package LeiteAlencar
 * @version 1.0.2
 */

/* ========================================
   GROUP BLOCK STYLES
======================================== */

/* No Padding Group */
.wp-block-group.is-style-la-no-padding {
    padding: 0 !important;
}

/* Contained Group */
.wp-block-group.is-style-la-contained {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* Full Width Group */
.wp-block-group.is-style-la-full-width {
    width: 100%;
    padding: 2rem 1rem;
}

/* Card Container */
.wp-block-group.is-style-la-card-container {
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.wp-block-group.is-style-la-card-container:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ========================================
   BUTTON BLOCK STYLES
======================================== */

/* Primary Button */
.wp-block-button.is-style-la-primary .wp-block-button__link {
    background-color: #9b9a98;
    color: #ffffff;
    border: 2px solid #9b9a98;
}

.wp-block-button.is-style-la-primary .wp-block-button__link:hover,
.wp-block-button.is-style-la-primary .wp-block-button__link:focus {
    background-color: #7a7977;
    border-color: #7a7977;
}

/* Secondary Button */
.wp-block-button.is-style-la-secondary .wp-block-button__link {
    background-color: #494949;
    color: #ffffff;
    border: 2px solid #494949;
}

.wp-block-button.is-style-la-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-la-secondary .wp-block-button__link:focus {
    background-color: #2d2d2d;
    border-color: #2d2d2d;
}

/* Outline Button */
.wp-block-button.is-style-la-outline .wp-block-button__link {
    background-color: transparent;
    color: #9b9a98;
    border: 2px solid #9b9a98;
}

.wp-block-button.is-style-la-outline .wp-block-button__link:hover,
.wp-block-button.is-style-la-outline .wp-block-button__link:focus {
    background-color: #9b9a98;
    color: #ffffff;
}

/* Large Button */
.wp-block-button.is-style-la-large .wp-block-button__link {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Small Button */
.wp-block-button.is-style-la-small .wp-block-button__link {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Rounded Button */
.wp-block-button.is-style-la-rounded .wp-block-button__link {
    border-radius: 9999px;
}

/* ========================================
   HEADING BLOCK STYLES
======================================== */

/* Underline Heading */
.wp-block-heading.is-style-la-underline {
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #9b9a98;
    display: inline-block;
}

/* Highlighted Heading */
.wp-block-heading.is-style-la-highlighted {
    background-color: #FEF3C7;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    display: inline-block;
}

/* Left Border Heading */
.wp-block-heading.is-style-la-border-left {
    border-left: 4px solid #9b9a98;
    padding-left: 1rem;
}

/* ========================================
   IMAGE BLOCK STYLES
======================================== */

/* Rounded Image */
.wp-block-image.is-style-la-rounded img {
    border-radius: 0.75rem;
}

/* Bordered Image */
.wp-block-image.is-style-la-bordered {
    border: 1px solid #E2E8F0;
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.wp-block-image.is-style-la-bordered img {
    border-radius: 0.25rem;
}

/* Shadow Image */
.wp-block-image.is-style-la-shadow img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
}

/* Hover Zoom Image */
.wp-block-image.is-style-la-hover-zoom {
    overflow: hidden;
}

.wp-block-image.is-style-la-hover-zoom img {
    transition: transform 300ms ease;
    border-radius: 0.75rem;
}

.wp-block-image.is-style-la-hover-zoom:hover img {
    transform: scale(1.05);
}

/* ========================================
   QUOTE BLOCK STYLES
======================================== */

/* Large Quote */
.wp-block-quote.is-style-la-large {
    font-size: 1.5rem;
    line-height: 1.6;
    border-left: 4px solid #9b9a98;
}

/* Highlighted Quote */
.wp-block-quote.is-style-la-highlighted {
    background-color: #F0F9FF;
    padding: 1.5rem;
    border-left: 4px solid #9b9a98;
    border-radius: 0.375rem;
    font-style: italic;
}

/* Centered Quote */
.wp-block-quote.is-style-la-centered {
    text-align: center;
    border: none;
    border-top: 3px solid #9b9a98;
    border-bottom: 3px solid #9b9a98;
    padding: 1.5rem 0;
}

/* ========================================
   PARAGRAPH BLOCK STYLES
======================================== */

/* Lead Paragraph */
.wp-block-paragraph.is-style-la-lead {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.8;
    color: #0F172A;
}

/* Small Text */
.wp-block-paragraph.is-style-la-small {
    font-size: 0.85rem;
    color: #494949;
    line-height: 1.5;
}

/* Monospace Text */
.wp-block-paragraph.is-style-la-mono {
    font-family: 'Monaco', 'Courier New', monospace;
    background-color: #f5f5f5;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.95rem;
}

/* ========================================
   LIST BLOCK STYLES
======================================== */

/* Checkmark List */
.wp-block-list.is-style-la-checkmark li::before {
    content: "✓ ";
    color: #059669;
    font-weight: bold;
    margin-right: 0.5rem;
}

/* Arrow List */
.wp-block-list.is-style-la-arrow li::before {
    content: "→ ";
    color: #9b9a98;
    margin-right: 0.5rem;
}

/* No Bullet List */
.wp-block-list.is-style-la-no-bullet {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-la-no-bullet li {
    margin-left: 0;
}

/* ========================================
   COLUMNS BLOCK STYLES
======================================== */

/* Equal Width Columns */
.wp-block-columns.is-style-la-equal > * {
    flex: 1;
}

/* Large Gap Columns */
.wp-block-columns.is-style-la-large-gap {
    gap: 2rem;
}

/* No Gap Columns */
.wp-block-columns.is-style-la-no-gap {
    gap: 0;
}

/* ========================================
   SEPARATOR BLOCK STYLES
======================================== */

/* Thin Separator */
.wp-block-separator.is-style-la-thin {
    border: none;
    border-top: 1px solid #E2E8F0;
    height: 0;
    margin: 1rem 0;
}

/* Thick Separator */
.wp-block-separator.is-style-la-thick {
    border: none;
    border-top: 4px solid #9b9a98;
    height: 0;
    margin: 2rem 0;
}

/* Dashed Separator */
.wp-block-separator.is-style-la-dashed {
    border: none;
    border-top: 2px dashed #9b9a98;
    height: 0;
    margin: 1.5rem 0;
}

/* ========================================
   TABLE BLOCK STYLES
======================================== */

/* Striped Table */
.wp-block-table.is-style-la-striped tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Bordered Table */
.wp-block-table.is-style-la-bordered table,
.wp-block-table.is-style-la-bordered tbody tr,
.wp-block-table.is-style-la-bordered th,
.wp-block-table.is-style-la-bordered td {
    border: 1px solid #E2E8F0;
}

/* Compact Table */
.wp-block-table.is-style-la-compact th,
.wp-block-table.is-style-la-compact td {
    padding: 0.5rem;
    font-size: 0.875rem;
}

/* ========================================
   GALLERY BLOCK STYLES
======================================== */

/* Grid Gallery */
.wp-block-gallery.is-style-la-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Masonry Gallery */
.wp-block-gallery.is-style-la-masonry {
    columns: 3;
    column-gap: 1rem;
}

.wp-block-gallery.is-style-la-masonry figure {
    break-inside: avoid;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .wp-block-gallery.is-style-la-masonry {
        columns: 2;
    }
}

@media (max-width: 600px) {
    .wp-block-gallery.is-style-la-masonry {
        columns: 1;
    }
}

/* ========================================
   CODE BLOCK STYLES
======================================== */

/* Light Theme */
.wp-block-code.is-style-la-light {
    background-color: #f9f9f9;
    border: 1px solid #E2E8F0;
    color: #0F172A;
}

/* Dark Theme */
.wp-block-code.is-style-la-dark {
    background-color: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
}

/* ========================================
   SEARCH BLOCK STYLES
======================================== */

/* With Button */
.wp-block-search.is-style-la-with-button {
    display: flex;
    gap: 0.5rem;
}

.wp-block-search.is-style-la-with-button .wp-block-search__input {
    flex: 1;
}

/* Icon Only */
.wp-block-search.is-style-la-icon-only .wp-block-search__label {
    display: none;
}

/* ========================================
   UTILITIES FOR CUSTOM ELEMENTS
======================================== */

/* Badge/Tag */
.wp-block-paragraph.is-style-la-badge,
.la-badge {
    display: inline-block;
    background-color: #E2E8F0;
    color: #494949;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0.25rem;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media (max-width: 768px) {
    .wp-block-gallery.is-style-la-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .wp-block-heading.is-style-la-underline,
    .wp-block-heading.is-style-la-highlighted {
        display: block;
    }

    .wp-block-button.is-style-la-large .wp-block-button__link {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .wp-block-gallery.is-style-la-grid {
        grid-template-columns: 1fr;
    }

    .wp-block-table {
        font-size: 0.875rem;
    }

    .wp-block-table th,
    .wp-block-table td {
        padding: 0.5rem;
    }

    .wp-block-quote.is-style-la-large {
        font-size: 1.25rem;
    }
}

/* ========================================
   ACCESSIBILITY
======================================== */

/* High contrast mode */
@media (prefers-contrast: more) {
    .wp-block-button.is-style-la-outline .wp-block-button__link {
        border-width: 3px;
    }

    .wp-block-heading.is-style-la-underline,
    .wp-block-heading.is-style-la-border-left {
        border-width: 3px;
    }

    .wp-block-separator.is-style-la-thick {
        border-width: 3px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wp-block-image.is-style-la-hover-zoom:hover img {
        transform: none;
    }

    .wp-block-group.is-style-la-card-container:hover {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .wp-block-button.is-style-la-primary .wp-block-button__link,
    .wp-block-button.is-style-la-secondary .wp-block-button__link {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .wp-block-group.is-style-la-card-container {
        background-color: #1e293b;
        border-color: #334155;
        color: #e2e8f0;
    }

    .wp-block-code.is-style-la-light {
        background-color: #1e293b;
        border-color: #334155;
        color: #e2e8f0;
    }

    .wp-block-image.is-style-la-bordered {
        border-color: #334155;
    }

    .wp-block-table.is-style-la-striped tbody tr:nth-child(even) {
        background-color: #0f172a;
    }
}