/* ==========================================================================
   ELEMENTOR HERO GRID WIDGET
   ========================================================================== */

.mircato-hero-grid {
    display: grid;
    width: 100%;
    /* Height is set via Control */
}

.mircato-hero-item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 30px;
    transition: all 0.3s ease;
}

.mircato-hero-item-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 1;
}

.mircato-hero-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: background 0.3s ease;
}

.mircato-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 600px;
}

/* Hover Effects */
.mircato-hero-grid.hover-zoom .mircato-hero-item:hover .mircato-hero-item-bg {
    transform: scale(1.1);
}

.mircato-hero-grid.hover-lift .mircato-hero-item:hover .mircato-hero-content {
    transform: translateY(-5px);
}

/* Typography Defaults */
.mircato-hero-subtitle {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.mircato-hero-title {
    margin: 0 0 20px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.mircato-hero-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #fff;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.mircato-hero-btn:hover {
    background: #000;
    color: #fff;
}

/* ==========================================================================
   LAYOUT PRESETS (DESKTOP)
   ========================================================================== */

/* 70/30 (Main + 2 Stacked) */
/* 1st item big (left), 2nd & 3rd stacked (right) */
.mircato-hero-grid.layout-70-30 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "main item2"
        "main item3";
}

.mircato-hero-grid.layout-70-30 .mircato-hero-item:nth-child(1) {
    grid-area: main;
}

.mircato-hero-grid.layout-70-30 .mircato-hero-item:nth-child(2) {
    grid-area: item2;
}

.mircato-hero-grid.layout-70-30 .mircato-hero-item:nth-child(3) {
    grid-area: item3;
}

/* 60/40 (Main + 3 Stacked) */
.mircato-hero-grid.layout-60-40 {
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "main item2"
        "main item3"
        "main item4";
}

.mircato-hero-grid.layout-60-40 .mircato-hero-item:nth-child(1) {
    grid-area: main;
}

/* 50/50 Square Split */
.mircato-hero-grid.layout-50-50 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    /* Full height */
}

/* 3 Column Equal */
.mircato-hero-grid.layout-3-col {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}

/* 4 Block Grid */
.mircato-hero-grid.layout-4-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Text Only / Editorial (Side by side) */
.mircato-hero-grid.layout-text-only {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    /* Center vertically if height allows */
}

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

@media (max-width: 1024px) {
    /* Tablet: Often convert 3-col to 2-col? or Keep ratios but shrink? */
}

@media (max-width: 768px) {

    /* Mobile: Stack Everything */
    .mircato-hero-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        /* Allow auto growth */
    }

    .mircato-hero-item {
        min-height: 300px;
        /* Minimum height for touch */
        width: 100%;
    }
}