/* ==========================================================================
   Safe Pools - homepage sections
   ========================================================================== */

/* ==========================================================================
   INTRO
   ========================================================================== */
.sp-intro {
    position: relative;
}

.sp-intro-slide {
    position: relative;
    min-height: 745px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.sp-intro-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 59, 88, .25) 0%, rgba(15, 59, 88, .72) 100%);
}

[dir="ltr"] .sp-intro-overlay {
    background: linear-gradient(270deg, rgba(15, 59, 88, .25) 0%, rgba(15, 59, 88, .72) 100%);
}

.sp-intro-slide .container {
    position: relative;
    z-index: 2;
}

/* copy sits on the reading-start side: right in Arabic, left in English.
   610px wide, measured from the rule that runs under the text (848..1457). */
.sp-intro-content {
    max-width: 610px;
    margin-inline-end: auto;
    color: var(--sp-white);
    text-align: start;
}

.sp-intro-title {
    color: var(--sp-white);
    font-size: 56px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    margin-bottom: 18px;
}

.sp-intro-text {
    font-size: 18px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 26px;
}

/* Rule above the "read more" link: it runs the full width of the copy, with a
   short pale-blue segment (82px, sitting 41px in from the reading-start edge)
   picking out the part above the link. */
.sp-intro-btn {
    position: relative;
    color: var(--sp-white);
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .45);
}

.sp-intro-btn::before {
    content: '';
    position: absolute;
    top: -3px;
    inset-inline-start: 41px;
    width: 82px;
    height: 2px;
    background: #6BA7CF;
}

.sp-intro-btn:hover {
    color: var(--sp-white);
}

/* Both chevrons share ONE faint rounded panel (measured 55x121 at x 43..98,
   a soft dark wash over the photo). The chevrons themselves are bare white -
   no individual discs. */
.sp-intro .owl-nav {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    inset-inline-end: 43px;
    width: 55px;
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    background: rgba(0, 0, 0, .12);
    border-radius: 18px;
    z-index: 5;
}

.sp-intro .owl-nav button.owl-prev,
.sp-intro .owl-nav button.owl-next {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sp-white);
    font-size: 13px;
    opacity: .9;
    transition: opacity var(--sp-transition), transform var(--sp-transition);
}

.sp-intro .owl-nav button.owl-prev:hover,
.sp-intro .owl-nav button.owl-next:hover {
    background: transparent;
    opacity: 1;
    transform: scale(1.25);
}

.sp-intro-wave {
    position: absolute;
    bottom: -1px;
    inset-inline-start: 0;
    width: 100%;
    z-index: 4;
    pointer-events: none;
}

/* ==========================================================================
   ABOUT
   --------------------------------------------------------------------------
   The two columns are not a 50/50 split in the design: the copy runs 259..868
   (610px) and the photo 913..1398 (485px) inside a 1140 row, with a 45px gap.
   ========================================================================== */
@media (min-width: 992px) {
    .sp-about .row {
        justify-content: space-between;
    }

    .sp-about .row > [class*="col-"] {
        padding-inline: 0;
    }

    /* max-width must be released too - the grid caps columns at 50%, which
       silently clamped the wider copy column back to half the row. */
    .sp-about .row > [class*="col-"]:first-child {
        flex: 0 0 auto;
        width: 42.5%;
        max-width: 42.5%;
    }

    .sp-about .row > [class*="col-"]:last-child {
        flex: 0 0 auto;
        width: 53.5%;
        max-width: 53.5%;
    }
}

.sp-about-media {
    position: relative;
    padding-top: 12px;
    padding-inline-start: 12px;
}

/* blue block peeking out above and behind the photo, on the outer edge */
.sp-about-media::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 96%;
    height: 45%;
    background: var(--sp-blue);
    border-radius: 6px;
}

.sp-about-media img {
    position: relative;
    width: 100%;
    border-radius: 4px;
    display: block;
}

/* no inner padding - the 45px gap between copy and photo comes from the
   space-between row above, so the rule spans the full 610px */
.sp-about-body {
    padding-inline-start: 0;
}

.sp-about .sp-section-title {
    margin-bottom: 26px;
}

.sp-about-text {
    color: #4A4A4A;
    line-height: 2.1;
    text-align: justify;
}

/* Same construction as the intro: a 1px rule the width of the copy with an
   82px accent sitting 41px in from the reading-start edge. Here the rule is
   #D7D7D7 and the accent is navy. */
.sp-about-more {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #D7D7D7;
    position: relative;
}

.sp-about-more::before {
    content: '';
    position: absolute;
    top: -2px;
    inset-inline-start: 41px;
    width: 82px;
    height: 2px;
    background: var(--sp-accent-line);
}

.sp-about-more .sp-more {
    color: var(--sp-navy);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
/* Card is a fixed 270x310 box (measured). ONLY the image changes height on
   hover - the card itself never resizes, so the row never shifts. */
.sp-service-card {
    position: relative;
    height: 310px;
    background: var(--sp-white);
    border-radius: var(--sp-radius-lg);
    padding: 18px 14px 0;
    text-align: center;
    transition: box-shadow var(--sp-transition);
}

.sp-service-card:hover {
    box-shadow: var(--sp-shadow-hover);
}

.sp-service-media {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    height: 171px;
    transition: height var(--sp-transition);
}

.sp-service-card:hover .sp-service-media {
    height: 123px;
}

.sp-service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* physical left + translate so it stays centred in both directions */
.sp-service-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 143px;
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background: var(--sp-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(15, 59, 88, .1);
    transition: all var(--sp-transition);
}

.sp-service-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    transition: filter var(--sp-transition);
}

.sp-service-card:hover .sp-service-icon {
    top: 89px;
    background: var(--sp-blue);
}

/* the icons ship as dark line art, so invert them on the blue disc */
.sp-service-card:hover .sp-service-icon img {
    filter: brightness(0) invert(1);
}

/* pinned so the title sits where the design puts it; on hover it lifts to
   make room for the booking link without changing the card height */
.sp-service-body {
    position: absolute;
    top: 252px;
    inset-inline: 14px;
    transition: top var(--sp-transition);
}

.sp-service-card:hover .sp-service-body {
    top: 219px;
}

.sp-service-title {
    font-size: 17px;
    line-height: 1.6;
}

.sp-service-title a {
    color: var(--sp-navy);
}

.sp-service-card:hover .sp-service-title a {
    color: var(--sp-blue);
}

/* booking link only shows on the focused card - 21px with an 11px gap before
   its 12px arrow, measured on the design */
.sp-service-btn {
    position: relative;
    color: var(--sp-blue);
    font-size: 21px;
    gap: 11px;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all var(--sp-transition);
}

.sp-service-card:hover .sp-service-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sp-service-btn span {
    position: relative;
    z-index: 1;
}

/* NOT a full-width fill: a small 25x33 pale block sitting behind the first
   letter only (977..1002 against a label running 925..995), the same treatment
   as the active nav item. */
.sp-service-btn span::before {
    content: '';
    position: absolute;
    inset-inline-start: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 33px;
    background: var(--sp-highlight-soft);
    z-index: -1;
}

/* faint wave decoration tucked into the bottom outer corner of the section.
   The extra bottom padding is the room the rising why-us photo occupies - the
   grey has to continue behind it, so this must be padding, never margin. */
.sp-services {
    position: relative;
    overflow: hidden;
    padding-bottom: 149px;
}

.sp-services::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 530px;
    height: 325px;
    max-width: 40%;
    background: url('../images/services-wave-bg.png') no-repeat bottom right / contain;
    pointer-events: none;
    z-index: 0;
}

[dir="ltr"] .sp-services::after {
    background-position: bottom left;
    transform: scaleX(-1);
}

.sp-services > .container {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
/* The pattern artwork (867x1019) covers the navy area from x=733 rightward and
   runs across BOTH the panel and the counters band, so it sits on this wrapper
   and is anchored to the reading-start edge at its natural proportion. */
/* The pattern covers the whole navy block - behind the photo and under the
   counters as well as the panel. It is laid down as two halves rather than a
   plain tile: the second half is mirrored, so the two meet on identical edges
   and blend instead of showing the hard seam a straight repeat produces. Each
   half is stretched to the full height, so nothing is left bare at the bottom. */
.sp-why-wrap {
    position: relative;
    background-color: var(--sp-navy);
}

.sp-why-wrap::before,
.sp-why-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-image: var(--sp-why-pattern);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}

.sp-why-wrap::before {
    inset-inline-start: 0;
}

/* mirrored, so its outer edge matches the edge it meets in the middle */
.sp-why-wrap::after {
    inset-inline-end: 0;
    transform: scaleX(-1);
}

/* sections ride above the pattern */
.sp-why-wrap > * {
    position: relative;
    z-index: 1;
}

/* The photo rises 90px into the services block above, which stays grey behind
   it - so no white band appears between the two sections. The clearance comes
   from the services section's own padding-bottom, never a margin. */
.sp-why {
    position: relative;
    display: flex;
    align-items: stretch;
    background: transparent;
    min-height: 751px;
}

/* Photo on the far side, navy panel on the reading-start side (image left +
   panel right in Arabic, mirrored in English). The photo rises 90px above the
   navy block, exactly as drawn - the negative margin also makes it 90px
   taller than the panel it sits beside. */
.sp-why-media {
    width: 45.8%;
    flex-shrink: 0;
    order: 2;
    margin-top: -90px;
}

.sp-why-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* the pattern artwork is the exact size of this panel, so it sits at its own
   width anchored to the top - stretching it over the whole section (photo
   half included) was what made it look broken */
.sp-why-panel {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 70px 60px;
    order: 1;
}

/* 594px = two 282px cards plus the 30px gap, flush to the panel's inner edge */
.sp-why-inner {
    width: 100%;
    max-width: 594px;
    margin-inline-start: auto;
}

.sp-why .sp-section-head {
    text-align: start;
    margin-bottom: 40px;
}

.sp-why .sp-section-title {
    color: var(--sp-white);
}

/* stronger blue for the bar where the heading sits on navy */
.sp-why .sp-section-title::before {
    background: var(--sp-title-bar-navy);
}

.sp-why .sp-section-sub {
    color: rgba(255, 255, 255, .75);
}

.sp-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* every card is the same 282x185 box in the design, so the height is fixed
   and the contents are centred inside it */
.sp-why-card {
    height: 185px;
    background: var(--sp-white);
    border-radius: 6px;
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-why-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sp-shadow-hover);
}

.sp-why-icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin-bottom: 18px;
}

.sp-why-title {
    font-size: 17px;
    color: var(--sp-navy);
}

/* ==========================================================================
   COUNTERS
   ========================================================================== */
/* transparent so the wrapper's navy and its pattern carry straight through -
   an opaque fill here would cut the pattern off at the counters.
   Band is 267px tall in the design: ~90px of padding either side of the row. */
.sp-counters {
    background: transparent;
    padding: 76px 0;
}

.sp-counters-row {
    display: flex;
    flex-wrap: wrap;
}

.sp-counter {
    flex: 1 1 0;
    min-width: 160px;
    text-align: center;
    padding: 6px 20px;
    position: relative;
}

.sp-counter + .sp-counter::before {
    content: '';
    position: absolute;
    top: 8px;
    inset-inline-start: 0;
    width: 1px;
    height: 76%;
    background: rgba(255, 255, 255, .18);
}

.sp-counter-value {
    color: var(--sp-white);
    font-size: 55px;
    font-weight: 700;
    line-height: 1.2;
    direction: ltr;
}

.sp-counter-label {
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    margin-top: 6px;
}

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.sp-projects .owl-stage-outer {
    padding: 10px 0 0;
}

.sp-project-card {
    height: 100%;
}

.sp-project-link {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    height: 509px;
}

.sp-project-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

/* the centred card is the "active" one - it alone shows its caption */
.sp-project-link::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Sampled against the design frame band by band: the project photo is
       exported with the wash already flattened into it, so the card in the file
       is only ~18% darker than the raw upload - not the 71% the CSS was adding
       on top. Matching the file means a light gradient here; the caption keeps
       its contrast from the text-shadow below rather than from a heavy wash. */
    background: linear-gradient(-3.61deg, rgba(0, 0, 0, .18) 35%, rgba(0, 0, 0, 0) 125%);
    opacity: 0;
    transition: opacity var(--sp-transition);
}

.sp-projects-carousel .center .sp-project-link::after,
.sp-project-card:hover .sp-project-link::after {
    opacity: 1;
}

/* caption block sits 48px in from the sides and 38px off the bottom, with the
   arrow badge stacked above the title (not pinned to a corner) */
.sp-project-body {
    position: absolute;
    inset-inline: 48px;
    bottom: 38px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--sp-white);
    /* carries the caption's contrast now that the wash is light, so a bright
       photo behind it still reads */
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
    opacity: 0;
    transform: translateY(14px);
    transition: all var(--sp-transition);
}

.sp-projects-carousel .center .sp-project-body,
.sp-project-card:hover .sp-project-body {
    opacity: 1;
    transform: translateY(0);
}

.sp-project-title {
    display: block;
    font-size: 31px;
    font-weight: 700;
    margin-bottom: 15px;
}

.sp-project-excerpt {
    display: block;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .85);
}

/* Measured off the 1600px Figma frame: the badge is a 53.39px disc filled with
   black at 20% and ringed by a 1px white stroke at 29% - it reads as a dark
   lens over the photo, not the light frosted pill it was before. Its bottom
   edge sits 12px above the title, and its outer edge lines up with the title's
   own edge, which is what the shared 48px inset on .sp-project-body gives it. */
.sp-project-arrow {
    width: 53px;
    height: 53px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .29);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The glyph is the arrow exported from the file. It is drawn pointing straight
   down, and the design turns it 127.66deg, which lands it pointing up and out
   towards the reading-start corner. English mirrors it about the vertical. */
.sp-project-arrow img {
    width: 11px;
    height: 16px;
    display: block;
    transform: rotate(127.66deg);
}

[dir="ltr"] .sp-project-arrow img {
    transform: scaleX(-1) rotate(127.66deg);
}

.sp-project-card:hover .sp-project-link img {
    transform: scale(1.05);
}

/* ==========================================================================
   PRODUCTS
   ========================================================================== */
.sp-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 30px;
}

.sp-product-card {
    text-align: center;
}

.sp-product-media {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}

.sp-product-media img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform .5s ease;
}

.sp-product-card:hover .sp-product-media img {
    transform: scale(1.06);
}

.sp-product-title {
    font-size: 17px;
    margin-bottom: 10px;
}

.sp-product-title a {
    color: var(--sp-navy);
}

.sp-product-card:hover .sp-product-title a {
    color: var(--sp-blue);
}

/* direction follows the page so the Riyal glyph lands after the figure in
   reading order - see the note in woocommerce.css */
.sp-product-price {
    color: var(--sp-blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
}

.sp-product-price del {
    color: var(--sp-muted);
    font-weight: 400;
    font-size: 15px;
    margin-inline-end: 6px;
}

.sp-product-price ins {
    text-decoration: none;
}

/* add-to-cart link, styled like the arrow links used elsewhere */
.sp-product-card .add_to_cart_button,
.sp-product-card .added_to_cart,
.sp-product-card .sp-product-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--sp-blue);
    font-size: 15px;
    position: relative;
    z-index: 1;
}

.sp-product-card .add_to_cart_button::before {
    content: '';
    position: absolute;
    inset-inline-start: -4px;
    bottom: 1px;
    width: calc(100% + 8px);
    height: 11px;
    background: var(--sp-highlight);
    z-index: -1;
}

.sp-product-card .add_to_cart_button::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f060';
    margin-inline-start: 4px;
}

[dir="ltr"] .sp-product-card .add_to_cart_button::after {
    content: '\f061';
}

.sp-product-card .add_to_cart_button.loading::after {
    content: '\f110';
    animation: fa-spin 1s infinite linear;
}

.sp-product-card .add_to_cart_button.added::after {
    content: '\f00c';
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    :root {
        --sp-h1: 42px;
        --sp-h2: 30px;
    }

    .sp-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    :root {
        --sp-section-y: 60px;
    }

    .sp-intro-slide {
        min-height: 560px;
    }

    .sp-intro-content {
        max-width: 100%;
    }

    .sp-intro .owl-nav {
        inset-inline-start: 16px;
    }

    .sp-why {
        flex-direction: column;
    }

    .sp-why-media {
        width: 100%;
        height: 280px;
    }

    .sp-why-panel {
        padding: 50px 24px;
    }

    .sp-why-inner {
        max-width: 100%;
    }

    .sp-about-media {
        margin-bottom: 36px;
    }

    .sp-about-body {
        padding-inline-start: 0;
    }

    .sp-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 20px;
    }

    .sp-counter + .sp-counter::before {
        display: none;
    }

    .sp-counter {
        flex: 0 0 50%;
        margin-bottom: 26px;
    }

    .sp-project-link {
        height: 320px;
    }
}

@media (max-width: 575px) {
    :root {
        --sp-h1: 32px;
        --sp-h2: 25px;
    }

    .sp-intro-slide {
        min-height: 460px;
    }

    .sp-intro-text {
        font-size: 16px;
    }

    .sp-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 14px;
    }

    .sp-product-media img {
        height: 150px;
    }

    .sp-why-grid {
        gap: 14px;
    }

    .sp-why-card {
        padding: 24px 12px;
    }

    .sp-counter-value {
        font-size: 34px;
    }
}