.dp_1_bold,.dp_2_bold,.dp_3_bold,.dp_4_bold,.xl_1_bold,.xl_2_bold,.xl_3_bold,.h1_bold,.h2_bold,.h3_bold,.h4_bold,.h5_bold,.h6_bold,.h4_bold_500,.news_card_main_card_heading,.font_variation_settings,.static-page-title{font-variation-settings:"opsz" 50,"slnt" 0,"wdth" 25,"GRAD" 0,"XOPQ" 96,"XTRA" 468,"YOPQ" 79,"YTAS" 750,"YTDE" -203,"YTFI" 738,"YTLC" 514,"YTUC" 712 !important;}.h4_bold_500{font-family:'Roboto Flex';font-weight:500;font-size:20px;line-height:24px;}@media (max-width:1024px){.ibl-header .ibl-header__drawer{left:auto;width:100%;right:-100%;transform:none;transition:right 0.25s;}.ibl-header .ibl-header__drawer--open{right:0;}.ibl-header .ibl-header__drawer-top{border-bottom:none !important;}}body[class~="photos"] .ibl-header .ibl-header__nav-link[href^="/photos"],body[class*=" photos/"] .ibl-header .ibl-header__nav-link[href^="/photos"]{color:#ff4100;box-shadow:inset 0 -4px 0 #db3700;}body[class~="photos"] .ibl-header .ibl-header__drawer-link[href^="/photos"],body[class*=" photos/"] .ibl-header .ibl-header__drawer-link[href^="/photos"]{color:#ff4100;box-shadow:inset 4px 0 0 #db3700;padding-left:12px;}body[class~="videos"] .ibl-header .ibl-header__nav-link[href^="/videos"],body[class*=" videos/"] .ibl-header .ibl-header__nav-link[href^="/videos"]{color:#ff4100;box-shadow:inset 0 -4px 0 #db3700;}body[class~="videos"] .ibl-header .ibl-header__drawer-link[href^="/videos"],body[class*=" videos/"] .ibl-header .ibl-header__drawer-link[href^="/videos"]{color:#ff4100;box-shadow:inset 4px 0 0 #db3700;padding-left:12px;}body[class~="news"] .ibl-header .ibl-header__nav-link[href^="/news"],body[class*=" news/"] .ibl-header .ibl-header__nav-link[href^="/news"]{color:#ff4100;box-shadow:inset 0 -4px 0 #db3700;}body[class~="news"] .ibl-header .ibl-header__drawer-link[href^="/news"],body[class*=" news/"] .ibl-header .ibl-header__drawer-link[href^="/news"]{color:#ff4100;box-shadow:inset 4px 0 0 #db3700;padding-left:12px;}body[class~="home"] .ibl-header .ibl-header__nav-link[href="/"],body[class~="home"] .ibl-header .ibl-header__nav-link[href^="/?"]{color:#ff4100;box-shadow:inset 0 -4px 0 #db3700;}body[class~="home"] .ibl-header .ibl-header__drawer-link[href="/"],body[class~="home"] .ibl-header .ibl-header__drawer-link[href^="/?"]{color:#ff4100;box-shadow:inset 4px 0 0 #db3700;padding-left:12px;}.ibl-header .ibl-header__drawer-link--active{color:hsl(var(--text_main_prim)) !important;}.static-page-title{font:var(--dp_3_bold);color:hsl(var(--text_invert_high));text-align:left;text-transform:uppercase;max-width:55%;}.ibl-header__offset{height:70px;}.ibl-header__bar{position:fixed;top:0;left:0;z-index:50;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;height:70px;padding:0 98px;background:#000000;border-bottom:1px solid #333333;}.ibl-header__left{display:flex;align-items:center;gap:28px;min-width:0;height:100%;}.ibl-header__logo{display:flex;flex-shrink:0;width:52px;height:52px;}.ibl-header__logo-img{width:52px;height:52px;object-fit:contain;}.ibl-header__logo-fallback{display:flex;align-items:center;justify-content:center;width:52px;height:52px;color:#ffffff;font-size:0.75rem;font-weight:700;letter-spacing:0.04em;}.ibl-header__nav{display:flex;align-items:center;gap:16px;height:100%;}.ibl-header .ibl-header__nav-link{display:inline-flex;align-items:center;justify-content:center;height:70px;padding:0 8px;border:0;border-radius:0;background:transparent;font:var(--body_sm_bold);color:hsl(var(--text_invert_medium));text-transform:uppercase;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-decoration:none;white-space:nowrap;box-shadow:none;}.ibl-header .ibl-header__nav-link:hover,.ibl-header .ibl-header__nav-link--active{color:#ff4100;}.ibl-header .ibl-header__nav-link--active{box-shadow:inset 0 -4px 0 #db3700;}.ibl-header__download{display:flex;flex-shrink:0;align-items:center;gap:16px;}.ibl-header__download-label{color:#ffffff;font-family:var(--body_xs_bold-font-family,"Noto Sans"),sans-serif;font-size:var(--body_xs_bold-font-size,0.625rem);font-weight:var(--body_xs_bold-font-weight,700);line-height:var(--body_xs_bold-line-height,1rem);letter-spacing:var(--body_xs_bold-letter-spacing,0);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-decoration:none;text-transform:uppercase;white-space:nowrap;}.ibl-header__stores{display:flex;align-items:center;gap:15px;}.ibl-header__store{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:#ffffff;text-decoration:none;}.ibl-header__icon{color:inherit;font-size:16px;line-height:1;}.ibl-header__menu-btn{display:none;flex-direction:column;align-items:flex-end;justify-content:space-between;width:24px;height:16px;padding:0;border:0;background:transparent;cursor:pointer;}.ibl-header__menu-line{display:block;width:11px;height:1.5px;background:#ffffff;}.ibl-header__menu-line--wide{width:24px;}.ibl-header__drawer{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;gap:0;padding:0;overflow-y:auto;background:#1a1a1a !important;color:#ffffff;visibility:hidden;transform:translateX(100%);transition:transform 0.25s ease;}.ibl-header__drawer--open{visibility:visible;transform:none;padding-left:0px !important;padding-bottom:0px !important;padding-right:0px !important;padding-top:0px !important;height:calc(100% - 70px) !important;margin-top:auto !important;}.ibl-header__drawer.ibl-header__drawer--open .ibl-header__drawer-cta .icon_ibl-apple-store{order:2;}.ibl-header:has(.ibl-header__drawer--open) .ibl-header__bar{z-index:-1;}.ibl-header__drawer-nav:empty,.ibl-header__drawer-ctas:empty,.ibl-header__drawer-socials:empty{display:none;}.ibl-header__drawer-top{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;box-sizing:border-box;height:60px;padding:0 20px;background:#000000;border-bottom:0.5px solid #333333;}.ibl-header__close{display:inline-flex;align-items:center;justify-content:flex-end;box-sizing:border-box;gap:0;height:30px;padding:0 0 0 20px;border:0;border-left:0.5px solid #333333;background:transparent;color:#ffffff;font-size:0px !important;line-height:0;cursor:pointer;}.ibl-header__font-icon--close{display:inline-block;position:relative;flex-shrink:0;width:24px;height:24px;}.ibl-header__font-icon--close::before,.ibl-header__font-icon--close::after{content:"";position:absolute;top:11px;left:4.5px;width:15px;height:1.5px;background:#ff4100 !important;}.ibl-header__font-icon--close::before{transform:rotate(45deg);}.ibl-header__font-icon--close::after{transform:rotate(-45deg);}.ibl-header__drawer-nav{display:flex;flex-direction:column;gap:12px;padding:16px 40px 0;}.ibl-header .ibl-header__drawer-link{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;width:100%;min-height:44px;padding:12px 16px;border:0;border-radius:4px;background:transparent;color:#ffffff;font-family:var(--body_md_bold-font-family,"Noto Sans"),sans-serif;font-size:var(--body_md_bold-font-size,1rem);font-weight:var(--body_md_bold-font-weight,700);line-height:var(--body_md_bold-line-height,1.5rem);letter-spacing:var(--body_md_bold-letter-spacing,0);text-decoration:none;text-transform:uppercase;box-shadow:none;}.ibl-header .ibl-header__drawer-link:hover,.ibl-header .ibl-header__drawer-link--active{color:#ff4100;}.ibl-header__drawer-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:auto;padding:20px;background:#002dbc;}.ibl-header__drawer-socials{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:20px;}.ibl-header__drawer-cta{display:inline-flex;align-items:center;gap:20px;color:#ffffff;font-family:var(--body_md_bold-font-family,"Noto Sans"),sans-serif;font-size:var(--body_md_bold-font-size,1rem);font-weight:var(--body_md_bold-font-weight,700);line-height:var(--body_md_bold-line-height,1.5rem);letter-spacing:var(--body_md_bold-letter-spacing,0);text-decoration:none;text-transform:uppercase;}.ibl-header__drawer-social{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:#ffffff;text-decoration:none;}@media (max-width:1279px){.ibl-header__bar{padding:0 32px;}}@media (max-width:1024px){.ibl-header__bar{height:60px;padding:0 20px 0 16px;}.ibl-header__offset{height:60px;}.ibl-header__logo,.ibl-header__logo-img{width:44px;height:44px;}.ibl-header__nav,.ibl-header__download{display:none;}.ibl-header__menu-btn{display:flex;box-sizing:content-box;height:30px;padding-left:20px;border-left:0.5px solid #333333;align-items:flex-end;justify-content:center;gap:5px;}.ibl-header__bar{z-index:70;}.ibl-header__drawer{top:60px;}.ibl-header__drawer-top{position:fixed;top:0;right:0;z-index:80;height:60px;padding:0 20px;background:#000000;border-bottom:0.5px solid #333333;}}.ibl-footer{width:100%;}.ibl-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px;margin:0 auto;}.ibl-footer__social{box-sizing:border-box;width:100%;background:#101010;border-top:0.5px solid hsl(var(--border_invert_disable));padding:var(--spacing_3) var(--container-offset,98px);}.ibl-footer__socials{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}.ibl-footer__social-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid hsl(var(--text_invert_high));border-radius:50%;background:transparent;color:hsl(var(--text_invert_high));text-decoration:none;transition:opacity 0.2s ease;}.ibl-footer__social-link:hover{opacity:0.85;}.ibl-footer__social-icon{font-size:16px;line-height:1;}.ibl-footer__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}.ibl-footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0;}.ibl-footer__legal-sep{flex-shrink:0;align-self:center;width:0;height:12px;margin:0 12px;border-left:0.5px solid #333333;}.ibl-footer__legal-link{color:hsl(var(--text_invert_medium));font:var(--body_xs_regular);text-decoration:none;white-space:nowrap;text-transform:capitalize;}.ibl-footer__legal-link:hover{color:hsl(var(--text_invert_high));text-decoration:underline;}.ibl-footer__powered{box-sizing:border-box;width:100%;background:#002DBC !important;padding:16px 98px;}.ibl-footer__copyright{margin:0;color:#ffffff;font-family:var(--body_xs_regular-font-family,"Noto Sans"),sans-serif;font-size:var(--body_xs_regular-font-size,0.625rem);font-weight:var(--body_xs_regular-font-weight,400);line-height:var(--body_xs_regular-line-height,0.875rem);}.ibl-footer__powered-by{display:inline-flex;align-items:center;gap:8px;color:#ffffff;text-decoration:none;}.ibl-footer__powered-by:hover{opacity:0.9;}.ibl-footer__powered-label{font-family:var(--body_xs_regular-font-family,"Noto Sans"),sans-serif;font-size:var(--body_xs_regular-font-size,0.625rem);font-weight:var(--body_xs_regular-font-weight,400);line-height:var(--body_xs_regular-line-height,0.875rem);white-space:nowrap;}.ibl-footer__powered-logo{display:block;height:20px;width:auto;}.ibl-footer__si-logo{font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;font-style:italic;font-weight:700;line-height:1;letter-spacing:-0.02em;}@media (max-width:1024px){.ibl-footer__social,.ibl-footer__powered{padding-inline:var(--spacing_4,24px);}.ibl-footer__inner{flex-direction:column;align-items:center;gap:20px;}.ibl-footer__socials{justify-content:center;width:100%;}.ibl-footer__legal{justify-content:center;}}.icon_ibl_youtube:before{margin-left:0px;}@media (max-width:640px){.ibl-footer__social{padding:32px var(--spacing_4,16px);}.ibl-footer__powered{padding:var(--spacing_4,16px);}.ibl-footer__inner{gap:24px;}.ibl-footer__legal{justify-content:center;width:100%;}.ibl-footer__legal-sep{margin:0 8px;}.ibl-footer__legal-link{font-size:0.625rem;}.ibl-footer__powered .ibl-footer__inner{flex-direction:column;align-items:center;gap:8px;text-align:center;}}.ibl-sponsors{--sponsor-bg:#ffffff;--sponsor-ink:#111111;--sponsor-gap:8px;box-sizing:border-box;width:100%;max-width:100%;min-width:0;background-color:var(--sponsor-bg);padding-block:72px 80px;}.ibl-sponsors .sponsors-title{margin:0 0 48px;color:var(--sponsor-ink);font-family:"Roboto Flex",Roboto,sans-serif;font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:0.01em;text-align:center;text-transform:uppercase;}.ibl-sponsors .sponsor-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sponsor-gap);width:100%;max-width:100%;min-width:0;}.ibl-sponsors .sponsor-card{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;padding:0;background:transparent;overflow:hidden;}.ibl-sponsors .sponsor-label{display:none;}.ibl-sponsors .sponsor-card .sponsor-logo,.ibl-sponsors .sponsor-card picture,.ibl-sponsors .sponsor-card img{display:block;width:100%;height:109px;max-height:109px;object-fit:contain;background:transparent;border-radius:0;}@media (max-width:767px){.ibl-sponsors{--sponsor-gap:8px;padding-block:48px 56px;}.ibl-sponsors .sponsors-title{margin-bottom:36px;}.ibl-sponsors .sponsor-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ibl-sponsors .sponsor-grid > .sponsor-card:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - var(--sponsor-gap)) / 2);max-width:calc((100% - var(--sponsor-gap)) / 2);}}.ibl-sponsors .sponsors-title{font-variation-settings:"opsz" 50,"GRAD" 0,"wdth" 25 !important;letter-spacing:0px !important;font-weight:500 !important;}#ibl-sponsors{display:none !important;}.ibl-header__stores{display:none !important;}.ibl-header__drawer-socials{display:none !important;}.ibl-footer__legal-link[href="/contact"]{display:none !important;}.ibl-footer__legal a[href="/contact"],.ibl-footer__legal a[href="/contact"] + .ibl-footer__legal-sep{display:none !important;}.ibl-footer__legal{display:flex;align-items:center;gap:12px;}.ibl-footer__legal-sep{display:block;width:1px;height:14px;background-color:currentColor;flex-shrink:0;}.section-header .view-more-btn{transition:gap 0.4s ease !important;}.section-header .view-more-btn:hover{gap:16px !important;}
/*Page Header Css start here*/ .news-listing-page::before {
  content: "";
  position: absolute;
  /* top: 0;
  */ left: 50%;
  width: 100vw;
  height: 240px;
  transform: translateX(-50%);
  background: url(/static-assets/images/misc/news-header.png?w=1200);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 0;
  /* background: hsl(var(--background_invert_surface));
  */
}
.news-listing-page .page-heading-wrappr {
  padding-inline: var(--container-offset) !important;
}
@media (max-width: 767px) {
  .news-listing-page::before {
    height: 140px;
    background: url(/static-assets/images/misc/news-header-mobile.png);
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .news-listing-page::before {
      height: 140px;
    }
  }
}
/*Page Header Css End here*/ /*Load More Btn css start here*/ body.photos #main-content .template-footer .load-more-btn:hover {
  background: hsl(var(--core_neu_950));
  color: hsl(var(--core_neu_00)) !important;
}
body.photos #main-content .template-footer .load-more-btn:focus-visible {
  outline: 2px solid hsl(var(--text_main_prim));
  outline-offset: 3px;
}
body.photos #main-content .template-footer .load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/*Load more btn css end here*/ /* ===== Tab Menu – full-width underline tabs ===== */ .tab-menu .template-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tab-menu [role="tablist"] {
  display: flex !important;
  justify-content: stretch !important;
  width: 100%;
  background: #111111;
  border-bottom: 2px solid #2a2a2a;
  overflow: hidden;
}
/* each tab takes equal width */ .tab-menu [role="tablist"] > button[role="tab"] {
  flex: 1 1 0;
  position: relative;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
/* tab label */ .tab-menu [role="tablist"] > button[role="tab"] > span {
  width: 100% !important;
  padding: 14px 16px !important;
  background: transparent !important;
  color: #b3b3b3 !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 0;
  transition: color 0.3s ease;
}
.tab-menu [role="tablist"] > button[role="tab"]:hover > span {
  color: #ffffff !important;
}
/* active tab */ .tab-menu [role="tablist"] > button[role="tab"][data-state="active"] > span {
  color: hsl(var(--core_prim_700)) !important;
  /* orange */ font-weight: 700;
}
/* active underline */ .tab-menu [role="tablist"] > button[role="tab"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: hsl(var(--core_prim_700));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.tab-menu [role="tablist"] > button[role="tab"][data-state="active"]::after {
  transform: scaleX(1);
}
@media (max-width: 767px) {
  .tab-menu [role="tablist"] > button[role="tab"] > span {
    padding: 12px 8px !important;
    font-size: 12px;
  }
}
/* ===================================================================== IBL – News Listing page (/news/) Source: Figma IBL-2026 · D_News Listing (19477:28175) / M_News (19518:30475) Scope: body.news → affects only the News page ===================================================================== */ /* --------------------------------------------------------------------- 1. Design tokens (Figma variables → CSS variables) --------------------------------------------------------------------- */ body.news {
  /* Typeface (reuses site tokens, Figma fallbacks) */ --news-ff-heading: var(--h2_bold-font-family, "Roboto Flex"), "Roboto Condensed", sans-serif;
  --news-ff-body: var(--body_md_regular-font-family, "Roboto"), sans-serif;
  /* dp_3 – page title */ --news-fs-dp_3: 80px;
  --news-lh-dp_3: 80px;
  --news-fw-dp_3: 550;
  /* h2 – large card title */ --news-fs-h2: var(--h2-font-size, var(--h2_bold-font-size));
  --news-lh-h2: var(--h2-line-height, var(--h2_bold-line-height));
  --news-fw-h2: var(--h2-font-weight, var(--h2_bold-font-weight));
  /* h4 – small card title */ --news-fs-h4: var(--h4_bold-font-size);
  --news-lh-h4: var(--h4_bold-line-height);
  --news-fw-h4: var(--h2-font-weight, var(--h2_bold-font-weight));
  /* body_md – description / tabs */ --news-fs-body_md: var(--body_md_regular-font-size);
  --news-lh-body_md: var(--body_md_regular-line-height);
  /* body_sm – date / read time */ --news-fs-body_sm: var(--body_sm_regular-font-size);
  --news-lh-body_sm: var(--body_sm_regular-line-height);
  /* weights */ --news-fw-regular: var(--body_md_regular-font-weight);
  --news-fw-bold: 700;
  --news-ls-none: var(--body_md_regular-letter-spacing);
  /* Colours */ --news-bg-page: #f5f5f5;
  /* background/main/container */ --news-bg-card: #ffffff;
  /* background/main/surface */ --news-bg-dark: #101010;
  /* background/invert/surface */ --news-text-high: #1a1a1a;
  /* text/main/high */ --news-text-medium: #333333;
  /* text/main/medium */ --news-text-low: #454545;
  /* text/main/low */ --news-text-prim: #ff4100;
  /* text/main/prim */ --news-text-inv-high: #ffffff;
  /* text/invert/high */ --news-text-inv-medium: #d9d9d9;
  /* text/invert/medium */ --news-text-inv-low: #9d9d9d;
  /* text/invert/low */ --news-border-inv: #555555;
  /* border/invert/default */ --news-border-inv-disable: #333333;
  /* border/invert/disable */ --news-border-prim: #ff4100;
  /* color/prim1/600k */ --news-divider: #c4c4c4;
  /* border/main/default */ /* Layout */ --news-container: 1500px;
  --news-gutter: 24px;
  --news-gap: 16px;
  --news-radius: 8px;
  /* md */ --news-hero-height: 200px;
  /* 250px header − 53px tab bar */ --news-hero-title-top: 71px;
  /* Figma cap-top 80 minus half-leading */ --news-tab-height: 50px;
  /* Figma 50 – 3px underline overlaps */ /* Card spacing */ --news-lg-pad: 24px;
  /* large card body padding */ --news-lg-gap-text: 16px;
  /* title → description */ --news-lg-gap-date: 32px;
  /* text → date */ --news-sm-pad-y: 16px;
  --news-sm-pad-x: 12px;
  --news-sm-gap-date: 20px;
  --news-condensed: "opsz" 50, "slnt" 0, "wdth" 25, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
}
body.news #main-content {
  background: var(--news-bg-page);
}
/* --------------------------------------------------------------------- 2. Hero header – "NEWS" (built on the tab-menu wrapper) --------------------------------------------------------------------- */ body.news .tab-menu > .template-body {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}
/* Dark band + page title */ /* body.news .tab-menu > .template-body::before {
  content: "NEWS";
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  height: var(--news-hero-height);
  padding-top: var(--news-hero-title-top);
  padding-inline: max(var(--news-gutter), calc((100% - var(--news-container)) / 2));
  background: radial-gradient(120% 140% at 85% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 60%), var(--news-bg-dark);
  color: var(--news-text-inv-high);
  font-family: var(--dp_3_bold-font-family, "Roboto Flex"), sans-serif;
  font-size: var(--news-fs-dp_3);
  line-height: var(--news-lh-dp_3);
  font-weight: var(--news-fw-dp_3);
  letter-spacing: var(--news-ls-none);
  font-variation-settings: var(--news-condensed);
  text-transform: uppercase;
  text-align: left;
}
*/ /* Large faded watermark text behind the title */ /* body.news .tab-menu > .template-body::after {
  content: "NEWS";
  position: absolute;
  top: -45px;
  left: 30px;
  z-index: 1;
  pointer-events: none;
  font-family: var(--dp_3_bold-font-family, "Roboto Flex"), sans-serif;
  font-size: 250px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 4px;
  font-variation-settings: var(--news-condensed);
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.04;
}
*/ /* --------------------------------------------------------------------- 3. Tabs – TOP STORIES / LATEST --------------------------------------------------------------------- */ body.news .tab-menu [role="tablist"] {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--news-bg-dark);
  border-top: 0.5px solid var(--news-border-inv-disable);
  overflow: hidden !important;
}
body.news .tab-menu [role="tablist"] > button[role="tab"] {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--news-tab-height);
  margin: 0;
  padding: 0 16px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--news-border-inv);
  cursor: pointer;
  transition: border-color 0.3s ease;
}
body.news .tab-menu [role="tablist"] > button[role="tab"][data-state="active"] {
  border-bottom-color: var(--news-border-prim);
}
body.news .tab-menu [role="tablist"] > button[role="tab"] > span {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--news-ff-body) !important;
  font-size: var(--news-fs-body_md) !important;
  line-height: var(--news-lh-body_md) !important;
  font-weight: var(--news-fw-regular) !important;
  letter-spacing: var(--news-ls-none) !important;
  text-transform: uppercase;
  text-align: center;
  color: var(--news-text-inv-low) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}
body.news .tab-menu [role="tablist"] > button[role="tab"]:hover > span {
  color: var(--news-text-inv-medium) !important;
}
body.news .tab-menu [role="tablist"] > button[role="tab"][data-state="active"] > span {
  font-weight: var(--news-fw-bold) !important;
  color: var(--news-text-prim) !important;
}
body.news .tab-menu [role="tablist"] > button[role="tab"]:focus-visible {
  outline: 2px solid var(--news-text-prim);
  outline-offset: -2px;
}
/* --------------------------------------------------------------------- 4. Listing sections & grid --------------------------------------------------------------------- */ body.news #main-content section.px-container-offset {
  padding-inline: var(--news-gutter) !important;
}
body.news #main-content .template-body.grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto;
  gap: var(--news-gap) !important;
  width: 100%;
  max-width: var(--news-container);
  margin-inline: auto;
  padding: 0 !important;
}
/* Top Stories panel – 40px under the header */ body.news .tab-menu [role="tabpanel"] .template-body.grid {
  padding-top: 40px !important;
  padding-bottom: var(--news-gap) !important;
}
/* Following listing section – 80px before footer */ body.news #main-content > section:not(.tab-menu) .template-body.grid {
  padding-bottom: 80px !important;
}
/* Reset CMS spans (inline styles) */ body.news #main-content .template-body.grid > article {
  grid-column: auto / span 1 !important;
  grid-row: auto !important;
  height: auto !important;
  min-width: 0;
}
/* First two Top Stories = large cards (2 per row) */ body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(-n + 2) {
  grid-column: auto / span 2 !important;
}
/* --------------------------------------------------------------------- 5. Card (shared) --------------------------------------------------------------------- */ body.news #main-content .template-body.grid > article .card-layout {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  height: 100%;
  background: var(--news-bg-card);
  border-radius: var(--news-radius);
  overflow: hidden;
}
/* Image – 16:9, cover */ body.news #main-content .template-body.grid > article .card-layout a.article-link {
  display: block !important;
  width: 100% !important;
  text-align: left;
}
body.news #main-content .template-body.grid > article [class*="aspect-"] {
  aspect-ratio: 16 / 9 !important;
  width: 100%;
  background: #d9d9d9;
}
body.news #main-content .template-body.grid > article [class*="aspect-"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top;
  transition: transform 0.4s ease;
}
body.news #main-content .template-body.grid > article:hover [class*="aspect-"] img {
  transform: scale(1.04);
}
/* Heading block */ body.news #main-content .template-body.grid > article .photos-sub-card-heading {
  gap: var(--news-lg-gap-text) !important;
  padding: var(--news-sm-pad-y) var(--news-sm-pad-x) 0;
}
body.news #main-content .template-body.grid > article .photos-sub-card-heading > div:empty {
  display: none;
}
body.news #main-content .template-body.grid > article .photos-sub-card-heading > div {
  gap: var(--news-lg-gap-text) !important;
}
/* Title – small card (h4) */ body.news #main-content .template-body.grid > article p.h1_bold {
  margin: 0;
  font-family: var(--news-ff-heading);
  font-size: var(--news-fs-h4);
  line-height: var(--news-lh-h4);
  font-weight: var(--news-fw-h4);
  letter-spacing: var(--news-ls-none);
  text-transform: uppercase;
  text-align: left;
  color: var(--news-text-high);
  height: calc(var(--news-lh-h4) * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  transition: color 0.3s ease;
}
body.news #main-content .template-body.grid > article .card-layout:hover p.h1_bold {
  color: var(--news-text-prim);
}
/* Description – hidden on small cards */ body.news #main-content .template-body.grid > article p.body_lg_bold {
  display: none;
}
/* Date + read time row */ body.news #main-content .template-body.grid > article .photos-sub-card-time {
  margin-top: auto;
  padding: var(--news-sm-gap-date) var(--news-sm-pad-x) var(--news-sm-pad-y);
}
body.news #main-content .template-body.grid > article .photos-sub-card-time > div:first-child {
  width: auto !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
}
body.news #main-content .template-body.grid > article .photos-sub-card-time > [data-component-type="organism"] {
  display: none;
}
body.news #main-content .template-body.grid > article .photos-sub-card-time .ml-auto {
  margin-left: 0 !important;
}
body.news #main-content .template-body.grid > article .photos-sub-card-time .badge-site {
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--news-ff-body);
  font-size: var(--news-fs-body_sm);
  line-height: var(--news-lh-body_sm);
  font-weight: var(--news-fw-regular);
  letter-spacing: var(--news-ls-none);
  color: var(--news-text-medium) !important;
  white-space: nowrap;
}
/* vertical divider between date and read time */ body.news #main-content .template-body.grid > article .photos-sub-card-time .side-border-duration {
  padding-left: 12px !important;
  border-left: 1px solid var(--news-divider);
  line-height: 9px;
  height: 9px;
  overflow: visible;
}
/* --------------------------------------------------------------------- 6. Large card overrides (first two Top Stories) --------------------------------------------------------------------- */ body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-heading {
  padding: var(--news-lg-pad) var(--news-lg-pad) 0;
}
body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(-n + 2) p.h1_bold {
  font-size: var(--news-fs-h2);
  line-height: var(--news-lh-h2);
  font-weight: var(--news-fw-h2);
  height: auto;
  max-height: calc(var(--news-lh-h2) * 2);
}
body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(-n + 2) p.body_lg_bold {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: auto;
  margin: 0;
  font-family: var(--news-ff-body);
  font-size: var(--news-fs-body_md);
  line-height: var(--news-lh-body_md);
  font-weight: var(--news-fw-regular);
  letter-spacing: var(--news-ls-none);
  text-align: left;
  color: var(--news-text-low);
}
body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-time {
  padding: var(--news-lg-gap-date) var(--news-lg-pad) var(--news-lg-pad);
}
/* --------------------------------------------------------------------- 7. Responsive – Small laptop (1024px – 1279px) --------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {
  body.news {
    --news-fs-dp_3: 70px;
    --news-lh-dp_3: 70px;
    --news-fs-h2: var(--h2-font-size, var(--h2_bold-font-size));
    --news-lh-h2: var(--h2-line-height, var(--h2_bold-line-height));
    --news-fs-h4: var(--h4_bold-font-size);
    --news-lh-h4: var(--h4_bold-line-height);
    --news-hero-height: 180px;
    --news-hero-title-top: 64px;
  }
  body.news .tab-menu > .template-body::after {
    font-size: 210px;
    top: -36px;
  }
}
/* --------------------------------------------------------------------- 8. Responsive – Tablet (768px – 1023px) --------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {
  body.news {
    --news-fs-dp_3: 64px;
    --news-lh-dp_3: 64px;
    --news-fs-h2: var(--h3_bold-font-size);
    --news-lh-h2: var(--h3_bold-line-height);
    --news-fs-h4: var(--h5_bold-font-size);
    --news-lh-h4: var(--h5_bold-line-height);
    --news-hero-height: 152px;
    --news-hero-title-top: 52px;
    --news-tab-height: 48px;
    --news-lg-pad: 20px;
  }
  body.news .tab-menu > .template-body::after {
    font-size: 160px;
    top: -24px;
    left: 20px;
  }
  /* 2 columns – large cards full width, small cards 2-up */ body.news #main-content .template-body.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(-n + 2) {
    grid-column: auto / span 1 !important;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:first-child {
    grid-column: 1 / -1 !important;
  }
  /* second Top Story becomes a normal card at this width */ body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(2) .photos-sub-card-heading {
    padding: var(--news-sm-pad-y) var(--news-sm-pad-x) 0;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(2) p.h1_bold {
    font-size: var(--news-fs-h4);
    line-height: var(--news-lh-h4);
    height: calc(var(--news-lh-h4) * 2);
    max-height: none;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(2) p.body_lg_bold {
    display: none;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(2) .photos-sub-card-time {
    padding: var(--news-sm-gap-date) var(--news-sm-pad-x) var(--news-sm-pad-y);
  }
  /* first (full-width) card: image left, text right */ body.news .tab-menu [role="tabpanel"] .template-body.grid > article:first-child .card-layout {
    display: grid !important;
    grid-template-columns: 55% minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:first-child .card-layout > :first-child {
    grid-row: 1 / span 2;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:first-child .photos-sub-card-time {
    align-self: end;
  }
}
/* --------------------------------------------------------------------- 9. Responsive – Mobile (≤ 767px) · Figma M_News Listing (19518:30475) --------------------------------------------------------------------- */ @media (max-width: 767px) {
  body.news {
    --news-fs-dp_3: 52px;
    --news-lh-dp_3: 50px;
    /* dp_3 mobile */ --news-fs-h2: var(--h3_bold-font-size);
    --news-lh-h2: var(--h3_bold-line-height);
    /* h2 mobile */ --news-fs-h5: var(--h5_bold-font-size);
    --news-lh-h5: var(--h5_bold-line-height);
    /* h5 */ --news-fw-h5: var(--h2-font-weight, var(--h2_bold-font-weight));
    --news-gutter: 16px;
    --news-gap: 16px;
    --news-radius: 4px;
    /* sm */ --news-hero-height: 118px;
    /* 162px header − 44px tabs */ --news-hero-title-top: 35px;
    --news-tab-height: 44px;
    --news-border-prim: #db3700;
    /* border/main/prim */ --news-lg-pad: 12px;
    --news-lg-pad-y: 20px;
    --news-list-img: 132px;
    --news-list-height: 100px;
    --news-list-pad-y: 14px;
    /* 3_5 */ --news-list-pad-x: 12px;
    /* 3 */
  }
  /* Hero */ body.news .tab-menu > .template-body::after {
    font-size: 80px;
    top: 0;
    left: 10px;
    opacity: 0.05;
  }
  /* Tabs */ body.news .tab-menu [role="tablist"] > button[role="tab"] {
    padding: 0 8px;
  }
  /* Grid: single column, 343px content on 375px */ body.news #main-content .template-body.grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid {
    padding-top: 24px !important;
  }
  body.news #main-content > section:not(.tab-menu) .template-body.grid {
    padding-bottom: 52px !important;
  }
  body.news #main-content .template-body.grid > article, body.news .tab-menu [role="tabpanel"] .template-body.grid > article:nth-child(-n + 2), body.news .tab-menu [role="tabpanel"] .template-body.grid > article:first-child {
    grid-column: auto / span 1 !important;
  }
  /* ---- Large card: first Top Story only ---- */ body.news .tab-menu [role="tabpanel"] .template-body.grid > article:first-child .card-layout {
    display: flex !important;
    flex-direction: column;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:first-child .photos-sub-card-heading {
    padding: var(--news-lg-pad-y) var(--news-lg-pad) 0 !important;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:first-child p.h1_bold {
    font-size: var(--news-fs-h2) !important;
    line-height: var(--news-lh-h2) !important;
    height: auto !important;
    max-height: calc(var(--news-lh-h2) * 2) !important;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:first-child p.body_lg_bold {
    display: -webkit-box !important;
  }
  body.news .tab-menu [role="tabpanel"] .template-body.grid > article:first-child .photos-sub-card-time {
    padding: var(--news-lg-gap-date) var(--news-lg-pad) var(--news-lg-pad-y) !important;
  }
  /* ---- Horizontal list card: every other card ---- */ body.news #main-content .template-body.grid > article:not(:first-child) .card-layout, body.news #main-content > section:not(.tab-menu) .template-body.grid > article:first-child .card-layout {
    display: grid !important;
    grid-template-columns: var(--news-list-img) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    height: var(--news-list-height);
  }
  body.news #main-content .template-body.grid > article:not(:first-child) .card-layout > :first-child, body.news #main-content > section:not(.tab-menu) .template-body.grid > article:first-child .card-layout > :first-child {
    grid-row: 1 / span 2;
    height: var(--news-list-height);
    overflow: hidden;
  }
  body.news #main-content .template-body.grid > article:not(:first-child) .card-layout > :first-child *:not(img):not(picture), body.news #main-content > section:not(.tab-menu) .template-body.grid > article:first-child .card-layout > :first-child *:not(img):not(picture) {
    height: 100% !important;
  }
  body.news #main-content .template-body.grid > article:not(:first-child) [class*="aspect-"], body.news #main-content > section:not(.tab-menu) .template-body.grid > article:first-child [class*="aspect-"] {
    aspect-ratio: auto !important;
    height: var(--news-list-height) !important;
  }
  body.news #main-content .template-body.grid > article:not(:first-child) .photos-sub-card-heading, body.news #main-content > section:not(.tab-menu) .template-body.grid > article:first-child .photos-sub-card-heading {
    padding: var(--news-list-pad-y) var(--news-list-pad-x) 0 !important;
    min-width: 0;
  }
  body.news #main-content .template-body.grid > article:not(:first-child) p.h1_bold, body.news #main-content > section:not(.tab-menu) .template-body.grid > article:first-child p.h1_bold {
    font-size: var(--news-fs-h5) !important;
    line-height: var(--news-lh-h5) !important;
    font-weight: var(--news-fw-h5) !important;
    height: calc(var(--news-lh-h5) * 2) !important;
    max-height: none !important;
  }
  body.news #main-content .template-body.grid > article:not(:first-child) p.body_lg_bold, body.news #main-content > section:not(.tab-menu) .template-body.grid > article:first-child p.body_lg_bold {
    display: none !important;
  }
  body.news #main-content .template-body.grid > article:not(:first-child) .photos-sub-card-time, body.news #main-content > section:not(.tab-menu) .template-body.grid > article:first-child .photos-sub-card-time {
    align-self: end;
    margin-top: 0;
    padding: 0 var(--news-list-pad-x) var(--news-list-pad-y) !important;
  }
  /* no zoom effect on touch screens */ body.news #main-content .template-body.grid > article:hover [class*="aspect-"] img {
    transform: none;
  }
}
/* --------------------------------------------------------------------- 10. Responsive – Small phones (≤ 359px) --------------------------------------------------------------------- */ @media (max-width: 359px) {
  body.news {
    --news-gutter: 12px;
    --news-fs-dp_3: 44px;
    --news-lh-dp_3: 44px;
    --news-fs-h2: var(--h3_bold-font-size);
    --news-lh-h2: var(--h3_bold-line-height);
    --news-fs-h5: var(--h5_bold-font-size);
    --news-lh-h5: var(--h5_bold-line-height);
    --news-list-img: 112px;
    --news-list-height: 96px;
    --news-list-pad-y: 12px;
    --news-list-pad-x: 10px;
  }
  body.news .tab-menu [role="tablist"] > button[role="tab"] > span {
    font-size: 13px !important;
  }
}
/* ===================================================================== IBL – News Listing page (/news/) Figma: Tab-1 desktop (20420:28950) · Tab-2 mobile (19518:30474) Scope: body.news → affects only the News page Page structure (live HTML): .tab-menu [role=tablist] → TOP STORIES / LATEST [role=tabpanel]:nth-child(2) → Tab-1 · Section-1 (Top Stories) [role=tabpanel]:nth-child(3) → Tab-2 · Section-1 (Latest) #main-content > section:not(.tab-menu) → Section-2 (4-up grid, same on both tabs) ===================================================================== */ /* --------------------------------------------------------------------- 1. Design tokens (Figma variables → CSS variables) --------------------------------------------------------------------- */ body.news {
  /* Typeface – site tokens with Figma fallbacks */ --news-ff-display: var(--dp_3_bold-font-family, "Roboto Flex"), sans-serif;
  --news-ff-heading: var(--h2_bold-font-family, "Roboto Flex"), sans-serif;
  --news-ff-body: var(--body_md_regular-font-family, "Roboto"), sans-serif;
  /* Type scale – Figma desktop */ --news-fs-dp_3: 80px;
  --news-lh-dp_3: 80px;
  --news-fw-dp_3: 550;
  /* page title */ --news-fs-h2: var(--h2-font-size, var(--h2_bold-font-size));
  --news-lh-h2: var(--h2-line-height, var(--h2_bold-line-height));
  /* featured title */ --news-fs-h4: var(--h4_bold-font-size);
  --news-lh-h4: var(--h4_bold-line-height);
  /* small card title */ --news-fs-h5: var(--h5_bold-font-size);
  --news-lh-h5: var(--h5_bold-line-height);
  /* mobile list title */ --news-fw-heading: var(--h2-font-weight, var(--h2_bold-font-weight));
  --news-fs-body_md: var(--body_md_regular-font-size);
  --news-lh-body_md: var(--body_md_regular-line-height);
  /* description, tabs */ --news-fs-body_sm: var(--body_sm_regular-font-size);
  --news-lh-body_sm: var(--body_sm_regular-line-height);
  /* date / read time */ --news-fw-regular: var(--body_md_regular-font-weight);
  --news-fw-bold: 700;
  --news-ls-none: var(--body_md_regular-letter-spacing);
  /* Colours */ --news-bg-page: #f5f5f5;
  /* background/main/container */ --news-bg-card: #ffffff;
  /* background/main/surface */ --news-bg-img: #d9d9d9;
  --news-bg-dark: #101010;
  /* background/invert/surface */ --news-text-high: #1a1a1a;
  /* text/main/high */ --news-text-medium: #333333;
  /* text/main/medium */ --news-text-low: #454545;
  /* text/main/low */ --news-text-prim: #ff4100;
  /* text/main/prim */ --news-text-inv-high: #ffffff;
  /* text/invert/high */ --news-text-inv-medium: #d9d9d9;
  /* text/invert/medium */ --news-text-inv-low: #9d9d9d;
  /* text/invert/low */ --news-border-inv: #555555;
  /* border/invert/default */ --news-border-inv-disable: #333333;
  /* border/invert/disable */ --news-border-prim: #ff4100;
  /* color/prim1/600k */ --news-divider: #c4c4c4;
  /* border/main/default */ /* Layout */ --news-container: 1500px;
  --news-gutter: 24px;
  --news-gap: 16px;
  /* 4 */ --news-radius: 8px;
  /* md */ --news-hero-height: 200px;
  /* 250px header − 53px tabs */ --news-hero-title-top: 71px;
  /* Figma cap-top 80 minus half-leading */ --news-tab-height: 50px;
  /* Figma 50 – 3px underline overlaps */ --news-section-top: 40px;
  --news-section-bottom: 80px;
  /* Small card (Tab-1 right column) */ --news-sm-img-ratio: 16 / 9;
  /* 281 × 159 */ --news-sm-pad-y: 16px;
  /* 4 */ --news-sm-pad-x: 8px;
  /* 2 */ --news-sm-gap-date: 20px;
  /* 5 */ /* Featured card (Tab-1 left) */ --news-ft-pad: 24px;
  /* 6 */ --news-ft-gap-text: 24px;
  --news-ft-desc-lines: 5;
  --news-condensed: "opsz" 50, "slnt" 0, "wdth" 25, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
}
body.news #main-content {
  background: var(--news-bg-page);
}
/* --------------------------------------------------------------------- 2. Hero header – "NEWS" --------------------------------------------------------------------- */ body.news .tab-menu > .template-body {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}
/* body.news .tab-menu > .template-body::before {
  content: "NEWS";
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  height: var(--news-hero-height);
  padding-top: var(--news-hero-title-top);
  padding-inline: max(var(--news-gutter), calc((100% - var(--news-container)) / 2));
  background: radial-gradient(120% 140% at 85% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 60%), var(--news-bg-dark);
  color: var(--news-text-inv-high);
  font-family: var(--news-ff-display);
  font-size: var(--news-fs-dp_3);
  line-height: var(--news-lh-dp_3);
  font-weight: var(--news-fw-dp_3);
  letter-spacing: var(--news-ls-none);
  font-variation-settings: var(--news-condensed);
  text-transform: uppercase;
  text-align: left;
}
*/ /* body.news .tab-menu > .template-body::after {
  content: "NEWS";
  position: absolute;
  top: -45px;
  left: 30px;
  z-index: 1;
  pointer-events: none;
  font-family: var(--news-ff-display);
  font-size: 250px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 4px;
  font-variation-settings: var(--news-condensed);
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.04;
}
*/ /* --------------------------------------------------------------------- 3. Tabs – TOP STORIES / LATEST --------------------------------------------------------------------- */ body.news .tab-menu [role="tablist"] {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--news-bg-dark);
  border-top: 0.5px solid var(--news-border-inv-disable);
  overflow: hidden !important;
}
body.news .tab-menu [role="tablist"] > button[role="tab"] {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--news-tab-height);
  margin: 0;
  padding: 0 16px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--news-border-inv);
  cursor: pointer;
  transition: border-color 0.3s ease;
}
body.news .tab-menu [role="tablist"] > button[role="tab"][data-state="active"] {
  border-bottom-color: var(--news-border-prim);
}
body.news .tab-menu [role="tablist"] > button[role="tab"] > span {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--news-ff-body) !important;
  font-size: var(--news-fs-body_md) !important;
  line-height: var(--news-lh-body_md) !important;
  font-weight: var(--news-fw-regular) !important;
  letter-spacing: var(--news-ls-none) !important;
  text-transform: uppercase;
  text-align: center;
  color: var(--news-text-inv-low) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}
body.news .tab-menu [role="tablist"] > button[role="tab"]:hover > span {
  color: var(--news-text-inv-medium) !important;
}
body.news .tab-menu [role="tablist"] > button[role="tab"][data-state="active"] > span {
  font-weight: var(--news-fw-bold) !important;
  color: var(--news-text-prim) !important;
}
body.news .tab-menu [role="tablist"] > button[role="tab"]:focus-visible {
  outline: 2px solid var(--news-text-prim);
  outline-offset: -2px;
}
/* --------------------------------------------------------------------- 4. Grid reset (all sections) --------------------------------------------------------------------- */ body.news #main-content section.px-container-offset {
  padding-inline: var(--news-gutter) !important;
}
body.news #main-content .template-body.grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto;
  gap: var(--news-gap) !important;
  width: 100%;
  max-width: var(--news-container);
  margin-inline: auto;
  padding: 0 !important;
}
body.news #main-content .template-body.grid > article {
  grid-column: auto / span 1 !important;
  grid-row: auto !important;
  height: auto !important;
  min-width: 0;
}
/* Section spacing */ body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid {
  padding-top: var(--news-section-top) !important;
  padding-bottom: var(--news-gap) !important;
}
body.news #main-content > section:not(.tab-menu) .template-body.grid {
  padding-bottom: var(--news-section-bottom) !important;
}
/* --------------------------------------------------------------------- 5. Card base (= small vertical card, Tab-1 right column) --------------------------------------------------------------------- */ body.news #main-content .template-body.grid > article .card-layout {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  height: 100%;
  background: var(--news-bg-card);
  border-radius: var(--news-radius);
  overflow: hidden;
}
body.news #main-content .template-body.grid > article .card-layout a.article-link {
  display: block !important;
  width: 100% !important;
  height: 100%;
  text-align: left;
}
/* Image */ body.news #main-content .template-body.grid > article [class*="aspect-"] {
  aspect-ratio: var(--news-sm-img-ratio) !important;
  width: 100%;
  background: var(--news-bg-img);
}
body.news #main-content .template-body.grid > article [class*="aspect-"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top;
  transition: transform 0.4s ease;
}
body.news #main-content .template-body.grid > article:hover [class*="aspect-"] img {
  transform: scale(1.04);
}
/* Heading block */ body.news #main-content .template-body.grid > article .photos-sub-card-heading {
  gap: var(--news-ft-gap-text) !important;
  padding: var(--news-sm-pad-y) var(--news-sm-pad-x) 0;
  min-width: 0;
}
body.news #main-content .template-body.grid > article .photos-sub-card-heading > div:empty {
  display: none;
}
body.news #main-content .template-body.grid > article .photos-sub-card-heading > div {
  gap: var(--news-ft-gap-text) !important;
}
/* Title – h4 */ body.news #main-content .template-body.grid > article p.h1_bold {
  margin: 0;
  font-family: var(--news-ff-heading);
  font-size: var(--news-fs-h4);
  line-height: var(--news-lh-h4);
  font-weight: var(--news-fw-heading);
  letter-spacing: var(--news-ls-none);
  text-transform: uppercase;
  text-align: left;
  color: var(--news-text-high);
  height: calc(var(--news-lh-h4) * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  transition: color 0.3s ease;
}
body.news #main-content .template-body.grid > article .card-layout:hover p.h1_bold {
  color: var(--news-text-prim);
}
/* Description – hidden by default */ body.news #main-content .template-body.grid > article p.body_lg_bold {
  display: none;
  margin: 0;
  font-family: var(--news-ff-body);
  font-size: var(--news-fs-body_md);
  line-height: var(--news-lh-body_md);
  font-weight: var(--news-fw-regular);
  letter-spacing: var(--news-ls-none);
  text-align: left;
  color: var(--news-text-low);
  height: auto;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
/* Date + read time */ body.news #main-content .template-body.grid > article .photos-sub-card-time {
  margin-top: auto;
  padding: var(--news-sm-gap-date) var(--news-sm-pad-x) var(--news-sm-pad-y);
}
body.news #main-content .template-body.grid > article .photos-sub-card-time > div:first-child {
  width: auto !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
}
body.news #main-content .template-body.grid > article .photos-sub-card-time > [data-component-type="organism"] {
  display: none;
}
body.news #main-content .template-body.grid > article .photos-sub-card-time .ml-auto {
  margin-left: 0 !important;
}
body.news #main-content .template-body.grid > article .photos-sub-card-time .badge-site {
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--news-ff-body);
  font-size: var(--news-fs-body_sm);
  line-height: var(--news-lh-body_sm);
  font-weight: var(--news-fw-regular);
  letter-spacing: var(--news-ls-none);
  color: var(--news-text-medium) !important;
  white-space: nowrap;
}
body.news #main-content .template-body.grid > article .photos-sub-card-time .side-border-duration {
  padding-left: 12px !important;
  border-left: 1px solid var(--news-divider);
  line-height: 9px;
  height: 9px;
  overflow: visible;
}
/* ===================================================================== 6. DESKTOP (≥ 1024px) – Figma Tab-1 (20420:28950) ===================================================================== */ @media (min-width: 1024px) {
  /* ---------- Tab-1 · Section-1: featured (left) + 2×2 small (right) ---------- */ body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child {
    grid-column: 1 / span 2 !important;
    grid-row: 1 / span 2 !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child .photos-sub-card-heading {
    padding: var(--news-ft-pad) var(--news-ft-pad) 0;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child p.h1_bold {
    font-size: var(--news-fs-h2);
    line-height: var(--news-lh-h2);
    height: auto;
    max-height: calc(var(--news-lh-h2) * 2);
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child p.body_lg_bold {
    display: -webkit-box;
    -webkit-line-clamp: var(--news-ft-desc-lines);
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child .photos-sub-card-time {
    padding: var(--news-ft-pad);
  }
  /* ---------- Tab-2 · Section-1: 2 large cards side by side ---------- */ body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) {
    grid-column: auto / span 2 !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-heading {
    gap: 16px !important;
    padding: var(--news-ft-pad) var(--news-ft-pad) 0;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-heading > div {
    gap: 16px !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) p.h1_bold {
    font-size: var(--news-fs-h2);
    line-height: var(--news-lh-h2);
    height: auto;
    max-height: calc(var(--news-lh-h2) * 2);
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) p.body_lg_bold {
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-time {
    padding: 32px var(--news-ft-pad) var(--news-ft-pad);
  }
  /* ---------- Section-2 (both tabs): 4-up small cards ---------- */ body.news #main-content > section:not(.tab-menu) .template-body.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* Small laptop fine-tuning (1024px – 1279px) */ @media (min-width: 1024px) and (max-width: 1279px) {
  body.news {
    --news-fs-dp_3: 70px;
    --news-lh-dp_3: 70px;
    --news-fs-h2: var(--h2-font-size, var(--h2_bold-font-size));
    --news-lh-h2: var(--h2-line-height, var(--h2_bold-line-height));
    --news-fs-h4: var(--h4_bold-font-size);
    --news-lh-h4: var(--h4_bold-line-height);
    --news-hero-height: 180px;
    --news-hero-title-top: 64px;
    --news-ft-desc-lines: 4;
  }
  body.news .tab-menu > .template-body::after {
    font-size: 210px;
    top: -36px;
  }
}
/* ===================================================================== 7. TABLET (768px – 1023px) ===================================================================== */ @media (min-width: 768px) and (max-width: 1023px) {
  body.news {
    --news-fs-dp_3: 64px;
    --news-lh-dp_3: 64px;
    --news-fs-h2: var(--h3_bold-font-size);
    --news-lh-h2: var(--h3_bold-line-height);
    --news-fs-h4: var(--h5_bold-font-size);
    --news-lh-h4: var(--h5_bold-line-height);
    --news-hero-height: 152px;
    --news-hero-title-top: 52px;
    --news-tab-height: 48px;
    --news-sm-pad-x: 12px;
    --news-ft-pad: 20px;
  }
  body.news .tab-menu > .template-body::after {
    font-size: 160px;
    top: -24px;
    left: 20px;
  }
  /* Section-1 (both tabs): 2 columns */ body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Tab-1 featured card: full width, image left / text right */ body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child {
    grid-column: 1 / -1 !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child .card-layout {
    display: grid;
    grid-template-columns: 55% minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child .card-layout > :first-child {
    grid-row: 1 / span 2;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child .photos-sub-card-heading, body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child .photos-sub-card-heading > div {
    gap: 16px !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child .photos-sub-card-heading {
    padding: var(--news-ft-pad) var(--news-ft-pad) 0;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child p.h1_bold {
    font-size: var(--news-fs-h2);
    line-height: var(--news-lh-h2);
    height: auto;
    max-height: calc(var(--news-lh-h2) * 2);
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child p.body_lg_bold {
    display: -webkit-box;
    -webkit-line-clamp: 3;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child .photos-sub-card-time {
    align-self: end;
    padding: 20px var(--news-ft-pad) var(--news-ft-pad);
  }
  /* Tab-2: 2 large cards side by side */ body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-heading, body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-heading > div {
    gap: 16px !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-heading {
    padding: var(--news-ft-pad) var(--news-ft-pad) 0;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) p.h1_bold {
    font-size: var(--news-fs-h2);
    line-height: var(--news-lh-h2);
    height: auto;
    max-height: calc(var(--news-lh-h2) * 2);
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) p.body_lg_bold {
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-time {
    padding: 24px var(--news-ft-pad) var(--news-ft-pad);
  }
  /* Section-2: 2-up small cards */ body.news #main-content > section:not(.tab-menu) .template-body.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* ===================================================================== 8. MOBILE (≤ 767px) – Figma Tab-2 (19518:30474) 1st card of each tab = large card · every other card = list row ===================================================================== */ @media (max-width: 767px) {
  body.news {
    --news-fs-dp_3: 52px;
    --news-lh-dp_3: 50px;
    --news-fs-h2: var(--h3_bold-font-size);
    --news-lh-h2: var(--h3_bold-line-height);
    --news-fs-h5: var(--h5_bold-font-size);
    --news-lh-h5: var(--h5_bold-line-height);
    --news-gutter: 16px;
    --news-radius: 4px;
    /* sm */ --news-hero-height: 118px;
    /* 162px header − 44px tabs */ --news-hero-title-top: 35px;
    --news-tab-height: 44px;
    --news-border-prim: #db3700;
    /* border/main/prim */ --news-section-top: 24px;
    --news-section-bottom: 52px;
    /* large card */ --news-lg-pad-x: 12px;
    /* 3 */ --news-lg-pad-y: 20px;
    /* 5 */ --news-lg-gap-text: 16px;
    /* 4 */ --news-lg-gap-date: 32px;
    /* 8 */ /* list row */ --news-list-img: 132px;
    --news-list-height: 100px;
    --news-list-pad-y: 14px;
    /* 3_5 */ --news-list-pad-x: 12px;
    /* 3 */
  }
  body.news .tab-menu > .template-body::after {
    font-size: 80px;
    top: 0;
    left: 10px;
    opacity: 0.05;
  }
  body.news .tab-menu [role="tablist"] > button[role="tab"] {
    padding: 0 8px;
  }
  /* Single column everywhere */ body.news #main-content .template-body.grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.news #main-content .template-body.grid > article {
    grid-column: auto / span 1 !important;
    grid-row: auto !important;
  }
  /* ---------- Large card: first card of each tab ---------- */ body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:first-child .photos-sub-card-heading, body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:first-child .photos-sub-card-heading > div {
    gap: var(--news-lg-gap-text) !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:first-child .photos-sub-card-heading {
    padding: var(--news-lg-pad-y) var(--news-lg-pad-x) 0;
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:first-child p.h1_bold {
    font-size: var(--news-fs-h2);
    line-height: var(--news-lh-h2);
    height: auto;
    max-height: calc(var(--news-lh-h2) * 2);
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:first-child p.body_lg_bold {
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:first-child .photos-sub-card-time {
    padding: var(--news-lg-gap-date) var(--news-lg-pad-x) var(--news-lg-pad-y);
  }
  /* ---------- List row: all other cards (incl. all of Section-2) ---------- */ body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:not(:first-child) .card-layout, body.news #main-content > section:not(.tab-menu) .template-body.grid > article .card-layout {
    display: grid;
    grid-template-columns: var(--news-list-img) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    height: var(--news-list-height);
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:not(:first-child) .card-layout > :first-child, body.news #main-content > section:not(.tab-menu) .template-body.grid > article .card-layout > :first-child {
    grid-row: 1 / span 2;
    height: var(--news-list-height);
    overflow: hidden;
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:not(:first-child) .card-layout > :first-child *:not(img):not(picture), body.news #main-content > section:not(.tab-menu) .template-body.grid > article .card-layout > :first-child *:not(img):not(picture) {
    height: 100% !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:not(:first-child) [class*="aspect-"], body.news #main-content > section:not(.tab-menu) .template-body.grid > article [class*="aspect-"] {
    aspect-ratio: auto !important;
    height: var(--news-list-height) !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:not(:first-child) .photos-sub-card-heading, body.news #main-content > section:not(.tab-menu) .template-body.grid > article .photos-sub-card-heading {
    padding: var(--news-list-pad-y) var(--news-list-pad-x) 0;
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:not(:first-child) p.h1_bold, body.news #main-content > section:not(.tab-menu) .template-body.grid > article p.h1_bold {
    font-size: var(--news-fs-h5);
    line-height: var(--news-lh-h5);
    height: calc(var(--news-lh-h5) * 2);
    max-height: none;
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:not(:first-child) .photos-sub-card-time, body.news #main-content > section:not(.tab-menu) .template-body.grid > article .photos-sub-card-time {
    align-self: end;
    margin-top: 0;
    padding: 0 var(--news-list-pad-x) var(--news-list-pad-y);
  }
  body.news #main-content .template-body.grid > article:hover [class*="aspect-"] img {
    transform: none;
  }
}
/* Small phones (≤ 359px) */ @media (max-width: 359px) {
  body.news {
    --news-gutter: 12px;
    --news-fs-dp_3: 44px;
    --news-lh-dp_3: 44px;
    --news-fs-h2: var(--h3_bold-font-size);
    --news-lh-h2: var(--h3_bold-line-height);
    --news-fs-h5: var(--h5_bold-font-size);
    --news-lh-h5: var(--h5_bold-line-height);
    --news-list-img: 112px;
    --news-list-height: 96px;
    --news-list-pad-y: 12px;
    --news-list-pad-x: 10px;
  }
  body.news .tab-menu [role="tablist"] > button[role="tab"] > span {
    font-size: 13px !important;
  }
}
/* ===================================================================== Top Stories – .vertical-news-card Figma Tab-1 "News" card (20420:28984): 578 × 159, image left 210px, text right (padding 24 / 16), title h3 24/28, date at bottom. Paste at the END of the existing News CSS. ===================================================================== */ body.news .vertical-news-card {
  --vnc-height: 159px;
  --vnc-img: 210px;
  /* 209.88 */ --vnc-pad-y: 24px;
  /* 6 */ --vnc-pad-x: 16px;
  /* 4 */ --vnc-fs: 24px;
  /* size/h3 */ --vnc-lh: 28px;
  /* line_height/h3 */ --vnc-fw: 500;
}
@media (min-width: 768px) {
  /* ---------- Grid placement: 2 per row on desktop ---------- */ body.news #main-content .template-body.grid > article:has(> .vertical-news-card) {
    grid-column: auto / span 2 !important;
    grid-row: auto !important;
  }
  /* ---------- Card: image left, text right ---------- */ body.news #main-content .template-body.grid > article .card-layout.vertical-news-card {
    display: grid !important;
    grid-template-columns: var(--vnc-img) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 0 !important;
    height: var(--vnc-height);
    background: var(--news-bg-card, #ffffff);
    border-radius: var(--news-radius, 8px);
    overflow: hidden;
  }
  /* Image column */ body.news #main-content .template-body.grid > article .vertical-news-card > :first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: var(--vnc-height);
    overflow: hidden;
  }
  body.news #main-content .template-body.grid > article .vertical-news-card > :first-child *:not(img):not(picture) {
    height: 100% !important;
  }
  body.news #main-content .template-body.grid > article .vertical-news-card [class*="aspect-"] {
    aspect-ratio: auto !important;
    width: 100%;
    height: var(--vnc-height) !important;
  }
  body.news #main-content .template-body.grid > article .vertical-news-card [class*="aspect-"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top;
  }
  /* Title block */ body.news #main-content .template-body.grid > article .vertical-news-card .photos-sub-card-heading {
    grid-column: 2;
    grid-row: 1;
    gap: 12px !important;
    padding: var(--vnc-pad-y) var(--vnc-pad-x) 0 !important;
    min-width: 0;
  }
  body.news #main-content .template-body.grid > article .vertical-news-card p.h1_bold {
    margin: 0;
    font-family: var(--news-ff-heading, "Roboto Flex"), sans-serif !important;
    font-size: var(--vnc-fs) !important;
    line-height: var(--vnc-lh) !important;
    font-weight: var(--vnc-fw) !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    text-align: left;
    color: var(--news-text-high, #1a1a1a) !important;
    height: auto !important;
    max-height: calc(var(--vnc-lh) * 2) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }
  /* No colour change on hover */ body.news #main-content .template-body.grid > article .card-layout.vertical-news-card:hover p.h1_bold {
    color: var(--news-text-high, #1a1a1a) !important;
  }
  body.news #main-content .template-body.grid > article .vertical-news-card p.body_lg_bold {
    display: none !important;
  }
  /* Date row – bottom of text column */ body.news #main-content .template-body.grid > article .vertical-news-card .photos-sub-card-time {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin-top: 0 !important;
    padding: 0 var(--vnc-pad-x) var(--vnc-pad-y) !important;
  }
}
/* Small laptop (1024px – 1279px) */ @media (min-width: 1024px) and (max-width: 1279px) {
  body.news .vertical-news-card {
    --vnc-img: 180px;
    --vnc-pad-y: 20px;
    --vnc-fs: 20px;
    --vnc-lh: 24px;
  }
}
/* Tablet (768px – 1023px): one per row, full width */ @media (min-width: 768px) and (max-width: 1023px) {
  body.news #main-content .template-body.grid > article:has(> .vertical-news-card) {
    grid-column: 1 / -1 !important;
  }
  body.news .vertical-news-card {
    --vnc-img: 240px;
    --vnc-fs: 22px;
    --vnc-lh: 26px;
  }
}
/* --------------------------------------------------------------------- Fix – card description collapsed to 0px (all screen sizes) a.article-link {
  height:100%
}
is meant for the image link;
it also hit the title link inside .photos-sub-card-heading and squeezed the description. --------------------------------------------------------------------- */ body.news #main-content .template-body.grid > article .photos-sub-card-heading a.article-link {
  height: auto !important;
}
body.news #main-content .template-body.grid > article .photos-sub-card-heading p.body_lg_bold {
  flex-shrink: 0;
}
/* --------------------------------------------------------------------- Figma spacing match – Figma measures text with "vertical trim: cap height", CSS line boxes keep the half-leading. Values below = Figma spacing minus that leading so the rendered text lands where the design has it. --------------------------------------------------------------------- */ @media (min-width: 768px) {
  /* Small cards: Figma text frame padding 16 / 8, gap 20 */ body.news #main-content .template-body.grid > article .photos-sub-card-heading {
    padding-top: 22px;
  }
  body.news #main-content .template-body.grid > article .photos-sub-card-time {
    padding-bottom: 14px;
  }
}
@media (min-width: 1024px) {
  /* Tab-1 featured card: Figma padding 24, title → description gap 24 */ body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child .photos-sub-card-heading {
    padding-top: 20px;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(2) .template-body.grid > article:first-child .photos-sub-card-heading > div {
    gap: 9px !important;
  }
  /* Tab-2 large cards: Figma padding 24, title → description gap 16, description → date 32 */ body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-heading {
    padding-top: 20px;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-heading > div {
    gap: 4px !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:nth-child(-n + 2) .photos-sub-card-time {
    padding-top: 24px;
    padding-bottom: 21px;
  }
}
@media (max-width: 767px) {
  /* Large card: Figma padding 20 / 12, title → description 16, description → date 32 */ body.news {
    --news-lg-pad-y: 16px;
    --news-lg-gap-text: 10px;
    --news-lg-gap-date: 29px;
  }
  /* List row: Figma padding 14 / 12 */ body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:not(:first-child) .photos-sub-card-heading, body.news #main-content > section:not(.tab-menu) .template-body.grid > article .photos-sub-card-heading {
    padding-top: 10px !important;
  }
  body.news #main-content .tab-menu [role="tabpanel"] .template-body.grid > article:not(:first-child) .photos-sub-card-time, body.news #main-content > section:not(.tab-menu) .template-body.grid > article .photos-sub-card-time {
    padding-bottom: 9px !important;
  }
}
/* Tablet: the "image left / text right" layout is for the Tab-1 featured card only – keep Tab-2 (Latest) first card as a normal vertical large card */ @media (min-width: 768px) and (max-width: 1023px) {
  body.news #main-content .tab-menu [role="tabpanel"]:nth-child(3) .template-body.grid > article:first-child .card-layout {
    display: flex !important;
    flex-direction: column;
  }
}
[data-component-id="d6840427-06df-48cf-baac-708d1aaf46be"] .load-more-btn:hover {
background: hsl(var(--background_invert_surface));
  color: hsl(var(--text_invert_high));
}
[data-component-id="d6840427-06df-48cf-baac-708d1aaf46be"] .load-more-btn:focus-visible {
outline: 2px solid hsl(var(--text_main_prim));
  outline-offset: 3px;
}
[data-component-id="d6840427-06df-48cf-baac-708d1aaf46be"] .load-more-btn:disabled {
opacity: 0.5;
  cursor: not-allowed;
}
[data-component-id="0f3a4ffd-75cf-491d-8205-51f3a9efed42"] {
.ibl-footer {
    width: 100%;
  }
  .ibl-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
  }
  .ibl-footer__social {
    box-sizing: border-box;
    width: 100%;
    background: #101010;
    border-top: 0.5px solid hsl(var(--border_invert_disable));
    padding: var(--spacing_3) var(--container-offset, 98px);
  }
  .ibl-footer__socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .ibl-footer__social-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid hsl(var(--text_invert_high));
    border-radius: 50%;
    background: transparent;
    color: hsl(var(--text_invert_high));
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .ibl-footer__social-link:hover {
    opacity: 0.85;
  }
  .ibl-footer__social-icon {
    font-size: 16px;
    line-height: 1;
  }
  .ibl-footer__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .ibl-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }
  .ibl-footer__legal-sep {
    flex-shrink: 0;
    align-self: center;
    width: 0;
    height: 12px;
    margin: 0 12px;
    border-left: 0.5px solid #333333;
  }
  .ibl-footer__legal-link {
    color: hsl(var(--text_invert_medium));
    font: var(--body_xs_regular);
    text-decoration: none;
    white-space: nowrap;
  }
  .ibl-footer__legal-link:hover {
    color: hsl(var(--text_invert_high));
    text-decoration: underline;
  }
  .ibl-footer__powered {
    box-sizing: border-box;
    width: 100%;
    background: #0066ff;
    padding: 16px 98px;
  }
  .ibl-footer__copyright {
    margin: 0;
    color: #ffffff;
    font-family: var(--body_xs_regular-font-family, "Noto Sans"), sans-serif;
    font-size: var(--body_xs_regular-font-size, 0.75rem);
    font-weight: var(--body_xs_regular-font-weight, 400);
    line-height: var(--body_xs_regular-line-height, 1rem);
  }
  .ibl-footer__powered-by {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
  }
  .ibl-footer__powered-by:hover {
    opacity: 0.9;
  }
  .ibl-footer__powered-label {
    font-family: var(--body_xs_regular-font-family, "Noto Sans"), sans-serif;
    font-size: var(--body_xs_regular-font-size, 0.75rem);
    font-weight: var(--body_xs_regular-font-weight, 400);
    line-height: var(--body_xs_regular-line-height, 1rem);
    white-space: nowrap;
  }
  .ibl-footer__powered-logo {
    display: block;
    height: 20px;
    width: auto;
  }
  .ibl-footer__si-logo {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  @media (max-width: 1024px) {
    .ibl-footer__social, .ibl-footer__powered {
      padding-inline: var(--spacing_4, 24px);
    }
    .ibl-footer__inner {
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .ibl-footer__socials {
      justify-content: center;
      width: 100%;
    }
    .ibl-footer__legal {
      justify-content: center;
    }
  }
  @media (max-width: 640px) {
    .ibl-footer__social {
      padding: 32px var(--spacing_4, 16px);
    }
    .ibl-footer__powered {
      padding: var(--spacing_4, 16px);
    }
    .ibl-footer__inner {
      gap: 24px;
    }
    .ibl-footer__legal {
      justify-content: center;
      width: 100%;
    }
    .ibl-footer__legal-sep {
      margin: 0 8px;
    }
    .ibl-footer__legal-link {
      font-size: 0.625rem;
    }
    .ibl-footer__powered .ibl-footer__inner {
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }
  }
}