/*
 * TPMT News Blocks — Stylesheet
 * Inherits CSS custom properties from the TPMT theme.
 * Fallback values mirror the theme defaults so the plugin
 * also looks great when used with any other theme.
 */

/* ── Fallback tokens (overridden by theme's :root) ────── */
.tnb-block {
 --c-black:   #0d0d0d;
 --c-dark:    #141414;
 --c-dark2:   #1e1e1e;
 --c-mid:     #555555;
 --c-muted:   #888888;
 --c-light:   #d4d4d4;
 --c-border:  #e2e2e2;
 --c-bg:      #f5f5f5;
 --c-white:   #ffffff;
 --c-accent:  #e63946;
 --ff-body:   Arial, Helvetica, sans-serif;
 --ff-heading:Arial Black, Arial, sans-serif;
 --r:         3px;
 --r-lg:      6px;
 --sh:        0 2px 10px rgba(0,0,0,.08);
 --sh-md:     0 6px 24px rgba(0,0,0,.12);
 --tr:        .18s ease;

 font-family: var(--ff-body);
 color: var(--c-dark);
 box-sizing: border-box;
}
.tnb-block *, .tnb-block *::before, .tnb-block *::after {
 box-sizing: border-box;
}
.tnb-block img {
 max-width: 100%;
 height: auto;
 display: block;
}
.tnb-block ul { list-style: none; margin: 0; padding: 0; }
.tnb-block a,
.tnb-block a:link,
.tnb-block a:visited,
.tnb-block a:hover,
.tnb-block a:active,
.tnb-block a:focus { text-decoration: none !important; }

.tnb-block h1,
.tnb-block h2,
.tnb-block h3,
.tnb-block h4,
.tnb-block h5 {
 font-family: var(--ff-heading);
 font-weight: 700;
 line-height: 1.2;
 color: var(--c-black);
 margin: 0;
}

/* ── Section header ──────────────────────────────────── */
.tnb-section-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 18px;
}
.tnb-section-title {
 font-size: .78rem;
 font-weight: 700;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--c-black);
 display: flex;
 align-items: center;
 gap: 10px;
}
.tnb-section-title::before {
 content: '';
 display: block;
 flex-shrink: 0;
 width: 14px;
 height: 14px;
 background: var(--c-accent);
 border-radius: 2px;
}
.tnb-section-more {
 font-size: .7rem;
 font-weight: 700;
 letter-spacing: .1em;
 text-transform: uppercase;
 color: var(--c-muted);
 display: inline-flex;
 align-items: center;
 gap: 4px;
 transition: color var(--tr);
}
.tnb-section-more::after { content: '→'; }
.tnb-section-more:hover  { color: var(--c-accent); }

.tnb-divider {
 border: none;
 border-top: 2px solid var(--c-black);
 margin: 0 0 22px;
}

/* ── Year filter dropdown ───────────────────────────── */
.tnb-year-filter {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 24px;
}
.tnb-year-label {
 font-size: .72rem;
 font-weight: 700;
 letter-spacing: .07em;
 text-transform: uppercase;
 color: var(--c-muted, #888888);
 white-space: nowrap;
 font-family: var(--ff-body, Arial, Helvetica, sans-serif);
}
.tnb-year-select {
 appearance: none;
 -webkit-appearance: none;
 background-color: #ffffff;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 10px center;
 border: 1.5px solid #e2e2e2;
 border-radius: 3px;
 padding: 7px 32px 7px 12px;
 font-size: .78rem;
 font-weight: 600;
 color: #141414;
 font-family: Arial, Helvetica, sans-serif;
 cursor: pointer;
 min-width: 130px;
 transition: border-color .15s, box-shadow .15s;
 box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.tnb-year-select:focus {
 outline: none;
 border-color: #141414;
 box-shadow: 0 0 0 3px rgba(20,20,20,.08);
}
.tnb-year-select:hover {
 border-color: #141414;
}

/* ── Category pill ──────────────────────────────────── */
.tnb-pill {
 display: inline-block;
 background: inherit;
 color: inherit;
 font-size: .62rem;
 font-weight: 700;
 letter-spacing: .1em;
 text-transform: uppercase;
 padding: 3px 9px;
 border-radius: var(--r);
 line-height: 1.4;
 white-space: nowrap;
}
.tnb-pill--sm { font-size: .58rem; padding: 2px 7px; }

/* ── Meta line ──────────────────────────────────────── */
.tnb-meta {
 font-size: .68rem;
 color: var(--c-muted);
 margin-top: 5px;
 line-height: 1.4;
}

/* ── Excerpt ────────────────────────────────────────── */
.tnb-excerpt {
 font-size: .82rem;
 color: var(--c-mid);
 line-height: 1.6;
 margin: 8px 0 0;
}

/* ── Thumbnail placeholder ──────────────────────────── */
.tnb-thumb-placeholder {
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, var(--c-dark2) 0%, var(--c-dark) 100%);
}
.tnb-thumb-placeholder--fill {
 position: absolute;
 inset: 0;
}

/* ═══════════════════════════════════════════════════════
   LAYOUT — GRID
═══════════════════════════════════════════════════════ */
.tnb-grid {
 display: grid;
 gap: 24px;
}
.tnb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tnb-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tnb-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Card */
.tnb-card {
 background: var(--c-white);
 border-radius: var(--r-lg);
 overflow: hidden;
 border: 1px solid var(--c-border);
 display: flex;
 flex-direction: column;
 transition: transform var(--tr), box-shadow var(--tr);
}
.tnb-card:hover {
 transform: translateY(-3px);
 box-shadow: var(--sh-md);
}

.tnb-card-thumb {
 position: relative;
 overflow: hidden;
 aspect-ratio: 16/9;
 background: var(--c-border);
}
.tnb-card-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform .35s ease;
}
.tnb-card:hover .tnb-card-thumb img { transform: scale(1.06); }
.tnb-card-thumb .tnb-pill {
 position: absolute;
 top: 11px;
 left: 11px;
 z-index: 2;
}

.tnb-card-body {
 padding: 16px 18px 20px;
 flex: 1;
 display: flex;
 flex-direction: column;
}
.tnb-card-body .tnb-meta {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin-bottom: 6px;
}
.tnb-card-body .tnb-meta span + span::before {
 content: '·';
 margin-right: 8px;
}
.tnb-card-body h3 {
 font-size: .96rem;
 line-height: 1.3;
 letter-spacing: -.01em;
}
.tnb-card-body h3 a { color: var(--c-black); transition: color var(--tr); }
.tnb-card-body h3 a:hover { color: var(--c-accent); }

/* ═══════════════════════════════════════════════════════
   LAYOUT — LIST
═══════════════════════════════════════════════════════ */
.tnb-list {
 background: var(--c-white);
 border: 1px solid var(--c-border);
 border-radius: var(--r-lg);
 padding: 4px 20px;
}
.tnb-list-item {
 display: flex;
 align-items: flex-start;
 gap: 14px;
 padding: 14px 0;
 border-bottom: 1px solid var(--c-border);
}
.tnb-list-item:last-child { border-bottom: none; }

.tnb-list-rank {
 flex-shrink: 0;
 width: 26px;
 height: 26px;
 background: var(--c-black);
 color: var(--c-white);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: .72rem;
 font-weight: 700;
 margin-top: 2px;
}

.tnb-list-thumb {
 flex-shrink: 0;
 width: 88px;
 height: 64px;
 border-radius: var(--r);
 overflow: hidden;
 background: var(--c-border);
}
.tnb-list-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.tnb-list-body { flex: 1; min-width: 0; }
.tnb-list-body .tnb-pill { margin-bottom: 4px; }
.tnb-list-body h4 {
 font-size: .85rem;
 line-height: 1.3;
 letter-spacing: -.01em;
}
.tnb-list-body h4 a { color: var(--c-black); transition: color var(--tr); }
.tnb-list-body h4 a:hover { color: var(--c-accent); }

/* ═══════════════════════════════════════════════════════
   LAYOUT — MAGAZINE
   Left: large feature card.  Right: stacked side list.
═══════════════════════════════════════════════════════ */
.tnb-magazine {
 display: grid;
 grid-template-columns: 1fr 320px;
 gap: 28px;
 align-items: start;
}

.tnb-mag-main { }

.tnb-mag-img {
 position: relative;
 border-radius: var(--r-lg);
 overflow: hidden;
 background: var(--c-black);
 aspect-ratio: 4/3;
}
.tnb-mag-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: .58;
 transition: opacity .3s;
}
.tnb-mag-main:hover .tnb-mag-img img { opacity: .45; }

.tnb-mag-overlay {
 position: absolute;
 bottom: 0; left: 0; right: 0;
 padding: 28px 24px;
 background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.3) 65%, transparent 100%);
 color: var(--c-white);
}
.tnb-mag-overlay .tnb-pill { margin-bottom: 10px; }
.tnb-mag-overlay h2 {
 font-size: clamp(1.1rem, 2.2vw, 1.55rem);
 color: var(--c-white);
 letter-spacing: -.02em;
 line-height: 1.2;
}
.tnb-mag-overlay h2 a { color: inherit; }
.tnb-mag-overlay h2 a:hover { color: var(--c-light); }
.tnb-mag-overlay .tnb-meta { color: rgba(255,255,255,.55); margin-top: 8px; }

.tnb-mag-side {
 background: var(--c-white);
 border: 1px solid var(--c-border);
 border-radius: var(--r-lg);
 overflow: hidden;
}
.tnb-mag-side-item {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 padding: 14px 16px;
 border-bottom: 1px solid var(--c-border);
 transition: background var(--tr);
}
.tnb-mag-side-item:last-child { border-bottom: none; }
.tnb-mag-side-item:hover { background: var(--c-bg); }

.tnb-mag-side-thumb {
 flex-shrink: 0;
 width: 80px;
 height: 58px;
 border-radius: var(--r);
 overflow: hidden;
 background: var(--c-border);
}
.tnb-mag-side-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.tnb-mag-side-body { flex: 1; min-width: 0; }
.tnb-mag-side-body .tnb-pill { margin-bottom: 4px; }
.tnb-mag-side-body h4 {
 font-size: .83rem;
 line-height: 1.3;
}
.tnb-mag-side-body h4 a { color: var(--c-black); transition: color var(--tr); }
.tnb-mag-side-body h4 a:hover { color: var(--c-accent); }

/* ═══════════════════════════════════════════════════════
   LAYOUT — SPOTLIGHT
   Big hero card on top.  Smaller cards in a row below.
═══════════════════════════════════════════════════════ */
.tnb-spotlight { }

.tnb-spotlight-hero { margin-bottom: 20px; }

.tnb-spotlight-img {
 position: relative;
 border-radius: var(--r-lg);
 overflow: hidden;
 background: var(--c-black);
 aspect-ratio: 21/9;
}
.tnb-spotlight-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: .55;
 transition: opacity .3s;
}
.tnb-spotlight-hero:hover .tnb-spotlight-img img { opacity: .42; }

.tnb-spotlight-overlay {
 position: absolute;
 bottom: 0; left: 0; right: 0;
 padding: 40px 48px;
 background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.3) 65%, transparent 100%);
 color: var(--c-white);
}
.tnb-spotlight-overlay .tnb-pill { margin-bottom: 12px; }
.tnb-spotlight-overlay h2 {
 font-size: clamp(1.4rem, 3vw, 2.2rem);
 color: var(--c-white);
 letter-spacing: -.03em;
 line-height: 1.18;
 max-width: 760px;
}
.tnb-spotlight-overlay h2 a { color: inherit; }
.tnb-spotlight-overlay h2 a:hover { opacity: .85; }
.tnb-spotlight-overlay .tnb-meta { color: rgba(255,255,255,.55); margin-top: 8px; }

.tnb-spotlight-ex {
 font-size: .88rem;
 color: rgba(255,255,255,.75);
 line-height: 1.6;
 margin-top: 12px;
 max-width: 600px;
}

.tnb-spotlight-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

.tnb-spotlight-card {
 background: var(--c-white);
 border-radius: var(--r-lg);
 overflow: hidden;
 border: 1px solid var(--c-border);
 transition: transform var(--tr), box-shadow var(--tr);
}
.tnb-spotlight-card:hover {
 transform: translateY(-3px);
 box-shadow: var(--sh-md);
}

.tnb-spotlight-card-img {
 position: relative;
 overflow: hidden;
 aspect-ratio: 4/3;
 background: var(--c-border);
}
.tnb-spotlight-card-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform .35s ease;
}
.tnb-spotlight-card:hover .tnb-spotlight-card-img img { transform: scale(1.06); }

.tnb-spotlight-card-body {
 padding: 14px 16px 18px;
}
.tnb-spotlight-card-body .tnb-pill { margin-bottom: 6px; }
.tnb-spotlight-card-body h3 {
 font-size: .88rem;
 line-height: 1.3;
}
.tnb-spotlight-card-body h3 a { color: var(--c-black); transition: color var(--tr); }
.tnb-spotlight-card-body h3 a:hover { color: var(--c-accent); }

/* ═══════════════════════════════════════════════════════
   LAYOUT — MOSAIC
   First item spans 2 rows.  All items are photo tiles
   with dark gradient overlays.
═══════════════════════════════════════════════════════ */
.tnb-mosaic {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-auto-rows: 220px;
 gap: 10px;
}

.tnb-mosaic-item {
 position: relative;
 overflow: hidden;
 border-radius: var(--r-lg);
 background: var(--c-dark2);
 cursor: pointer;
}
.tnb-mosaic-item--hero {
 grid-column: 1 / 3;
 grid-row: 1 / 3;
}

.tnb-mosaic-item img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: .65;
 transition: transform .4s ease, opacity .3s;
}
.tnb-mosaic-item:hover img {
 transform: scale(1.06);
 opacity: .5;
}

.tnb-mosaic-overlay {
 position: absolute;
 bottom: 0; left: 0; right: 0;
 padding: 18px 18px 20px;
 background: linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 100%);
 color: var(--c-white);
}
.tnb-mosaic-item--hero .tnb-mosaic-overlay { padding: 32px 28px 36px; }

.tnb-mosaic-overlay .tnb-pill { margin-bottom: 8px; }
.tnb-mosaic-overlay h3 {
 color: var(--c-white);
 font-size: .9rem;
 line-height: 1.25;
}
.tnb-mosaic-item--hero .tnb-mosaic-overlay h3 {
 font-size: clamp(1.1rem, 2vw, 1.5rem);
 letter-spacing: -.02em;
}
.tnb-mosaic-overlay h3 a { color: inherit; }
.tnb-mosaic-overlay h3 a:hover { opacity: .85; }
.tnb-mosaic-overlay .tnb-meta { color: rgba(255,255,255,.5); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════
   TICKER
═══════════════════════════════════════════════════════ */
.tnb-ticker {
 background: var(--c-accent);
 color: var(--c-white);
 display: flex;
 align-items: center;
 overflow: hidden;
 padding: 0;
 border-radius: var(--r);
}

/* label top / bottom: stack vertically */
.tnb-ticker--label-top,
.tnb-ticker--label-bottom {
 flex-direction: column;
 align-items: stretch;
 overflow: visible;
}
.tnb-ticker--label-top .tnb-ticker-label,
.tnb-ticker--label-bottom .tnb-ticker-label {
 border-radius: 0;
 text-align: center;
 width: 100%;
 padding: 6px 18px;
}
.tnb-ticker--label-top .tnb-ticker-label {
 border-radius: var(--r) var(--r) 0 0;
}
.tnb-ticker--label-bottom .tnb-ticker-label {
 border-radius: 0 0 var(--r) var(--r);
 order: 2;
}
.tnb-ticker--label-top .tnb-ticker-wrap,
.tnb-ticker--label-bottom .tnb-ticker-wrap {
 overflow: hidden;
}

/* label right */
.tnb-ticker--label-right .tnb-ticker-label {
 order: 2;
 border-radius: 0 var(--r) var(--r) 0;
}

.tnb-ticker-label {
 flex-shrink: 0;
 background: var(--c-black);
 color: var(--c-white);
 font-size: .7rem;
 font-weight: 700;
 letter-spacing: .12em;
 text-transform: uppercase;
 padding: 9px 18px;
 white-space: nowrap;
 border-radius: var(--r) 0 0 var(--r); /* default: left */
}

.tnb-ticker-wrap {
 flex: 1;
 overflow: hidden;
 padding: 9px 16px;
}

.tnb-ticker-track {
 display: flex;
 gap: 0;
 white-space: nowrap;
 animation: tnb-scroll linear infinite;
 will-change: transform;
}

.tnb-ticker-track a {
 color: var(--c-white);
 font-size: .78rem;
 font-weight: 600;
 transition: opacity .15s;
}
.tnb-ticker-track a:hover { opacity: .75; }

.tnb-ticker-sep {
 margin: 0 20px;
 color: rgba(255,255,255,.4);
 font-size: .65rem;
}

@keyframes tnb-scroll {
 from { transform: translateX(0); }
 to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
 .tnb-grid-4 { grid-template-columns: repeat(3, 1fr); }
 .tnb-magazine { grid-template-columns: 1fr 280px; }
 .tnb-mosaic { grid-auto-rows: 180px; }
}

@media (max-width: 768px) {
 .tnb-grid-3,
 .tnb-grid-4 { grid-template-columns: repeat(2, 1fr); }

 .tnb-magazine { grid-template-columns: 1fr; }
 .tnb-mag-img  { aspect-ratio: 16/9; }

 .tnb-spotlight-img    { aspect-ratio: 16/9; }
 .tnb-spotlight-overlay { padding: 24px 20px; }
 .tnb-spotlight-grid    { grid-template-columns: repeat(2, 1fr); }

 .tnb-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
 .tnb-mosaic-item--hero { grid-column: 1 / 3; grid-row: 1 / 2; }
}

@media (max-width: 540px) {
 .tnb-grid-2,
 .tnb-grid-3,
 .tnb-grid-4 { grid-template-columns: 1fr; }

 .tnb-spotlight-grid { grid-template-columns: 1fr; }

 .tnb-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
 .tnb-mosaic-item { height: 220px; }
 .tnb-mosaic-item--hero { grid-column: 1; grid-row: auto; height: 280px; }

 .tnb-spotlight-overlay { padding: 20px 16px; }
}

/* ═══════════════════════════════════════════════════════
   GALLERY
═══════════════════════════════════════════════════════ */
.tnb-gallery {
 display: grid;
 gap: 4px;
}
.tnb-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.tnb-gallery-3 { grid-template-columns: repeat(3, 1fr); }
.tnb-gallery-4 { grid-template-columns: repeat(4, 1fr); }
.tnb-gallery-5 { grid-template-columns: repeat(5, 1fr); }

/* ── Layout variants ──────────────────────────────── */

/* Mosaic: magazine-style — every 5th item is a hero 2×2 tile */
.tnb-gallery--mosaic {
 grid-template-columns: repeat(4, 1fr) !important;
 grid-auto-rows: 160px;
}
.tnb-gallery--mosaic .tnb-gallery-item { border-radius: 0; }
.tnb-gallery--mosaic .tnb-gallery-item:nth-child(5n+1) {
 grid-column: span 2;
 grid-row: span 2;
}
.tnb-gallery--mosaic .tnb-gallery-item img { aspect-ratio: unset; height: 100%; }

/* Masonry: Pinterest-style — images keep natural height */
.tnb-gallery--masonry {
 display: block !important;
 columns: var(--tnb-cols, 3);
 column-gap: 4px;
}
.tnb-gallery--masonry .tnb-gallery-item {
 break-inside: avoid;
 page-break-inside: avoid;
 margin-bottom: 4px;
 border-radius: 4px;
 overflow: hidden;
}
.tnb-gallery--masonry .tnb-gallery-item img {
 aspect-ratio: unset !important;
 height: auto !important;
 width: 100%;
}

/* Justified: flex rows — images fill each row at consistent height */
.tnb-gallery--justified {
 display: flex !important;
 flex-wrap: wrap;
 align-items: flex-start;
}
.tnb-gallery--justified .tnb-gallery-item {
 flex: 1 1 calc(100% / var(--tnb-cols, 3) - 8px);
 min-width: 120px;
 height: 200px;
}
.tnb-gallery--justified .tnb-gallery-item img {
 aspect-ratio: unset !important;
 height: 100% !important;
 width: 100%;
}

/* Hidden items for "View More" — still in DOM for the modal */
.tnb-gallery-item--hidden { display: none !important; }

/* View More button */
.tnb-gallery-viewmore {
 text-align: center;
 padding: 20px 0 4px;
}
.tnb-gallery-viewmore-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 11px 32px;
 background: #0d0d0d;
 color: #fff;
 font-size: .78rem;
 font-weight: 700;
 letter-spacing: .12em;
 text-transform: uppercase;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 transition: background .2s, transform .15s;
}
.tnb-gallery-viewmore-btn:hover { background: #e63946; transform: translateY(-1px); }
.tnb-viewmore-count { opacity: .65; font-weight: 400; letter-spacing: 0; font-size: .9em; }

/* ─ Gallery preview modal ────────────────────────── */
.tnb-galmodal {
 position: fixed;
 inset: 0;
 z-index: 9990;
 background: rgba(5,5,5,.96);
 display: flex;
 flex-direction: column;
 opacity: 0;
 pointer-events: none;
 transition: opacity .25s;
}
.tnb-galmodal.is-open {
 opacity: 1;
 pointer-events: all;
}
.tnb-galmodal-header {
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 16px 24px;
 border-bottom: 1px solid rgba(255,255,255,.08);
}
.tnb-galmodal-title {
 font-size: .8rem;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: rgba(255,255,255,.6);
}
.tnb-galmodal-close {
 background: none;
 border: none;
 color: rgba(255,255,255,.5);
 font-size: 1.6rem;
 cursor: pointer;
 line-height: 1;
 padding: 4px 8px;
 transition: color .15s;
}
.tnb-galmodal-close:hover { color: #fff; }
.tnb-galmodal-body {
 flex: 1;
 overflow-y: auto;
 padding: 20px 24px 32px;
}
.tnb-galmodal-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 gap: 6px;
}
.tnb-galmodal-item {
 position: relative;
 overflow: hidden;
 border-radius: 3px;
 background: #1a1a1a;
 cursor: zoom-in;
}
.tnb-galmodal-item img {
 width: 100%;
 aspect-ratio: 1 / 1;
 object-fit: cover;
 display: block;
 pointer-events: none;
 transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.tnb-galmodal-item:hover img { transform: scale(1.06); }
.tnb-galmodal-item::after {
 content: '';
 position: absolute;
 inset: 0;
 background: rgba(0,0,0,0);
 transition: background .25s;
}
.tnb-galmodal-item:hover::after { background: rgba(0,0,0,.18); }

.tnb-gallery-item {
 position: relative;
 overflow: hidden;
 border-radius: 0;
 background: #0d0d0d;
}

.tnb-gallery-item img {
 width: 100%;
 aspect-ratio: 1 / 1;
 object-fit: cover;
 display: block;
 pointer-events: none; /* clicks pass through to the <a> wrapper */
 transition: transform .55s cubic-bezier(.25,.46,.45,.94);
 will-change: transform;
}
.tnb-gallery-item:hover img { transform: scale(1.07); }

.tnb-gallery-link {
 display: block;
 position: relative;
 overflow: hidden;
 cursor: zoom-in;
}

/* Gradient overlay — pseudo-element of <a>, so clicking it always fires the link */
.tnb-gallery-link::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: 1;
 background: linear-gradient(
  to bottom,
  rgba(0,0,0,.04) 0%,
  rgba(0,0,0,0) 30%,
  rgba(0,0,0,.72) 100%
 );
 opacity: 0;
 transition: opacity .32s ease;
}
.tnb-gallery-item:hover .tnb-gallery-link::before { opacity: 1; }

/* Zoom circle — pseudo-element of <a>, click-safe */
.tnb-gallery-link::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 2;
 width: 44px;
 height: 44px;
 border: 2px solid rgba(255,255,255,.85);
 border-radius: 50%;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: center;
 transform: translate(-50%,-50%) scale(.65);
 opacity: 0;
 transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.tnb-gallery-item:hover .tnb-gallery-link::after {
 opacity: 1;
 transform: translate(-50%,-50%) scale(1);
}

/* Caption — inside the <a>, slides up on hover */
.tnb-gallery-caption {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 3;
 padding: 8px 14px 12px;
 font-size: .72rem;
 color: rgba(255,255,255,.9);
 text-align: center;
 letter-spacing: .02em;
 line-height: 1.4;
 transform: translateY(5px);
 opacity: 0;
 transition: transform .3s ease, opacity .3s ease;
 pointer-events: none;
}
.tnb-gallery-item:hover .tnb-gallery-caption {
 opacity: 1;
 transform: translateY(0);
}

.tnb-gallery-cap { display: none; }

/* Round the whole grid, not individual tiles */
.tnb-gallery { border-radius: 8px; overflow: hidden; }

/* ── Lightbox ─────────────────────────────────────── */
.tnb-lb-overlay {
 position: fixed;
 inset: 0;
 z-index: 9999;
 background: rgba(5,5,5,.96);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 opacity: 0;
 pointer-events: none;
 transition: opacity .22s;
}
.tnb-lb-overlay.is-open {
 opacity: 1;
 pointer-events: all;
}
.tnb-lb-img {
 max-width: min(90vw, 1100px);
 max-height: 82vh;
 object-fit: contain;
 border-radius: 3px;
 box-shadow: 0 32px 100px rgba(0,0,0,.8);
 transition: opacity .18s;
}
/* Caption + counter row */
.tnb-lb-meta {
 margin-top: 18px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 5px;
 min-height: 40px;
}
.tnb-lb-counter {
 font-size: .68rem;
 font-family: var(--ff-body);
 color: rgba(255,255,255,.35);
 letter-spacing: .14em;
 text-transform: uppercase;
}
.tnb-lb-caption {
 font-size: .82rem;
 font-family: var(--ff-body);
 color: rgba(255,255,255,.7);
 text-align: center;
 max-width: 560px;
 line-height: 1.5;
 font-style: italic;
}
.tnb-lb-close {
 position: absolute;
 top: 20px;
 right: 24px;
 color: rgba(255,255,255,.5);
 font-size: 1.6rem;
 background: none;
 border: none;
 cursor: pointer;
 line-height: 1;
 padding: 4px 8px;
 transition: color .15s;
}
.tnb-lb-close:hover { color: #fff; }
.tnb-lb-prev,
.tnb-lb-next {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(255,255,255,.08);
 border: 1px solid rgba(255,255,255,.15);
 color: rgba(255,255,255,.75);
 width: 50px;
 height: 50px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.2rem;
 cursor: pointer;
 transition: background .2s, color .2s;
}
.tnb-lb-prev { left: 24px; }
.tnb-lb-next { right: 24px; }
.tnb-lb-prev:hover, .tnb-lb-next:hover { background: rgba(255,255,255,.2); color: #fff; }

@media (max-width: 768px) {
 .tnb-gallery-4, .tnb-gallery-5 { grid-template-columns: repeat(3, 1fr); }
 .tnb-lb-prev { left: 10px; }
 .tnb-lb-next { right: 10px; }
}
@media (max-width: 540px) {
 .tnb-gallery-3,
 .tnb-gallery-4,
 .tnb-gallery-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════
   DOWNLOADS
═══════════════════════════════════════════════════════ */
.tnb-downloads {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.tnb-dl-item {
 display: flex;
 align-items: center;
 gap: 16px;
 background: var(--c-white);
 border: 1px solid var(--c-border);
 border-radius: var(--r-lg);
 padding: 14px 18px;
 transition: box-shadow var(--tr);
}
.tnb-dl-item:hover { box-shadow: var(--sh); }

.tnb-dl-icon {
 flex-shrink: 0;
 width: 46px;
 height: 46px;
 border-radius: var(--r);
 background: var(--c-dark2);
 color: var(--c-white);
 font-size: .6rem;
 font-weight: 700;
 letter-spacing: .06em;
 display: flex;
 align-items: center;
 justify-content: center;
 text-transform: uppercase;
}
.tnb-dl-icon--pdf  { background: #d62828; }
.tnb-dl-icon--doc,
.tnb-dl-icon--docx { background: #1a73e8; }
.tnb-dl-icon--xls,
.tnb-dl-icon--xlsx { background: #1e8e3e; }
.tnb-dl-icon--ppt,
.tnb-dl-icon--pptx { background: #e65100; }
.tnb-dl-icon--zip  { background: #6a1b9a; }

.tnb-dl-body { flex: 1; min-width: 0; }
.tnb-dl-name {
 font-size: .9rem;
 font-weight: 700;
 color: var(--c-black);
 line-height: 1.3;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.tnb-dl-meta {
 font-size: .7rem;
 color: var(--c-muted);
 margin-top: 3px;
 display: flex;
 gap: 12px;
}
.tnb-dl-meta span + span::before { content: '·'; margin-right: 12px; }

.tnb-dl-btn {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 gap: 7px;
 padding: 8px 16px;
 background: var(--c-black);
 color: #fff !important;
 text-decoration: none !important;
 font-size: .72rem;
 font-weight: 700;
 letter-spacing: .07em;
 text-transform: uppercase;
 border-radius: var(--r);
 white-space: nowrap;
 transition: background var(--tr);
}
.tnb-dl-btn:hover { background: var(--c-accent); }
.tnb-dl-btn svg {
 width: 14px;
 height: 14px;
 flex-shrink: 0;
}

@media (max-width: 540px) {
 .tnb-dl-item { flex-wrap: wrap; }
 .tnb-dl-btn  { width: 100%; justify-content: center; }
}