/* =============================================================================
   Estilos Compartilhados — Notícias e Escolas
   Rede de Bibliotecas de Barcelos
   ============================================================================= */

   @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@200;300;400;500;600;700;800&display=swap');

   /* ─── Reset container Blocksy ──────────────────────────────────────────────── */
   
   /* ─── Arquivo — Listagem em Grelha ────────────────────────────────────────── */
   
   .nl-page {
       min-height: 100vh;
       padding-bottom: 80px;
   }
   
   /* ─── Cabeçalho ────────────────────────────────────────────────────────────── */
   
   .nl-header {
       max-width: 1400px;
       margin: 0 auto;
       padding: 52px 40px 36px;
       display: flex;
       align-items: baseline;
       gap: 16px;
   }
   
   .nl-heading {
       font-size: clamp(28px, 4vw, 44px);
       font-weight: 800;
       font-family: "Bricolage Grotesque", sans-serif;
       color: #1a1a1a;
       margin: 0;
       letter-spacing: -.02em;
   }
   
   .nl-count {
       font-size: 13px;
       color: #aaa;
       font-family: "Bricolage Grotesque", sans-serif;
       margin: 0;
       white-space: nowrap;
   }
   
   /* ─── Container ────────────────────────────────────────────────────────────── */
   
   .nl-container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 44px 40px 0;
   }
   
   /* ─── Grelha ──────────────────────────────────────────────────────────────── */
   
   .nl-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 15px;
   }
   
   /* ─── Card ────────────────────────────────────────────────────────────────── */
   
   .nl-card {
       overflow: hidden;
       box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
       display: flex;
       flex-direction: column;
       padding: 50px 30px;
       transition: box-shadow .25s, transform .25s;
   }
   
   .nl-card:hover {
       box-shadow: 0 8px 36px rgba(0, 0, 0, .12);
       transform: translateY(-3px);
   }
   
   /* ─── Imagem ──────────────────────────────────────────────────────────────── */
   
   .nl-card__img-wrap {
       display: block;
       position: relative;
       overflow: hidden;
       aspect-ratio: 3 / 2;
       background-color: #d8d2c8;
       text-decoration: none;
   }
   
   .nl-card__img-wrap img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transition: transform .4s ease;
   }
   
   /* ─── Badge de categoria ──────────────────────────────────────────────────── */
   
   .nl-card__badge {
       position: absolute;
       top: 14px;
       left: 14px;
       background: #ED1C24;
       color: #fff;
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: .06em;
       padding: 3px 10px;
       border-radius: 20px;
       line-height: 1.6;
       font-family: "Bricolage Grotesque", sans-serif;
   }
   
   /* ─── Body ────────────────────────────────────────────────────────────────── */
   
   .nl-card__body {
       display: flex;
       padding: 30px 0 0;
       flex-direction: column;
       flex: 1;
   }
   
   /* ─── Meta: data · autor ──────────────────────────────────────────────────── */
   
   .nl-card__meta {
       font-size: 12px;
       color: #333;
       margin-bottom: 25px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 6px;
       font-family: "Bricolage Grotesque", sans-serif;
   }
   
   /* Esconde meta quando vazio (para escolas) */
   .nl-card__meta:empty {
       display: none;
       margin-bottom: 0;
   }
   
   .nl-card__meta-author-wrap {
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .nl-card__meta-dot {
       width: 3px;
       height: 3px;
       border-radius: 50%;
       background: #ccc;
       display: inline-block;
       flex-shrink: 0;
   }
   
   .nl-card__meta .nl-card__author {
       color: #888;
       font-weight: 600;
       text-decoration: none;
       transition: color 0.2s ease;
   }
   
   .nl-card__meta .nl-card__author:hover {
       color: #333;
   }
   
   .nl-card__author {
       font-weight: 600;
       font-size: 10px;
       padding: 3px 15px;
       text-transform: uppercase;
       border: 1px solid;
       border-radius: 12px;
   }
   
   /* ─── Título ──────────────────────────────────────────────────────────────── */
   
   .nl-card__title {
       font-size: 17px;
       font-weight: 700;
       line-height: 1.3;
       margin: 0 0 10px;
       font-family: "Bricolage Grotesque", sans-serif;
   }
   
   .nl-card__title a {
       color: #1a1a1a;
       text-decoration: none;
       transition: color .2s;
   }
   
   .nl-card__title a:hover {
       color: #ED1C24;
   }
   
   /* ─── Excerpt ─────────────────────────────────────────────────────────────── */
   
   .nl-card__excerpt {
       font-size: 14px;
       color: #666;
       line-height: 1.65;
       margin: 0 0 20px;
       font-family: "Bricolage Grotesque", sans-serif;
       flex: 1;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   
   /* ─── Link ───────────────────────────────────────────────────────────────── */
   
   .nl-card__link {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       font-size: 12px;
       text-decoration: underline;
       font-weight: 500;
       color: #333;
       text-transform: uppercase;
       font-family: "Bricolage Grotesque", sans-serif;
       transition: color .2s, gap .2s;
       margin-top: auto;
   }
   
   .nl-card__link:hover {
       color: #C4161C;
       gap: 8px;
   }
   
   /* ─── Empty state ─────────────────────────────────────────────────────────── */
   
   .nl-empty {
       text-align: center;
       padding: 80px 20px;
       font-family: "Bricolage Grotesque", sans-serif;
       color: #aaa;
       font-size: 16px;
   }
   
   /* ─── Paginação ──────────────────────────────────────────────────────────── */
   
   .nl-pagination {
       margin-top: 52px;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 6px;
       flex-wrap: wrap;
   }
   
   .nl-pagination .page-numbers {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 40px;
       height: 40px;
       padding: 0 8px;
       border-radius: 8px;
       font-size: 14px;
       font-weight: 600;
       font-family: "Bricolage Grotesque", sans-serif;
       color: #555;
       background: #fff;
       text-decoration: none;
       border: 1px solid #ddd8d0;
       transition: background .2s, color .2s, border-color .2s;
       line-height: 1;
   }
   
   .nl-pagination .page-numbers:hover {
       background: #ED1C24;
       color: #fff;
       border-color: #ED1C24;
   }
   
   .nl-pagination .page-numbers.current {
       background: #1a1a1a;
       color: #fff;
       border-color: #1a1a1a;
   }
   
   .nl-pagination .page-numbers.dots {
       background: none;
       border: none;
       color: #bbb;
       pointer-events: none;
   }
   
   /* ─── Single Page ─────────────────────────────────────────────────────────── */
   
   .noticia-single-page {
       min-height: 100vh;
       padding-bottom: 100px;
   }
   
   /* ─── Top Bar ────────────────────────────────────────────────────────────── */
   
   .ns-top-bar {
       max-width: 1400px;
       margin: 0 auto;
       padding: 40px 0 20px;
   }
   
   .ns-back {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-size: 12px;
       font-weight: 700;
       color: #ED1C24;
       text-decoration: none;
       text-transform: uppercase;
       letter-spacing: .07em;
       transition: color .2s;
       font-family: "Bricolage Grotesque", sans-serif;
   }
   
   .ns-back:hover {
       color: #C4161C;
   }
   
   .ns-back svg {
       width: 16px;
       height: 16px;
   }
   
   /* ─── Hero ───────────────────────────────────────────────────────────────── */
   
   .ns-hero {
       width: calc(100% - 80px);
       border-radius: 8px;
       max-width: 1400px;
       margin: 0 auto;
       overflow: hidden;
       height: 700px;
       position: relative;
   }
   
   .ns-hero img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }
   
   .ns-hero__badge {
       position: absolute;
       top: 24px;
       right: 24px;
       background: #ED1C24;
       color: #fff;
       font-size: 12px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: .06em;
       padding: 6px 14px;
       border-radius: 20px;
       line-height: 1.5;
       font-family: "Bricolage Grotesque", sans-serif;
       z-index: 1;
       box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
   }
   
   /* ─── Card Outer ────────────────────────────────────────────────────────── */
   
   .ns-card-outer {
       position: relative;
       z-index: 2;
       margin-top: -200px;
       padding: 0 40px;
   }
   
   .noticia-single-page:not(.has-hero) .ns-card-outer {
       margin-top: 0;
       padding-top: 0;
   }
   
   /* ─── Card ──────────────────────────────────────────────────────────────── */
   
   .ns-card {
       max-width: 1100px;
       margin: 0 auto;
       border-radius: 8px;
       background: #F6F4F0;
       padding: 52px 56px 60px;
   }
   
   @media (max-width: 600px) {
       .ns-card {
           background: transparent;
           box-shadow: none;
       }
   }
   
   /* ─── Meta Top Mobile ───────────────────────────────────────────────────── */
   
   .ns-meta-top-mobile {
       display: none;
   }
   
   @media (max-width: 600px) {
       .ns-meta-top-mobile {
           display: flex;
           align-items: center;
           gap: 8px;
           margin-bottom: 12px;
           font-family: "Bricolage Grotesque", sans-serif;
           font-size: 13px;
       }
   
       .ns-meta-top-mobile__category {
           color: #ED1C24;
           font-weight: 600;
       }
   
       .ns-meta-top-mobile__separator {
           color: #ccc;
       }
   
       .ns-meta-top-mobile__read-time {
           color: #999;
           font-weight: 500;
       }
   }
   
   /* ─── Author Date Mobile ──────────────────────────────────────────────── */
   
   .ns-author-date-mobile {
       display: none;
   }
   
   @media (max-width: 600px) {
       .ns-author-date-mobile {
           display: flex;
           align-items: center;
           justify-content: space-between;
           margin-bottom: 20px;
           font-family: "Bricolage Grotesque", sans-serif;
           font-size: 14px;
       }
   
       .ns-author-date-mobile__author {
           font-weight: 600;
           color: #1a1a1a;
       }
   
       .ns-author-date-mobile__date {
           color: #999;
           font-weight: 500;
       }
   }
   
   /* ─── Featured Image Mobile ────────────────────────────────────────────── */
   
   .ns-featured-image-mobile {
       display: none;
   }
   
   @media (max-width: 600px) {
       .ns-featured-image-mobile {
           display: block;
           margin-bottom: 24px;
           border-radius: 12px;
           overflow: hidden;
           background: #f0f0f0;
       }
   
       .ns-featured-image-mobile img {
           width: 100%;
           height: auto;
           display: block;
       }
   }
   
   /* ─── Meta ──────────────────────────────────────────────────────────────── */
   
   .ns-meta {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 10px;
       margin-bottom: 18px;
       font-family: "Bricolage Grotesque", sans-serif;
       font-size: 13px;
   }
   
   @media (max-width: 600px) {
       .ns-meta {
           display: none;
       }
   }
   
   .ns-meta__date {
       color: #999;
       font-weight: 500;
   }
   
   .ns-meta__dot {
       width: 4px;
       height: 4px;
       border-radius: 50%;
       background: #ccc;
       display: inline-block;
       flex-shrink: 0;
   }
   
   .ns-meta__author {
       color: #555;
       font-weight: 600;
   }
   
   .ns-meta__cat {
       background: #ED1C24;
       color: #fff;
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: .06em;
       padding: 3px 11px;
       border-radius: 20px;
       line-height: 1.6;
   }
   
   /* ─── Title ────────────────────────────────────────────────────────────── */
   
   .ns-title {
       font-size: clamp(26px, 4vw, 44px);
       font-weight: 800;
       line-height: 1.12;
       margin: 0 0 32px;
       font-family: "Bricolage Grotesque", sans-serif;
       letter-spacing: -.02em;
       color: #1a1a1a;
   }
   
   /* ─── Content ───────────────────────────────────────────────────────────── */
   
   .ns-content {
       font-size: 16px;
       line-height: 1.8;
       color: #444;
       font-family: "Bricolage Grotesque", sans-serif;
       padding-top: 28px;
       border-top: 1px solid #f0ebe2;
   }
   
   .ns-content p          { margin-bottom: 1.2em; }
   .ns-content a          { color: #ED1C24; }
   .ns-content strong     { color: #1a1a1a; }
   .ns-content ul,
   .ns-content ol         { padding-left: 20px; margin-bottom: 1.2em; }
   
   /* ─── Section ──────────────────────────────────────────────────────────── */
   
   .ns-section {
       border-top: 1px solid #f0ebe2;
       padding-top: 32px;
       margin-top: 32px;
   }
   
   .ns-section-title {
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: .1em;
       color: #bbb;
       margin: 0 0 18px;
       display: flex;
       align-items: center;
       gap: 8px;
       font-family: "Bricolage Grotesque", sans-serif;
   }
   
   /* ─── Media Content ────────────────────────────────────────────────────── */
   
   .ns-media-content {
       display: flex;
       flex-direction: column;
       gap: 32px;
   }
   
   .ns-media-subsection {
       display: flex;
       flex-direction: column;
       gap: 16px;
   }
   
.ns-media-subsection-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin: 0;
    font-family: "Bricolage Grotesque", sans-serif;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e3db;
}

/* ─── Contact Info (para escolas) ──────────────────────────────────────────── */

.ns-map-container {
    margin-top: 1rem;
}

.ns-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ns-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: #333;
}

.ns-contact-item svg {
    width: 18px;
    height: 18px;
    color: #ED1C24;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.ns-contact-item span {
    color: #333;
    margin-right: 0.25rem;
}

.ns-contact-item a {
    color: #333;
    text-decoration: none;
}

.ns-contact-item a:hover {
    color: #C4161C;
    text-decoration: underline;
}
   
   /* ─── Responsive ──────────────────────────────────────────────────────── */
   
   @media (max-width: 960px) {
       .nl-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 20px;
       }
   
       .nl-header,
       .nl-container {
           padding-left: 24px;
           padding-right: 24px;
       }
   }
   
   @media (max-width: 900px) {
       .ns-hero {
           width: calc(100% - 48px);
           height: 380px;
       }
   
       .ns-card-outer {
           padding: 0 24px;
       }
   
       .ns-card {
           padding: 36px 36px 48px;
       }
   }
   
   @media (max-width: 600px) {
       .nl-grid {
           grid-template-columns: 1fr;
           gap: 16px;
       }
   
       .nl-header {
           padding: 32px 20px 0;
           flex-wrap: wrap;
           gap: 15px;
       }
   
       .nl-container {
           padding: 28px 20px 0;
       }
   
       .nl-pagination {
           margin-top: 36px;
           gap: 4px;
       }
   
       .nl-pagination .page-numbers {
           min-width: 36px;
           height: 36px;
           font-size: 13px;
       }
   
       .ns-top-bar {
           padding: 20px 16px 16px;
           background: #f5f5f5;
       }
   
       .ns-hero {
           display: none !important;
       }
   
       .ns-card-outer {
           margin-top: 0 !important;
           padding: 0;
       }
   
       .ns-card {
           max-width: 100%;
           margin: 0;
           border-radius: 0;
           padding: 24px 20px 32px;
       }
   
       .ns-title {
           font-size: 24px;
           line-height: 1.2;
           margin-bottom: 16px;
       }
   
       .ns-content {
           padding-top: 20px;
           margin-top: 20px;
           border-top: 1px solid #f0ebe2;
       }
   
       .ns-media-content {
           gap: 20px;
       }
   }