/*
 * OWNED grid for the home page (np-h* classes) - replicates the Betheme
 * grid the frozen render used, measured from production at 1440px:
 * 1200px wrap, float rows at exact fractions, columns at fraction-2% with
 * 1% side margins and 40px bottom margin (column-margin-* overrides kept
 * from the original markup). Component styling (counters, service boxes,
 * sliders, q-inquiry form, mailchimp...) stays in the child style.css,
 * keyed on the custom classes this markup preserves. Auto-linked by the
 * normal-page dispatcher ({slug}-page.css convention).
 */

/* Digital certified copy offer: one native button, shared estimate handler. */
.np-digital-promo-row .np-digital-promo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    /* Match the full-width home columns and their 1% side gutters. */
    width: 98%;
    margin: 20px 1% 28px;
    padding: 30px;
    border: 1px solid #d4e4eb;
    border-left: 5px solid #2084a2;
    border-radius: 16px;
    background: linear-gradient(115deg, #fff 20%, #f0f8fb 100%);
    color: #284064;
    box-shadow: 0 8px 26px rgba(40, 64, 100, .10);
    font-family: 'Open Sans', Arial, sans-serif;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.np-digital-promo-row .np-digital-promo:hover {
    background: linear-gradient(115deg, #fff 20%, #e8f5fa 100%);
    color: #284064;
    border-color: #2084a2;
    box-shadow: 0 10px 30px rgba(40, 64, 100, .18);
}
.np-digital-promo-row .np-digital-promo:focus-visible { outline: 3px solid #2084a2; outline-offset: 4px; }
.np-digital-promo::after { display: none; }
.np-digital-promo-copy { flex: 1 1 420px; min-width: 0; }
.np-digital-promo-title { display: block; font-size: 27px; line-height: 1.4; font-weight: 700; }
.np-digital-promo-discount { color: #cf3038; }
.np-digital-promo-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 16px; border-radius: 7px; background: #284064; color: #fff; font-size: 14px; line-height: 1.5; font-weight: 600; }
.np-digital-promo-cta > span { font-size: 22px; line-height: 1; }
.np-digital-promo-badges { display: flex; flex: 0 0 auto; align-items: stretch; gap: 10px; }
.np-digital-promo-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 10px; border: 1px solid rgba(40, 64, 100, .09); border-radius: 12px; font-size: 12px; line-height: 1.4; font-weight: 700; }
.np-digital-promo-badge svg { display: block; width: 58px; height: 58px; }
.np-digital-promo-new { color: #bf343d; background: #fff1f0; }
.np-digital-promo-digital { color: #176d89; background: #edf9fc; }
.np-digital-promo-certified { color: #237357; background: #eaf7f1; }
@media (max-width: 1050px) {
    .np-digital-promo-row .np-digital-promo { flex-direction: column; align-items: flex-start; gap: 24px; }
    .np-digital-promo-copy { flex: auto; }
    .np-digital-promo-badges { width: 100%; }
    .np-digital-promo-badge { flex: 1; }
}
@media (max-width: 767px) {
    .np-digital-promo-row .np-digital-promo { width: 100%; margin-left: 0; margin-right: 0; padding: 22px 16px; }
    .np-digital-promo-title { font-size: 23px; }
    .np-digital-promo-badges { gap: 6px; }
    .np-digital-promo-badge { padding: 12px 4px; font-size: 12px; }
    .np-digital-promo-badge svg { width: 44px; height: 44px; }
}
@media (max-width: 479px) {
    .np-digital-promo-badges { flex-direction: column; gap: 8px; }
    .np-digital-promo-badge { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 14px; font-size: 14px; }
    .np-digital-promo-badge svg { flex: 0 0 36px; width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .np-digital-promo-row .np-digital-promo { transition: none; }
}

/* ---- Hero slider: plugin-free Revolution Slider replica -------------- */
/* production slider height: 550px, shrinking fluidly below ~1176px viewport
   (measured: h = 0.4677 x vw) */
#np-hero-slider { position: relative; height: min(550px, 46.77vw); overflow: hidden; background: #fff; }
.np-hero-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity .6s ease; z-index: 1; }
.np-hero-slide.active { opacity: 1; z-index: 2; }
.np-hero-bg { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center top; }
/* the original layer: centered at y132, 38/52 Open Sans 600 white, 10px
   padding on a ~40% black plate, fading in over ~1.6s after the slide */
.np-hero-title { position: absolute; top: 132px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 96%; margin: 0; padding: 10px; text-align: center; color: #fff; font-family: 'Open Sans', Arial, Tahoma, sans-serif; font-size: 38px; line-height: 52px; font-weight: 600; }
.np-hero-alpha-39 .np-hero-title { background: rgba(0,0,0,.39); }
.np-hero-alpha-41 .np-hero-title { background: rgba(0,0,0,.41); }
.np-hero-slide .np-hero-title { opacity: 0; }
.np-hero-slide.active .np-hero-title { animation: npHeroTitleIn 1.6s ease .1s both; }
@keyframes npHeroTitleIn { from { opacity: 0; } to { opacity: 1; } }
/* counters land here (cloned by the chrome bundle on >991px screens) */
.np-hero-counters { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
/* production scales the title layer only below 1024px, by vw/1178 */
@media (max-width: 1024px) {
    .np-hero-title { font-size: 3.2258vw; line-height: 4.4142vw; top: 11.2054vw; padding: 0.8489vw; }
}
/* production's Revolution Slider is hidden on tablet AND phone (measured:
   display:none at 768px, where the .mobile-slider-section H1 band takes
   over below 768). Hiding only <768 left a 359px hero on tablet that
   pushed the whole page down 428px. */
@media (max-width: 768px) {
    #np-hero-slider { display: none; }
}

.np-hband, .np-hwrap, .np-hrow, .np-hcol { box-sizing: border-box; }
.np-hband { position: relative; }
/* Betheme's bg-cover rule is keyed on .section/.mcb-section, which the np
   bands no longer carry - without this the band photos rendered at their
   natural size and stopped partway down, leaving trailing content (e.g. the
   ВИЖ ВСИЧКИ ДОКУМЕНТИ button) sitting on bare white outside the artwork. */
.np-hband.bg-cover { background-size: cover; }
.np-hwrap { max-width: 1200px; margin: 0 auto; position: relative; }
/* Betheme full-width sections (references red row) span the viewport */
.np-hband.full-width .np-hwrap { max-width: none; }
.np-hwrap:after, .np-hrow:after { content: ''; display: block; clear: both; }

.np-hrow { float: left; position: relative; }
.np-hrow.np-w-one { width: 100%; }
.np-hrow.np-w-one-second { width: 50%; }
.np-hrow.np-w-one-third { width: 33.333%; }
.np-hrow.np-w-two-third { width: 66.666%; }
.np-hrow.np-w-one-fourth { width: 25%; }
.np-hrow.np-w-three-fourth { width: 75%; }
.np-hrow.np-w-one-fifth { width: 20%; }
.np-hrow.np-w-two-fifth { width: 40%; }
.np-hrow.np-w-three-fifth { width: 60%; }
.np-hrow.np-w-four-fifth { width: 80%; }
.np-hrow.np-w-one-sixth { width: 16.666%; }
.np-hrow.np-w-five-sixth { width: 83.333%; }

/* no margin-top here: this sheet loads after the head styles, and the
   theme's custom CSS (e.g. .promo-box { margin-top:20px }) must keep
   winning on top margins like it does on production */
.np-hcol { float: left; margin-left: 1%; margin-right: 1%; margin-bottom: 40px; }
.np-hcol.np-w-one { width: 98%; }
.np-hcol.np-w-one-second { width: 48%; }
.np-hcol.np-w-one-third { width: 31.333%; }
.np-hcol.np-w-two-third { width: 64.666%; }
.np-hcol.np-w-one-fourth { width: 23%; }
.np-hcol.np-w-three-fourth { width: 73%; }
.np-hcol.np-w-one-fifth { width: 18%; }
.np-hcol.np-w-two-fifth { width: 38%; }
.np-hcol.np-w-three-fifth { width: 58%; }
.np-hcol.np-w-four-fifth { width: 78%; }
.np-hcol.np-w-one-sixth { width: 14.666%; }
.np-hcol.np-w-five-sixth { width: 81.333%; }

/* Betheme margin semantics, replicated in cascade order:
   default 40px -> .no-margin section zeroes -> wrap-level column-margin-*
   cascades to its columns -> dividers 0 -> column-level overrides win */
.no-margin .np-hcol { margin-bottom: 0; }
.np-hrow.column-margin-0px .np-hcol { margin-bottom: 0; }
.np-hrow.column-margin-10px .np-hcol { margin-bottom: 10px; }
.np-hrow.column-margin-20px .np-hcol { margin-bottom: 20px; }
.np-hrow.column-margin-30px .np-hcol { margin-bottom: 30px; }
.np-hrow.column-margin-40px .np-hcol { margin-bottom: 40px; }
.np-hcol.column_divider { margin-bottom: 0; }
.np-hcol.column-margin-0px { margin-bottom: 0; }
.np-hcol.column-margin-10px { margin-bottom: 10px; }
.np-hcol.column-margin-20px { margin-bottom: 20px; }
.np-hcol.column-margin-30px { margin-bottom: 30px; }
.np-hcol.column-margin-40px { margin-bottom: 40px; }
.np-hcol.column-margin-50px { margin-bottom: 50px; }

/* За ЕКО 4 overlay text card: the child theme keys this on .mcb-column,
   which the np markup no longer carries.
   On production the card's containing block is the BUTTON column it is
   nested in (top:-165px from there); in the np markup card and button are
   flat siblings of the row, so -165px resolved against the row and the card
   floated 290px too high, over the section above. Anchor it to the row at
   the position production computes: row_top + 125px. */
.np-hcol.about-us-section { position: absolute; top: 125px; z-index: 5; width: 300px; }

/* production's award row (valign-middle): text column vertically centered
   between the two trophy images */
.np-hrow.prize-form-row { display: flex; align-items: center; }
.np-hrow.prize-form-row > .np-hcol { float: none; }

/* Betheme responsive: below 1240 the wrap is simply FLUID 100% (measured on
   production - no fixed steps); below 768 columns stack with 33px gutters */
@media (max-width: 1239px) {
    .np-hwrap { max-width: none; }
}
@media (max-width: 767px) {
    .np-hwrap { max-width: 100%; padding: 0 33px; }
    .np-hrow { width: 100% !important; }
    .np-hcol { width: 100% !important; margin-left: 0; margin-right: 0; }
}