/**
 * Perry's Diamonds & Estate Jewelry: Our Services
 *
 * Geometry measured from the Made Outside frame at its 1280 comp width
 * (clients/perrysjewelry.com/builds/DES-1272/full-site/figma/our-services/). Hooks come from
 * build/gen_services.py: .perrys-svc + .perrys-svc-<section>.
 *
 * Section padding carries !important because PageBuilder puts Bootstrap's px-0/py-0 utilities on
 * every section and those are themselves !important — the same override home.css makes.
 */

/* Page scaffolding */
/* ----------------------------- */
.perrys-svc {
    --perrys-u: min(1px, calc(100vw / 1280));
}

.perrys-svc > .container-fluid {
    padding-top: 0;
    padding-bottom: 0;
}

.perrys-svc > .container-fluid > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}

.perrys-svc :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
    margin-top: 0;
    margin-bottom: 0;
}

.perrys-svc .link-container,
.perrys-svc .link-container > a,
.perrys-svc .link-container > .btn {
    margin: 0;
}

.perrys-svc .btn {
    vertical-align: top;
}

.perrys-svc .perrys-kicker--rule {
    line-height: 13px;
}

.perrys-svc img[src$="/services/hero.jpg"] { aspect-ratio: 2470 / 745; }
.perrys-svc img[src$="/services/showroom.jpg"] { aspect-ratio: 2348 / 1394; }
.perrys-svc img[src$="/services/experts.jpg"] { aspect-ratio: 510 / 680; }
.perrys-svc img[src$="/home/newsletter.jpg"] { aspect-ratio: 832 / 956; }
.perrys-svc img[src$="/home/pattern-band.jpg"] { aspect-ratio: 2560 / 168; }


/* 1. Banner */
/* ----------------------------- */
.perrys-svc-hero {
    position: relative;
    padding-top: calc(22 * var(--perrys-u)) !important;
}

/* The comp's darker band comes up halfway behind the banner photo (Made Outside QA, a global change): ivory
   above the photo's midline, the intro's beige below it. Measured on the frame, the beige starts at 49% of
   the photo's height. The band is the lower half of the photo area, under the 22 of padding. */
.perrys-svc-hero::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc((100% - 22 * var(--perrys-u)) / 2);
    background-color: var(--perrys-beige);
}

.perrys-svc-hero > .container-fluid {
    position: relative;
}


/* 2. Intro on the beige band */
/* ----------------------------- */
/* More room under the banner (Made Outside QA: more padding): the frame leaves 106.9 from the photo to the headline's
   capitals, and the build left 93.5 at 84 of padding. */
.perrys-svc-intro {
    padding: calc(97.4 * var(--perrys-u)) 0 calc(96 * var(--perrys-u)) !important;
}

.perrys-svc-title {
    max-width: calc(600 * var(--perrys-u));
    margin-inline: auto;
}

.perrys-svc-lead {
    max-width: calc(560 * var(--perrys-u));
    margin: calc(30 * var(--perrys-u)) auto 0;
}

/* The subhead is a native paragraph widget with no page class, and it ran the full 1280 width. It takes the
   headline's measure (Made Outside QA), and the page's :is(h1..p) margin reset is (0,1,1), which would
   cancel a bare margin: the section class plus the element lifts this to (0,2,1). */
.perrys-svc-intro p.lead {
    margin: calc(58 * var(--perrys-u)) auto 0;
}

@media (min-width: 768px) {
    .perrys-svc-intro p.lead {
        max-width: calc(600 * var(--perrys-u));
    }
}


/* 3. Pattern band */
/* ----------------------------- */
.perrys-svc-bandwrap .perrys-svc-band img {
    display: block;
    width: 100%;
    height: auto;
}


/* 4. "We offer full service options" — the promise line, set as running italic display copy */
/* ----------------------------- */
.perrys-svc-promise-wrap {
    padding: calc(96 * var(--perrys-u)) 0 calc(72 * var(--perrys-u)) !important;
}

.perrys-svc-promise-wrap .perrys-kicker-wrap {
    margin-bottom: calc(44 * var(--perrys-u));
}

/* comp: Cormorant italic 38/59 at -0.04em, three lines on a 920 measure (58.4 line pitch on the frame) --
   takes the shared .perrys-di-para role tokens (overrides/typography.css) */
.perrys-svc-promise {
    max-width: calc(920 * var(--perrys-u));
    margin-inline: auto;
    font-family: var(--perrys-font-display);
    font-size: var(--perrys-di-para-size);
    font-style: italic;
    line-height: var(--perrys-di-para-lh);
    text-align: center;
    letter-spacing: -0.04em;
}

.perrys-svc-promise__script {
    display: block;
    width: calc(185 * var(--perrys-u));
    height: auto;
    margin: calc(26 * var(--perrys-u)) auto 0;
}


/* 5. Tile mosaic. Two columns per row at the comp's unequal widths; a tall tile on one side is
   matched by two stacked tiles on the other. The row stretches both columns to the same height and
   the art fills whatever it is given, so the rows line up without hard-coding every tile's height. */
/* ----------------------------- */
.perrys-svc-tiles {
    padding-bottom: calc(96 * var(--perrys-u)) !important;
}

.perrys-svc-tiles > .container-fluid > .row {
    --bs-gutter-x: calc(43 * var(--perrys-u));
    align-items: stretch;
    max-width: calc(929 * var(--perrys-u));
    margin-inline: auto;
}

.perrys-svc-tiles > .container-fluid > .row + .row {
    margin-top: calc(43 * var(--perrys-u));
}

.perrys-svc-tiles__col {
    display: flex;
    flex-direction: column;
    gap: calc(30 * var(--perrys-u));
}

.perrys-svc-tiles__col > .widget {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* Row heights are the comp's: 662, 453, 390 and 430 design px top to bottom. */
.perrys-svc-tiles > .container-fluid > .row:nth-of-type(1) { min-height: calc(662 * var(--perrys-u)); }
.perrys-svc-tiles > .container-fluid > .row:nth-of-type(2) { min-height: calc(453 * var(--perrys-u)); }
.perrys-svc-tiles > .container-fluid > .row:nth-of-type(3) { min-height: calc(390 * var(--perrys-u)); }
.perrys-svc-tiles > .container-fluid > .row:nth-of-type(4) { min-height: calc(430 * var(--perrys-u)); }

.perrys-svc-tile {
    display: flex;
    flex: 1;
    flex-direction: column;
    text-decoration: none;
}

.perrys-svc-tile__img {
    display: block;
    flex: 1;
    overflow: hidden;
}

.perrys-svc-tile__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--perrys-ease-out);
}

/* the comp notes the tile art grows on hover */
.perrys-svc-tile:hover .perrys-svc-tile__img img,
.perrys-svc-tile:focus-visible .perrys-svc-tile__img img {
    transform: scale(1.04);
}

.perrys-svc-tile__caption {
    display: block;
    flex: none;
    margin-top: calc(16 * var(--perrys-u));
    text-align: center;
}

@media (max-width: 767.98px) {
    .perrys-svc-tiles > .container-fluid > .row,
    .perrys-svc-tiles > .container-fluid > .row:nth-of-type(n) {
        min-height: 0;
    }

    .perrys-svc-tile__img {
        flex: none;
    }

    .perrys-svc-tile__img img {
        height: calc(240 * var(--perrys-u));
    }
}


/* 6. Experts band */
/* ----------------------------- */
.perrys-svc-experts {
    padding: calc(72 * var(--perrys-u)) 0 !important;
}


/* 7. FAQ */
/* ----------------------------- */
.perrys-svc-faq {
    padding: calc(96 * var(--perrys-u)) 0 !important;
}

.perrys-svc-faq .perrys-kicker-wrap {
    margin-bottom: calc(44 * var(--perrys-u));
}


/* 8. Showroom */
/* ----------------------------- */
.perrys-svc-showroom {
    padding-bottom: calc(96 * var(--perrys-u)) !important;
}

/* Less padding below the block when the Instagram band follows (Made Outside QA): the frame leaves 115 to 142 from
   the photo to the lead's ink, and the Instagram band carries 113 of its own above the lead (107 below 992) plus 9
   of leading. The class is shared with service pages whose newsletter follows the block, which keep their gap. */
.perrys-svc-showroom:has(+ .perrys-insta-section) {
    padding-bottom: 20px !important;
}

@media (max-width: 991.98px) {
    .perrys-svc-showroom:has(+ .perrys-insta-section) {
        padding-bottom: 26px !important;
    }
}


/* 9. Newsletter */
/* ----------------------------- */
/* The homepage's spacing (pages/home.css, 18). The class is shared by Our Services, Layaway & Financing
   and the service pages built on production (Pearl & Bead, Custom Design, Insurance, Repairs); above it
   sits either the Instagram band, which ends at its posts, or the showroom band, which ends at its photo. */
.perrys-svc-newsletter {
    padding: 95.5px 0 105px !important;
}

@media (min-width: 992px) {
    .perrys-svc-newsletter {
        padding: 150px 0 125px !important;
    }
}

.perrys-svc-newsletter > .container-fluid > .row {
    align-items: center;
    max-width: var(--perrys-w-text);
    margin-inline: auto;
}

.perrys-svc-newsletter .perrys-split-img img {
    display: block;
    width: 100%;
    height: auto;
}

.perrys-svc-newsletter .perrys-split-text {
    padding-left: calc(56 * var(--perrys-u));
}

.perrys-svc-newsletter .perrys-split-title {
    margin-bottom: calc(24 * var(--perrys-u));
}

@media (max-width: 767.98px) {
    .perrys-svc-newsletter .perrys-split-text {
        margin-top: calc(32 * var(--perrys-u));
        padding-left: 0;
    }
}


/* Banner heights — the comp's own band heights as a floor; the text block is in normal
/* flow (see components.css) so a banner always grows to fit its content. */
.perrys-svc-hero .widget-banner-inner { min-height: calc(361 * var(--perrys-u)); }
.perrys-svc-showroom .widget-banner-inner { min-height: calc(538 * var(--perrys-u)); }


/* Mobile measures */
/* -----------------------------
/* Every `max-width: calc(N * var(--perrys-u))` above is N/1280 of the VIEWPORT, so it holds the
/* comp's proportions at any width -- but that means it is the same fraction on a phone as on a
/* desktop, while the paired font-size is clamped and barely shrinks. At 390 a 560u measure is
/* 171px: ~44% of the screen, setting body copy 3-4 words to the line. Below the stacking
/* breakpoint the proportional cap is dropped for a real 24px gutter instead. Desktop is untouched. */
@media (max-width: 767.98px) {
    .perrys-svc-title,
    .perrys-svc-lead,
    .perrys-svc-promise,
    .perrys-svc-tiles > .container-fluid > .row {
        max-width: calc(100vw - 48px);
    }
}