/**
 * natural — Natural Fibers pages (category/fibers.php + article/fiber.php).
 * Recreates the J3 newline "fibers"/"fiber" layouts: centered listing heading,
 * full-bleed image tiles with a dark gradient and an underline "Learn More",
 * image banner + breadcrumb strip + narrow centered prose on the article.
 */

/* ── Listing ─────────────────────────────────────────────────────────────── */
.nc-fibers { padding-block: clamp(3rem, 7vw, 4.5rem) clamp(3.5rem, 8vw, 5rem); }
.nc-fibers-heading { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.nc-fibers-heading h1 { font-size: clamp(2.25rem, 4vw, 2.75rem); text-transform: none; letter-spacing: .02em; color: var(--template-text); margin-bottom: 1.25rem; }
.nc-fibers-intro { max-width: 52rem; margin-inline: auto; font-size: 1.25rem; line-height: 1.6; color: var(--template-text-secondary); }
.nc-fibers-intro p:last-child { margin-bottom: 0; }

.nc-fiber-tile { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 450px; height: 100%; overflow: hidden; border-radius: 4px; color: #fff; text-align: center; text-decoration: none; background: var(--template-accent); transition: transform .4s, box-shadow .4s; }
.nc-fiber-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nc-fiber-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .9)); }
.nc-fiber-tile-body { position: relative; z-index: 1; padding: 2rem 1.375rem 2.6875rem; }
.nc-fiber-tile-title { margin: 1.5rem 0 .9375rem; font-family: var(--font-body); font-size: 2rem; font-weight: 300; line-height: 1; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.nc-fiber-tile-link { position: relative; display: inline-block; padding-bottom: 6px; font-size: .75rem; letter-spacing: 3px; text-transform: uppercase; color: #fff; }
.nc-fiber-tile-link .fa-solid { margin-left: .25rem; font-size: .75rem; }
.nc-fiber-tile-link::before,
.nc-fiber-tile-link::after { content: ""; position: absolute; bottom: 0; height: 2px; }
.nc-fiber-tile-link::before { left: 0; right: 0; background: rgba(255, 255, 255, .2); }
.nc-fiber-tile-link::after { left: 50%; right: 50%; background: var(--template-primary); transition: left .3s ease-out, right .3s ease-out; }

.nc-fiber-tile:hover,
.nc-fiber-tile:focus-visible { color: #fff; transform: translateY(-5px); box-shadow: 0 11px 18px 0 rgba(133, 133, 133, .36); }
.nc-fiber-tile:hover .nc-fiber-tile-link::after,
.nc-fiber-tile:focus-visible .nc-fiber-tile-link::after { left: 0; right: 0; }
.nc-fiber-tile:focus-visible { outline: 3px solid var(--template-primary); outline-offset: 3px; }

/* ── Article ─────────────────────────────────────────────────────────────── */
.nc-fiber-hero { position: relative; display: flex; align-items: center; min-height: 200px; overflow: hidden; isolation: isolate; background: var(--template-accent); color: #fff; text-align: center; }
.nc-fiber-hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.nc-fiber-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .45); }
.nc-fiber-hero-content { padding-block: 2.5rem; }
.nc-fiber-hero h1 { margin-bottom: .75rem; font-family: var(--font-body); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 300; line-height: 1; letter-spacing: 3px; text-transform: uppercase; color: #fff; }
.nc-fiber-hero p { margin: 0; color: #fff; }

.nc-fiber-crumbs { background: var(--template-bg-alt); }
.nc-fiber-crumbs .breadcrumb { margin: 0; padding-block: 1rem; font-size: .75rem; }
.nc-fiber-crumbs .breadcrumb a { color: var(--template-text-body); text-decoration: underline; }

.nc-fiber-article { padding-top: 3.75rem; }
.nc-fiber-body { max-width: 42rem; margin-inline: auto; text-align: center; color: var(--template-text-secondary); }
.nc-fiber-body h2 { margin-bottom: 1.375rem; font-size: clamp(2rem, 4vw, 2.75rem); text-transform: capitalize; color: var(--template-text-secondary); }
.nc-fiber-body h3 { margin: 3.75rem 0 .75rem; font-size: 1.5rem; letter-spacing: .02em; color: var(--template-text-secondary); }
.nc-fiber-body p { margin-bottom: 1.875rem; font-size: 1.125rem; line-height: 1.5; }

.nc-fiber-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.75rem; padding-block: 1.875rem; border-block: 1px solid var(--template-border); }
.nc-fiber-pager a { display: block; color: var(--template-text-body); text-decoration: none; }
.nc-fiber-pager a:hover { color: var(--template-primary); }
.nc-fiber-pager-next { margin-left: auto; text-align: right; }
.nc-fiber-pager-title { display: block; color: var(--template-text); }