/* LED There Be Light (LTBL) page styles — pixel-oriented */

/* Base */
.ltbl { font-size: 12px; color: #101223; }
.ltbl .section { padding: 48px 0; }
.ltbl .container { max-width: 1600px; margin: 0 auto; padding: 0 16px; }

/* Default: Web + Tablet */
.ltbl .title {
    font-size: 65px;
    line-height: 1.1;
}

/* Mobile (below 768px) */
@media (max-width: 767px) {
    .ltbl .title {
        font-size: 32px;
        line-height: 1.2;
    }
}

/* Title band */
.ltbl .title { margin-top: 32px; margin-bottom: 32px; font-weight: 900; line-height: 1.1; text-transform: uppercase; text-align: center; letter-spacing: 0.5px; }
.ltbl .subtitle { margin-top: 32px; max-width: 500px; text-align: center; margin-left: auto; margin-right: auto; color: #555; line-height: 1.6; font-size: 1rem; line-height: 1.75rem; }

/* AVP (video/placeholder) */
.ltbl .avp { margin: 58px auto 0; max-width: 1580px; height: 860px; border-radius: 12px; background: #e9edf3; display: flex; align-items: center; justify-content: center; color: #3a3a3a; text-transform: uppercase; letter-spacing: 1px; }
.ltbl .avp iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }

/* Logos row */
.ltbl .logos { margin-top: 100px;margin-bottom: 100px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: center; }
@media (min-width: 768px) { .ltbl .logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .ltbl .logos { grid-template-columns: repeat(4, 1fr); } }
.ltbl .logos img { height: 60px; width: auto; object-fit: contain; filter: grayscale(0%); opacity: 0.95; }

/* Gallery */
.ltbl .gallery { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .ltbl .gallery { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.ltbl .tile { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: #f3f4f8; }
.ltbl .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gallery pager (small squares bottom-right) */
.ltbl .pager { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; }
.ltbl .pager button { width: 18px; height: 18px; border: 1px solid #cfd3da; background: #fff; border-radius: 4px; }
.ltbl .pager button.active { background: #101223; border-color: #101223; }

/* Suggested Articles */
.ltbl .suggested { margin-top: 36px; }
.ltbl .articles { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .ltbl .articles { grid-template-columns: repeat(2, 1fr); } }

/* Article card — pixel-precise per screenshot */
.ltbl .article-card { background: #fff; border: 1px solid #e6e8ee; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,0.02); }
.ltbl .article-card img { width: 100%; height: 220px; object-fit: cover; display: block; }

/* Meta layout: title/date left, READ ARTICLE right, hashtags below */
.ltbl .article-meta { padding: 16px 20px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 16px; align-items: start; }
.ltbl .article-title { font-size: 16px; line-height: 1.35; font-weight: 500; color: #101223; }
.ltbl .article-title::first-line { font-size: 18px; font-weight: 800; }

/* Inject the right-side label without changing markup */
.ltbl .article-meta::after { content: "READ\A ARTICLE"; white-space: pre; grid-column: 2; grid-row: 1; align-self: start; text-align: right; color: #9aa0ac; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }

.ltbl .article-desc { grid-column: 1 / -1; margin-top: 4px; color: #7b8190; font-size: 12px; }

@media (min-width: 1280px) {
  .ltbl .article-card img { height: 240px; }
  .ltbl .article-title { font-size: 16px; }
  .ltbl .article-title::first-line { font-size: 20px; }
}

/* Hero alignment override for this page */
.page-ltbl .hero-content { display: flex; align-items: center; justify-content: left; }
.page-ltbl .hero-content .max-w-3xl { text-align: left; }

/* Navigation overrides for LTBL page */
.page-ltbl .main-nav a,
.page-ltbl .main-nav button,
.page-ltbl .main-nav svg,
.page-ltbl .mobile-nav-item span,
.page-ltbl .mega-menu-global a,
.page-ltbl .mega-menu-inner-container a { color: #000 !important; }
.page-ltbl .main-nav a:hover,
.page-ltbl .mega-menu-global a:hover,
.page-ltbl .mega-menu-inner-container a:hover { color: #bf2026 !important; }
.page-ltbl .logo-white { display: none !important; }
.page-ltbl .logo-color { display: inline-block !important; }