/* Landing-page skin, simple version (2026-10-19): the pages linked from All Landing Pages keep the site's standard head and text.
   Added by includes/landing-skin.php: a body class (this file), pill buttons and a quote band. Here: banner pictures capped in height and framed,
   picture tiles and forms in the site's card style, the quote band (the same as the Digital Printing page). English and Arabic share these rules. */

.lp-wrap { box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.lp-cta a { text-decoration: none !important; }

/* banner pictures: never taller than 300px (they are wide strips with their own printed text, so they are scaled, not cropped) */
body.lp-page #content img[width="1167"], body.lp-page #content img[width="1168"], body.lp-page #content img[width="1169"], body.lp-page #content img[width="1170"],
body.lp-page #content img[width="1171"], body.lp-page #content img[width="1182"], body.lp-page #content img[width="905"] {
    display: block;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 300px;
    margin: 0 auto 18px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(11, 42, 74, .12);
}
body.lp-page #content center > a { display: block; }

/* picture tiles and cards on these pages: the site's card look */
body.lp-page #content .item .thumbnail,
body.lp-page #content .w-block-recent,
body.lp-page #content .section-box-ten {
    border-radius: 18px !important;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}
body.lp-page #content .item .thumbnail { border: 1px solid #e3eaf2 !important; background: #fff !important; box-shadow: 0 6px 18px rgba(11, 42, 74, .06); }
body.lp-page #content .item .thumbnail:hover,
body.lp-page #content .w-block-recent:hover,
body.lp-page #content .section-box-ten:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(11, 42, 74, .15); }
body.lp-page #content .item .thumbnail .caption h3 a { color: #444 !important; }
/* the "Explore More" pill inside these tiles: the outlined pill of the Copy Center cards */
body.lp-page #content .item .thumbnail .pr-btn--more { padding: 4px 4px 4px 18px; border: 1.5px solid #0d4f8b; background: #fff; box-shadow: none; }
html[dir="rtl"] body.lp-page #content .item .thumbnail .pr-btn--more { padding: 4px 18px 4px 4px; }
body.lp-page #content .item .thumbnail .pr-btn--more .pr-btn-label { color: #0d4f8b !important; }
body.lp-page #content .item .thumbnail .pr-btn--more .pr-btn-icon { flex: 0 0 26px; width: 26px; height: 26px; background: #0d4f8b; color: #fff; line-height: 26px; }
body.lp-page #content .item .thumbnail .pr-btn--more:hover { background: linear-gradient(135deg, #0d4f8b 0%, #3dade2 100%); border-color: transparent; }
body.lp-page #content .item .thumbnail .pr-btn--more:hover .pr-btn-label { color: #fff !important; }
body.lp-page #content .item .thumbnail .pr-btn--more:hover .pr-btn-icon { background: #fff; color: #0d4f8b; }
body.lp-page #content .w-block-recent img, body.lp-page #content .image-recent img { width: 100%; height: auto; }

/* forms (event planner checklist, give-away registration) as cards */
body.lp-page #content form { padding: 22px 22px 16px; border: 1px solid #e3eaf2; border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(11, 42, 74, .07); }
body.lp-page #content form .form-control, body.lp-page #content form input[type="text"], body.lp-page #content form input[type="email"], body.lp-page #content form input[type="date"], body.lp-page #content form textarea, body.lp-page #content form select {
    height: auto; min-height: 42px; padding: 9px 14px; border: 1px solid #cfd8e3; border-radius: 12px; background: #fbfdff; box-shadow: none;
}
body.lp-page #content form .form-control:focus, body.lp-page #content form input:focus, body.lp-page #content form textarea:focus { border-color: #3dade2; box-shadow: 0 0 0 4px rgba(61, 173, 226, .2); outline: 0; }
body.lp-page #content form .btn, body.lp-page #content form button { border-radius: 999px; padding: 8px 22px; font-weight: 700; }
body.lp-page #content .text-center > a.pr-btn, body.lp-page #content center > a.pr-btn { margin: 8px 0; }

/* ======================= QUOTE BAND ======================= */
.lp-cta { margin: 36px 0 0; padding: 0 0 8px; }
.lp-cta-in { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; overflow: hidden; padding: 30px 36px; border-radius: 20px; background: #0b2a4a; isolation: isolate; }
.lp-cta-in::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(../../../images/pages/digital-printing/digital-printing-cta.webp) right center / cover no-repeat; }
.lp-cta-in::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0b2a4a 0%, rgba(11, 42, 74, .94) 38%, rgba(11, 42, 74, .55) 62%, rgba(11, 42, 74, 0) 100%); }
html[dir="rtl"] .lp-cta-in::before { transform: scaleX(-1); }
html[dir="rtl"] .lp-cta-in::after { background: linear-gradient(270deg, #0b2a4a 0%, rgba(11, 42, 74, .94) 38%, rgba(11, 42, 74, .55) 62%, rgba(11, 42, 74, 0) 100%); }
.lp-cta .lp-cta-title { margin: 0 0 6px; color: #fff; font-size: 24px; font-weight: 700; line-height: 1.25; }
.lp-cta p { max-width: 620px; margin: 0; color: #d6e5f3; font-size: 15px; line-height: 1.7; }
.pr-btn.lp-btn { min-width: 0; gap: 16px; padding: 7px 7px 7px 26px; font-size: 15px; }
html[dir="rtl"] .pr-btn.lp-btn { padding: 7px 26px 7px 7px; }
.pr-btn.lp-btn .pr-btn-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 13px; line-height: 34px; }

@media (max-width: 767px) {
    .lp-wrap { padding: 0 14px; }
    body.lp-page #content img[width="1167"], body.lp-page #content img[width="1168"], body.lp-page #content img[width="1169"], body.lp-page #content img[width="1170"],
    body.lp-page #content img[width="1171"], body.lp-page #content img[width="1182"], body.lp-page #content img[width="905"] { width: 100% !important; max-height: none; border-radius: 12px; }
    .lp-cta-in { padding: 24px 18px; border-radius: 16px; }
    .lp-cta-in::before { background-image: url(../../../images/pages/digital-printing/digital-printing-cta-768.webp); }
    .lp-cta-in::after, html[dir="rtl"] .lp-cta-in::after { background: linear-gradient(180deg, rgba(11, 42, 74, .93) 0%, rgba(11, 42, 74, .8) 100%); }
    .lp-cta .lp-cta-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    body.lp-page #content .item .thumbnail, body.lp-page #content .w-block-recent { transition: none; }
}

/* ======================= BANNER BAND (the first wide picture of a page) =======================
   As wide as the text, 240px high: the picture keeps its own shape (nothing is cropped), centred on a soft blurred copy of itself. */
body.lp-page #content .lp-banner { position: relative; display: block; height: 240px; margin: 0 0 22px; overflow: hidden; border-radius: 18px; background: #0b2a4a; box-shadow: 0 10px 26px rgba(11, 42, 74, .14); isolation: isolate; }
body.lp-page #content .lp-banner::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: var(--bg) center / cover no-repeat; filter: blur(24px) brightness(.9); transform: scale(1.1); }
body.lp-page #content .lp-banner > a { display: block; height: 100%; }
body.lp-page #content .lp-banner img { display: block; width: auto !important; max-width: 100%; height: 100% !important; max-height: none; margin: 0 auto; border-radius: 0; box-shadow: none; object-fit: contain; }
@media (max-width: 767px) {
    body.lp-page #content .lp-banner { height: auto; border-radius: 12px; }
    body.lp-page #content .lp-banner::before { display: none; }
    body.lp-page #content .lp-banner img { width: 100% !important; height: auto !important; }
}

/* ======================= TILE GRID (the site's own card, same as the other service pages) =======================
   Every card of a row has the same height: the picture, the centred title (two lines reserved) and the pill at the bottom. */
.lp-tiles { padding-top: 6px; }
.lp-tiles .products-list .product-layout { display: flex; }
.lp-tiles .product-item-container { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; }
.lp-tiles .product-item-container > .left-block { display: flex; flex-direction: column; flex: 1 1 auto; }
.lp-tiles .product-image-container img { width: 100%; height: auto; }
.lp-tiles .product-item-container .right-block { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 12px 18px; }
.lp-tiles .product-item-container .caption { flex: 1 1 auto; }
.lp-tiles .product-item-container .caption h3 { display: flex; align-items: center; justify-content: center; min-height: 2.9em; margin: 0; text-align: center; }
.lp-tiles .product-item-container .button-group { margin-top: auto; padding-top: 16px; text-align: center; }

/* the quote band is as wide as the page content (the same edges as the heading and the cards) */
.lp-cta { width: 97%; margin-left: auto; margin-right: auto; }
.lp-cta .lp-wrap { max-width: none; }

/* the tile grid starts and ends on the same edges as the heading and the text */
.lp-tiles { padding-left: 14px; padding-right: 14px; }

/* project-picture grids (signage industries): three equal columns over the full content width, same edges as the text */
/* pages with a fluid container (featured services, school safety list): no extra side padding, so the cards start where the text starts */
body.lp-page #content .container-fluid { padding-left: 0; padding-right: 0; }
body.lp-page #content :is(.row, center, div):has(> .block-recent) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-left: 0; margin-right: 0; }
body.lp-page #content :is(.row, center, div):has(> .block-recent)::before, body.lp-page #content :is(.row, center, div):has(> .block-recent)::after { display: none; }
body.lp-page #content :is(.row, center, div):has(> .block-recent) > .block-recent { float: none; width: auto; padding: 0 !important; }
body.lp-page #content .block-recent .w-block-recent { width: 100%; max-width: none; margin: 0; }
body.lp-page #content .block-recent .w-block-recent img { width: 100%; height: auto; }
@media (max-width: 991px) { body.lp-page #content :is(.row, center, div):has(> .block-recent) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { body.lp-page #content :is(.row, center, div):has(> .block-recent) { grid-template-columns: minmax(0, 1fr); } }
body.lp-page #content .tab-content:not(#second .tab-content) { padding-left: 0; padding-right: 0; }
body.lp-page #content #products.row.list-group:not(#second #products) { margin-left: -15px !important; margin-right: -15px !important; }

/* ======================= OLD PICTURE TILES (.item > .thumbnail) = the same card as everywhere else =======================
   Every card of a row has the same height: square picture, centred title (two lines of room), pill at the bottom. */
body.lp-page #content :is(.row, div):has(> .item > .thumbnail) { display: flex; flex-wrap: wrap; }
body.lp-page #content :is(.row, div):has(> .item > .thumbnail)::before,
body.lp-page #content :is(.row, div):has(> .item > .thumbnail)::after { display: none; }
body.lp-page #content .item:has(> .thumbnail) { display: flex; float: none; min-height: 0 !important; margin-bottom: 20px; }
body.lp-page #content .item > .thumbnail { display: flex; flex-direction: column; flex: 1 1 auto; width: 100% !important; min-height: 0 !important; height: auto; margin: 0; }
body.lp-page #content .item > .thumbnail > a { display: block; }
body.lp-page #content .item > .thumbnail > a > img { display: block; width: 100% !important; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
body.lp-page #content .item > .thumbnail > .caption { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 12px 18px; }
body.lp-page #content .item > .thumbnail > .caption > .caption { flex: 1 1 auto; padding: 0; }
body.lp-page #content .item > .thumbnail > .caption h3 { display: flex; align-items: center; justify-content: center; min-height: 2.9em; margin: 0; text-align: center; }
body.lp-page #content .item > .thumbnail > .caption > .row { margin: 12px 0 0; }
body.lp-page #content .item > .thumbnail > .caption > .row > [class*="col-"] { padding: 0; }
body.lp-page #content .item > .thumbnail .pr-btn { display: inline-flex !important; align-items: center; justify-content: space-between; gap: 12px; min-width: 176px; }
body.lp-page #content .item > .thumbnail .pr-btn .pr-btn-label { flex: 1 1 auto; text-align: start; }
body.lp-page #content .item > .thumbnail .pr-btn--quote { padding: 4px 4px 4px 18px; border: 1.5px solid #a81220; background: #fff; box-shadow: none; }
html[dir="rtl"] body.lp-page #content .item > .thumbnail .pr-btn--quote { padding: 4px 18px 4px 4px; }
body.lp-page #content .item > .thumbnail .pr-btn--quote .pr-btn-label { color: #a81220 !important; }
body.lp-page #content .item > .thumbnail .pr-btn--quote .pr-btn-icon { flex: 0 0 26px; width: 26px; height: 26px; background: #a81220; color: #fff; line-height: 26px; }
body.lp-page #content .item > .thumbnail .pr-btn--quote:hover { background: linear-gradient(135deg, #e0313f 0%, #a81220 100%); border-color: transparent; }
body.lp-page #content .item > .thumbnail .pr-btn--quote:hover .pr-btn-label { color: #fff !important; }
body.lp-page #content .item > .thumbnail .pr-btn--quote:hover .pr-btn-icon { background: #fff; color: #a81220; }
/* fixed tile heights written in some pages (inline style or .fixminheight) cut the pill off: the card is as tall as its content */
body.lp-page #content .item:has(> .thumbnail),
body.lp-page #content .item > .thumbnail,
body.lp-page #content .item > .thumbnail > .caption { min-height: 0 !important; max-height: none !important; height: auto !important; }
body.lp-page #content .item:has(> .thumbnail) { align-items: stretch; }

/* tab chips start below the text lists above them (the lists are floated; a flex list would otherwise be squeezed to nothing beside them) */
body.lp-page #content .block-title-w { clear: both; }
/* step wizard (giveaway checklist): its form is not a card, step links are not underlined */
body.lp-page #content form:has(#smartwizard) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.lp-page #content #smartwizard a, body.lp-page #content #smartwizard a:hover { text-decoration: none; }

/* a lone "Explore More" pill under the text (event pages): normal pill size, not the full width of the page */
body.lp-page #content .item > a.pr-btn,
body.lp-page #content .item > center > a.pr-btn { display: inline-flex !important; width: auto !important; min-width: 176px; max-width: 100%; margin: 8px 0 14px; align-self: flex-start; }

/* tile grid that has no flex wrapper of its own (breast cancer page): tiles flow in rows, every card as tall as the tallest of its row */
body.lp-page #content .container.products-category { display: flex; flex-wrap: wrap; width: calc(100% + 16px); max-width: none; padding-left: 0; padding-right: 0; margin-left: -8px; margin-right: -8px; }
body.lp-page #content .container.products-category::before,
body.lp-page #content .container.products-category::after { display: none; }
body.lp-page #content .container.products-category > .product-layout { display: flex; float: none; }
body.lp-page #content .container.products-category .product-thumb { display: flex; flex-direction: column; width: 100%; }
body.lp-page #content .container.products-category .product-thumb > .image img { display: block; width: 100%; height: auto; }
body.lp-page #content .container.products-category .product-thumb .caption { flex: 1 1 auto; }

/* tile cards: the "Add to quote basket" chip sits under the "Explore More" pill, same spacing as on the other service lists */
.lp-tiles .product-item-container .right-block > .pr-add-wrap { margin-top: 10px; padding-bottom: 0; text-align: center; }