/*
 * kkbc-hero-tablet-1.css - what is left after the first deploy of stage 5 (2026-10-13):
 *   A. /industry/ at 768 px: layout shift 0.13 to 0.15 on all 7 sites.
 *   B. Hero heading contrast on /marketing-objective/ (768 and 390 px) and /about/company-values/ (768 px).
 * Loaded after every other stylesheet (inc/kkbc-hero-tablet.php, priority 22: after kkbc-hero-1 and kkbc-header-1 at 20
 * and kkbc-overflow-1 at 21). A later change of this file gets a new file name (kkbc-hero-tablet-2.css), because the CDN
 * keeps a file under its old name. No !important is used in this file.
 */

/* ---- A. /industry/ at 768 px: reserve the height of the slider box ----------------------------------------
   Measured on the live site (layout-shift entries and a frame-by-frame log of the boxes, 768 x 1024):
     before the slider script runs:  .industry_right is 80 px high (only its padding 40 + 40: style.css:642), because
        the owl-carousel inside it is display:none until the script adds the class "owl-loaded";
     after the script (about 700 ms):  .industry_right is 570 to 627 px high (7 sites: 603 kkbc.co, 570 kkbc.co.jp,
        627 kkbcagency.de, 570 kkbc.co.kr, 570 kkbc.com.tw, 582 he.kkbc.co.il, 594 kkbcthailand.com).
   The left box (.industry_left) is centred in the row (responsive.css:782 align-items:center), so it moved down 158 px,
   and every section below moved down 316 px: layout shift 0.148 (kkbc.co).
   The rule keeps the space from the first paint. 600 px lies in the middle of the 7 measured heights, so the remaining shift
   is at most 33 px (about 0.016). There is no old min-height to beat: style.css:642 and responsive.css:787 set width only.
   The media query is the one of responsive.css:683, the block that holds responsive.css:782 (551 to 768 px). Below
   551 px the row is a column (responsive.css:1407) and the shift measured 0 at 390 px; above 768 px the layout is
   different (responsive.css:267) and was not measured - see "left for the follow-up issue" in the pull request. */
@media screen and (max-width: 768px) and (min-width: 551px) {
  .industry_area .industry_right {
    min-height: 600px;
  }
}

/* ---- B. Dark layer of 45% under the hero text on two page templates -----------------------------------------
   Why the layer of kkbc-header-1.css did not reach these pages: template/marketing.php:56 and template/what-we-stand.php:61
   each print a <style> in the body with ".privacy_breadcum:after{ content:none }". That switches the layer off for the whole
   page; it comes after the stylesheets in the head, so the equal selector of kkbc-header-1.css could not win.
   (Measured on the live site: the computed ::after of .privacy_breadcum has content "none" on both pages.)
   Wider than 1024 px the <img> fills the box and the two pages pass; up to 1024 px the picture is the CSS background
   (responsive.css:111, :112) and the white heading sat on the bare picture: 2.5 to 2.6 to 1 and 1.55 to 1.
   The two body classes come from WordPress for the page template file (template/marketing.php and template/what-we-stand.php);
   responsive.css:1654 already uses .page-template-erp in the same way. The selector has one more class than the inline
   rule, so it wins. Only "content" is set: the position, the size and the gradient (45% black at the top, as in
   kkbc-header-1.css, to the old dark green at 75.85%) come from style.css:199 and kkbc-header-1.css. The text box
   (figcaption, z-index 1: style.css:202) stays above the layer. The look wider than 1024 px does not change. */
@media screen and (max-width: 1024px) {
  .page-template-marketing .privacy_breadcum:after,
  .page-template-what-we-stand .privacy_breadcum:after {
    content: '';
  }
}