/* ==========================================================================
   Product page "image + text" flexible sections.
   Deliberately full-bleed (wrapped in .full-width, not .wrapper, in PHP) —
   the image half runs edge-to-edge at ~50% of the screen, not the padded
   content column used elsewhere on the page.

   Inset padding lives on .nibble-its-content's children rather than on
   .nibble-its-content itself: padding on the flex item (flex-basis: 0)
   gets added on top of its equal share instead of living inside it, which
   skews the 50/50 split. Padding on the children doesn't feed back into
   the parent's flex sizing, so the split stays exact.

   Product pages only (enqueued conditionally in functions.php).
   ========================================================================== */

.nibble-image-text-section {
    align-items: center;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "image text";
    display: grid;
    gap: 20px;
    margin: 60px 0;
    background-color: #f3f1ed;
}

.nibble-image-text-section.text-left {
    grid-template-areas: "text image";
}

.nibble-its-images {
    min-width: 0;
    order: 2;
    grid-area: image;
}

.nibble-its-images:only-child {
    flex: 1 1 100%;
}

.nibble-its-images img {
    display: block;
    width: 100%;
}

.nibble-image-text-section.two-portrait .nibble-its-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.nibble-image-text-section.two-portrait .nibble-its-images img {
    height: 100%;
    object-fit: cover;
    aspect-ratio: 830 / 618;
}

.nibble-image-text-section.one-landscape .nibble-its-images img {
    width: 100%;
    height: auto;
}
.nibble-image-text-section.one-landscape .nibble-its-content{
    grid-template-columns: 1fr!important;
}
.nibble-its-content {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    grid-area: text;
    height: 100%;
}
.nibble-its-content img{
    aspect-ratio: 415 / 618;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.nibble-its-content:only-child {
    margin: 0 auto;
    max-width: 640px;
}

.nibble-its-content > * {
    box-sizing: border-box;
}

.nibble-its-text{ 
    padding: 40px 30px;
}

.nibble-its-content h3 {
    color: #9b1533;
    font-family: "bikobold";
    font-size: 1.85em;
    line-height: 1.15;
    margin-bottom: 0.55em;
    text-transform: uppercase;
}

.nibble-its-content p {
    color: #3f3b2d;
    font-family: "DrescherGroteskBT-Book";
    font-size: 1.3rem;
    line-height: 1.5;
    opacity: 1;
}

.nibble-its-content p + p {
    margin-top: 1em;
}

.nibble-its-content .box-link {
    margin-top: 1.5em;
}

@media (max-width: 767px) {
    .nibble-image-text-section {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "text";
    }

    .nibble-image-text-section.text-left {
        grid-template-areas:
            "image"
            "text";
    }

    .nibble-its-content {
        grid-template-columns: 1fr;
    }
    
}