/* ==========================================================================
   SG Loop Banner — Frontend Styles
   Banner card layout inside WooCommerce product grids
   ========================================================================== */

/* ------------------------------------------------------------------
   Banner item: behave exactly like a product card in the grid.
   Resets float/width from WooCommerce base layout so the item
   respects the CSS Grid set by Elementor or the float columns set
   by WooCommerce's layout stylesheet.
   ----------------------------------------------------------------*/

li.product.sg-loop-banner-item {
    /* Let the grid or float system handle sizing — don't add any
       width, margin or float of our own. */
    position: relative;
    overflow: hidden;
}

/* ------------------------------------------------------------------
   Full-width variant: banner spans all columns
   ----------------------------------------------------------------*/

li.product.sg-loop-banner-item.sg-loop-banner-full-width {
    width: 100% !important;
    float: none !important;
    clear: both;
    /* For CSS Grid layouts (Elementor, etc.) */
    grid-column: 1 / -1;
}

li.product.sg-loop-banner-item.sg-loop-banner-full-width .sg-loop-banner-card {
    aspect-ratio: 16 / 5;
}

/* ------------------------------------------------------------------
   Link wrapper — full card clickable
   ----------------------------------------------------------------*/

.sg-loop-banner-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.sg-loop-banner-link:hover,
.sg-loop-banner-link:focus {
    text-decoration: none;
    color: inherit;
}

/* ------------------------------------------------------------------
   Banner card — fills its parent <li>
   ----------------------------------------------------------------*/

.sg-loop-banner-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: inherit;
    /* Use aspect-ratio so it matches typical product-card proportions
       without forcing a hard min-height that blows up the row. */
    aspect-ratio: 3 / 4;
}

/* ------------------------------------------------------------------
   Background image
   ----------------------------------------------------------------*/

.sg-loop-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%!important;
    height: 100%!important;
    object-fit: cover;
    pointer-events: none;
}

/* ------------------------------------------------------------------
   Overlay
   ----------------------------------------------------------------*/

.sg-loop-banner-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ------------------------------------------------------------------
   Content grid (3x3 for independent positioning)
   ----------------------------------------------------------------*/

.sg-loop-banner-content {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 20px;
    z-index: 1;
}

/* ------------------------------------------------------------------
   Content group — stacks title, subtitle, button vertically
   ----------------------------------------------------------------*/

.sg-loop-banner-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sg-loop-banner-group[data-align="left"]   { text-align: left;   align-items: flex-start; }
.sg-loop-banner-group[data-align="center"] { text-align: center; align-items: center; }
.sg-loop-banner-group[data-align="right"]  { text-align: right;  align-items: flex-end; }

/* ------------------------------------------------------------------
   Position mapping via [data-pos] attribute
   The group always spans all 3 columns (full width) so text doesn't
   wrap.  The ROW controls vertical placement; data-align controls
   horizontal alignment inside the full-width strip.
   ----------------------------------------------------------------*/

/* --- Top row --- */
.sg-loop-banner-content [data-pos="top-left"],
.sg-loop-banner-content [data-pos="top-center"],
.sg-loop-banner-content [data-pos="top-right"] {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: start;
}

/* --- Center row --- */
.sg-loop-banner-content [data-pos="center-left"],
.sg-loop-banner-content [data-pos="center-center"],
.sg-loop-banner-content [data-pos="center-right"] {
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: center;
}

/* --- Bottom row --- */
.sg-loop-banner-content [data-pos="bottom-left"],
.sg-loop-banner-content [data-pos="bottom-center"],
.sg-loop-banner-content [data-pos="bottom-right"] {
    grid-row: 3;
    grid-column: 1 / -1;
    align-self: end;
}

/* ------------------------------------------------------------------
   Title
   ----------------------------------------------------------------*/

.sg-loop-banner-title h3 {
    margin: 0;
    line-height: 1.2;
}

/* ------------------------------------------------------------------
   Subtitle
   ----------------------------------------------------------------*/

.sg-loop-banner-subtitle p {
    margin: 0;
    line-height: 1.4;
}

/* ------------------------------------------------------------------
   Button
   ----------------------------------------------------------------*/

.sg-loop-banner-button {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
    line-height: 1;
}

.sg-loop-banner-button:hover {
    background-color: var(--sg-btn-hover-bg, #ffffff) !important;
    color: var(--sg-btn-hover-color, #000000) !important;
}

/* ------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------*/

@media (max-width: 1024px) {
    .sg-loop-banner-title h3,
    .sg-loop-banner-subtitle p,
    .sg-loop-banner-button {
        font-size: calc(var(--sg-fs) * 0.85) !important;
    }
}

@media (max-width: 767px) {
    .sg-loop-banner-card {
        aspect-ratio: 3 / 4;
    }

    li.product.sg-loop-banner-item.sg-loop-banner-full-width .sg-loop-banner-card {
        aspect-ratio: 3 / 2;
    }

    .sg-loop-banner-content {
        padding: 12px;
    }

    .sg-loop-banner-title h3,
    .sg-loop-banner-subtitle p,
    .sg-loop-banner-button {
        font-size: calc(var(--sg-fs) * 0.7) !important;
    }
}