/* ============================================================
   LOVEU | Homepage 04 About Us | V1.1 — Layered offset layout
   Uses original Bootstrap 5 .container and 12-column .row.
   All selectors are scoped to body.loveu-site .loveu-about.
   No changes to completed Header, Banner, Categories or Products.
   ============================================================ */
body.loveu-site .loveu-about {
    padding-block: clamp(2.6rem, 5.2vw, 5.5rem);
    background: var(--loveu-surface, #f2f2f2);
}
/* The WHITE PANEL is narrower than the Bootstrap container.
   The IMAGE shifts right past its edge, deliberately overlapping the panel.
   Sizing stays relative to the same .container; it never runs outside it. */
body.loveu-site .loveu-about__panel {
    --loveu-about-edge: clamp(5rem, 10.5vw, 10.5rem);
    --loveu-about-photo-shift: clamp(3rem, 6.4vw, 6rem);
    --loveu-about-photo-grow: calc(var(--loveu-about-edge) - var(--loveu-about-photo-shift));
    position: relative;
    width: calc(100% - var(--loveu-about-edge));
    background: var(--loveu-paper, #fff);
    overflow: visible;
    padding-block: clamp(1.2rem, 2vw, 2rem);
}
body.loveu-site .loveu-about__panel > .row { margin-inline: 0; }
body.loveu-site .loveu-about__media-col {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}
body.loveu-site .loveu-about__content-col { position: relative; z-index: 2; }

body.loveu-site .loveu-about__content-col,
body.loveu-site .loveu-about__media-col { min-width: 0; }
body.loveu-site .loveu-about__content {
    padding: clamp(1.65rem, 4.2vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}
body.loveu-site .loveu-about__title {
    margin: 0 0 .95rem;
    font: 600 clamp(1.6rem, 2.2vw, 2.45rem)/1.28 var(--loveu-font, Arial, sans-serif);
    color: var(--loveu-text, #222832);
}
body.loveu-site .loveu-about__intro {
    margin: 0 0 1.35rem;
    color: var(--loveu-muted, #6d7480);
    font: 400 .91rem/1.7 var(--loveu-font, Arial, sans-serif);
}
body.loveu-site .loveu-about__description {
    width: 100%;
    min-width: 0;
    color: #444b57;
    font: 400 .88rem/1.85 var(--loveu-font, Arial, sans-serif);
    overflow-wrap: anywhere;
}
body.loveu-site .loveu-about__description p {
    margin: 0 0 1.15rem;
    line-height: inherit;
}
body.loveu-site .loveu-about__description > :last-child { margin-bottom: 0; }
body.loveu-site .loveu-about__description :is(h3,h4) { font-weight: 600; font-size: 1rem; margin-block: 1.2rem .6rem; }
body.loveu-site .loveu-about__description :is(img,video) { max-width: 100%; height: auto; }
body.loveu-site .loveu-about__description iframe { max-width: 100%; }
body.loveu-site .loveu-about__description table { display: block; max-width: 100%; overflow-x: auto; }
body.loveu-site .loveu-about__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8.7rem;
    min-height: 2.65rem;
    padding: .65rem 1.65rem;
    margin-top: clamp(1.25rem, 2.2vw, 2rem);
    background: var(--loveu-navy, #10336d);
    border: 1px solid var(--loveu-navy, #10336d);
    border-radius: 2rem;
    color: #fff;
    text-decoration: none;
    font: 500 .83rem/1.35 var(--loveu-font, Arial, sans-serif);
    transition: background .2s, border-color .2s, transform .2s;
}
body.loveu-site a.loveu-about__button:hover,
body.loveu-site a.loveu-about__button:focus-visible {
    background: var(--loveu-navy-dark, #0a2857);
    border-color: var(--loveu-navy-dark, #0a2857);
    color: #fff;
    transform: translateY(-1px);
}
body.loveu-site .loveu-about__button--pending { cursor: default; }
body.loveu-site .loveu-about__media {
    margin: 0;
    flex: 0 0 auto;
    width: calc(100% + var(--loveu-about-photo-grow));
    height: clamp(19rem, 28.4vw, 34rem);
    min-height: 0;
    margin-left: var(--loveu-about-photo-shift);
    background: #e3e5e7;
    overflow: hidden;
}
body.loveu-site .loveu-about__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}
/* Gentle optional entrance, without hiding CMS content when JS is absent. */
@media (prefers-reduced-motion: no-preference) {
    body.loveu-site .loveu-about.is-visible .loveu-about__panel {
        animation: loveu-about-enter .5s ease-out both;
    }
    @keyframes loveu-about-enter {
        from { opacity: .86; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
@media (max-width: 991.98px) {
    /* Tablets and phones: remove the offset to protect content and touch layout. */
    body.loveu-site .loveu-about__panel {
        width: 100%;
        padding-block: 0;
    }
    body.loveu-site .loveu-about__content { padding: clamp(1.8rem, 5vw, 3.5rem); }
    body.loveu-site .loveu-about__media { 
        width: 100%; height: auto; aspect-ratio: 1.65 / 1;
        margin-left: 0;
    }
    body.loveu-site .loveu-about__media,
    body.loveu-site .loveu-about__media img { min-height: 0; }
}
@media (max-width: 575.98px) {
    body.loveu-site .loveu-about { padding-block: 2.5rem; }
    body.loveu-site .loveu-about__content { padding: 1.5rem 1.4rem 2rem; }
    body.loveu-site .loveu-about__title { font-size: 1.65rem; margin-bottom: .7rem; }
    body.loveu-site .loveu-about__intro { margin-bottom: 1rem; font-size: .84rem; }
    body.loveu-site .loveu-about__description { font-size: .84rem; line-height: 1.8; }
    body.loveu-site .loveu-about__button { margin-top: 1.4rem; }
    body.loveu-site .loveu-about__media { aspect-ratio: 1.25 / 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.loveu-site .loveu-about__button { transition: none; }
}