.content-hub-page {
   --content-surface: #ffffff;
   --content-surface-soft: #f4f8fc;
   --content-border: rgba(31, 78, 121, 0.16);
   --content-text: #18334d;
   --content-muted: #60758a;
   --content-blue: #0b74d1;
   --content-cyan: #09a7c7;
   background: var(--content-surface-soft);
   color: var(--content-text);
}

.content-preview-banner {
   position: relative;
   z-index: 100;
   padding: 10px 20px;
   background: #fbbf24;
   color: #422006;
   font-weight: 800;
   text-align: center;
}

.content-hub-hero {
   position: relative;
   overflow: hidden;
}

.content-hub-hero-media,
.content-hub-hero-picture,
.content-hub-hero-overlay {
   position: absolute;
   inset: 0;
}

.content-hub-hero-media {
   background-position: center;
   background-size: cover;
   transform: scale(1.02);
}

.content-hub-hero-picture img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.content-hub-hero-overlay {
   background:
      linear-gradient(110deg, rgba(5, 18, 35, 0.95) 0%, rgba(8, 35, 62, 0.84) 52%, rgba(8, 46, 75, 0.62) 100%),
      linear-gradient(0deg, rgba(4, 19, 33, 0.35), rgba(4, 19, 33, 0.35));
}

.content-hub-hero-content {
   position: relative;
   z-index: 2;
   color: #ffffff;
}

.content-hub-hero-content h1 {
   max-width: 1040px;
   margin-bottom: 18px;
}

.content-hub-hero-content > p {
   max-width: 820px;
   margin: 0;
   color: rgba(255, 255, 255, 0.86);
   font-size: clamp(1rem, 1.6vw, 1.2rem);
   line-height: 1.8;
}

.content-hub-hero .breadcrumb-item,
.content-hub-hero .breadcrumb-item a {
   color: rgba(255, 255, 255, 0.78);
}

.content-hub-hero .breadcrumb-item.active {
   color: #ffffff;
}

.content-list-section {
   background:
      radial-gradient(circle at top right, rgba(9, 167, 199, 0.08), transparent 34%),
      var(--content-surface-soft);
}

.content-list-card {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
   border: 1px solid var(--content-border);
   border-radius: 18px;
   background: var(--content-surface);
   box-shadow: 0 16px 42px rgba(18, 52, 80, 0.08);
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.content-list-card:hover {
   transform: translateY(-6px);
   border-color: rgba(11, 116, 209, 0.34);
   box-shadow: 0 24px 54px rgba(18, 52, 80, 0.15);
}

.content-list-card-image {
   display: block;
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background: #dce8f1;
}

.content-list-card-image picture,
.content-list-card-image img {
   display: block;
   width: 100%;
   height: 100%;
}

.content-list-card-image img {
   object-fit: cover;
   transition: transform 0.45s ease;
}

.content-list-card:hover .content-list-card-image img {
   transform: scale(1.045);
}

.content-list-card-body {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 24px;
}

.content-list-card-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 12px;
   margin-bottom: 14px;
   color: var(--content-blue);
   font-size: 0.82rem;
   font-weight: 700;
}

.content-list-card-meta span + span::before,
.content-list-card-meta span + time::before,
.content-list-card-meta time + time::before {
   content: "•";
   margin-right: 12px;
   color: #8da0b1;
}

.content-list-card h3 {
   margin-bottom: 12px;
   font-size: 1.2rem;
   line-height: 1.45;
}

.content-list-card h3 a {
   color: var(--content-text);
   text-decoration: none;
}

.content-list-card p {
   display: -webkit-box;
   margin-bottom: 20px;
   overflow: hidden;
   color: var(--content-muted);
   line-height: 1.7;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

.content-card-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: auto;
   color: var(--content-blue);
   font-weight: 700;
   text-decoration: none;
}

.content-card-link:hover,
.content-card-link:focus-visible {
   color: #075ca9;
}

.content-empty-state {
   max-width: 760px;
   margin: 0 auto;
   padding: 54px 30px;
   border: 1px dashed rgba(11, 116, 209, 0.34);
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.8);
   text-align: center;
}

.content-empty-state h3 {
   color: var(--content-text);
}

.content-empty-state p {
   margin: 0;
   color: var(--content-muted);
}

.content-pagination {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   margin-top: 48px;
}

.content-pagination a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   min-height: 44px;
   border: 1px solid var(--content-border);
   border-radius: 12px;
   background: #ffffff;
   color: var(--content-text);
   font-weight: 700;
   text-decoration: none;
}

.content-pagination a:hover,
.content-pagination a:focus-visible,
.content-pagination a.active {
   border-color: transparent;
   background: linear-gradient(135deg, var(--content-blue), var(--content-cyan));
   color: #ffffff;
}

.content-detail-summary {
   background: var(--content-surface-soft);
}

.content-fact-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 16px;
   max-width: 1060px;
   margin: -70px auto 58px;
   position: relative;
   z-index: 3;
}

.content-fact-grid > div {
   min-width: 0;
   padding: 22px;
   border: 1px solid var(--content-border);
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 14px 36px rgba(18, 52, 80, 0.12);
}

.content-fact-grid span {
   display: block;
   margin-bottom: 7px;
   color: var(--content-muted);
   font-size: 0.82rem;
}

.content-fact-grid strong {
   display: block;
   color: var(--content-text);
   font-size: 1.05rem;
   line-height: 1.5;
}

.content-publish-meta {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px 22px;
   max-width: 900px;
   margin: 0 auto 18px;
   color: var(--content-muted);
}

.content-publish-meta span {
   color: var(--content-blue);
   font-weight: 700;
}

.content-tag-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   margin: 0 auto 42px;
   padding: 0;
   list-style: none;
}

.content-tag-list li {
   padding: 7px 12px;
   border: 1px solid var(--content-border);
   border-radius: 10px;
   background: #ffffff;
   color: var(--content-text);
   font-size: 0.86rem;
}

.content-detail-body {
   max-width: 920px;
   margin: 0 auto;
   padding: 48px clamp(22px, 5vw, 70px);
   border: 1px solid var(--content-border);
   border-radius: 20px;
   background: #ffffff;
   box-shadow: 0 18px 56px rgba(18, 52, 80, 0.08);
}

.content-block-heading {
   margin: 42px 0 18px;
   color: var(--content-text);
   line-height: 1.35;
}

.content-block-heading:first-child {
   margin-top: 0;
}

.content-block-paragraph,
.content-block-list {
   color: #3e566d;
   font-size: 1.04rem;
   line-height: 1.95;
}

.content-block-list {
   padding-left: 1.4em;
}

.content-block-gallery {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px;
   margin: 34px 0;
}

.content-block-image {
   min-width: 0;
   margin: 0;
   overflow: hidden;
   border-radius: 14px;
   background: #edf4f8;
}

.content-block-image picture,
.content-block-image img {
   display: block;
   width: 100%;
}

.content-block-image img {
   aspect-ratio: 4 / 3;
   object-fit: cover;
}

.content-block-image figcaption {
   padding: 12px 14px 14px;
   color: var(--content-muted);
   font-size: 0.84rem;
   line-height: 1.6;
}

.content-block-callout {
   margin-top: 26px;
   padding: 26px;
   border-left: 4px solid var(--content-cyan);
   border-radius: 0 14px 14px 0;
   background: linear-gradient(135deg, rgba(11, 116, 209, 0.08), rgba(9, 167, 199, 0.08));
}

.content-block-callout h3 {
   color: var(--content-text);
}

.content-block-callout p {
   margin: 0;
   color: #3e566d;
   line-height: 1.85;
}

.content-block-quote {
   margin: 30px 0;
   padding: 28px 30px;
   border-radius: 16px;
   background: #102d47;
   color: #ffffff;
}

.content-block-quote p {
   margin-bottom: 10px;
   font-size: 1.12rem;
   line-height: 1.8;
}

.content-block-quote cite {
   color: rgba(255, 255, 255, 0.7);
}

.content-block-table-wrap {
   margin: 30px 0;
   overflow-x: auto;
}

.content-block-table {
   width: 100%;
   min-width: 580px;
   border-collapse: collapse;
}

.content-block-table th,
.content-block-table td {
   padding: 14px;
   border: 1px solid var(--content-border);
   text-align: left;
}

.content-block-table th {
   background: #eaf3f9;
}

.content-block-video {
   position: relative;
   margin: 30px 0;
   padding-top: 56.25%;
   overflow: hidden;
   border-radius: 16px;
}

.content-block-video iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

.content-related-section {
   background: #ffffff;
}

.content-related-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
   max-width: 1050px;
   margin: 0 auto;
}

.content-related-card {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 6px 16px;
   align-items: center;
   padding: 22px;
   border: 1px solid var(--content-border);
   border-radius: 14px;
   background: var(--content-surface-soft);
   color: var(--content-text);
   text-decoration: none;
   transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.content-related-card span {
   color: var(--content-blue);
   font-size: 0.82rem;
   font-weight: 700;
}

.content-related-card strong {
   grid-column: 1;
   line-height: 1.5;
}

.content-related-card i {
   grid-column: 2;
   grid-row: 1 / span 2;
}

.content-related-card:hover,
.content-related-card:focus-visible {
   transform: translateY(-3px);
   border-color: var(--content-blue);
   background: #ffffff;
}

@media (max-width: 991.98px) {
   .content-fact-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: -45px;
   }

   .content-related-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 639.98px) {
   .content-hub-hero-content h1 {
      font-size: clamp(2rem, 10vw, 3rem);
   }

   .content-fact-grid {
      grid-template-columns: 1fr;
      margin: 0 auto 38px;
   }

   .content-detail-body {
      padding: 32px 20px;
      border-radius: 16px;
   }

   .content-block-gallery,
   .content-related-grid {
      grid-template-columns: 1fr;
   }

   .content-list-card-body {
      padding: 21px;
   }
}