/* =============================================================
   SVIGRAD — single post
   ============================================================= */

.post-page {
   background: #ffffff;
   color: #222222;
}

/* HERO */
.post-hero {
   position: relative;
   background: #222222;
   color: #ffffff;
   padding: 220px 0 80px;
   overflow: hidden;
}

.post-hero::after {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(1200px 380px at 78% -10%, rgba(30, 111, 168, .38), transparent 60%);
   pointer-events: none;
}

.post-hero__inner {
   position: relative;
   max-width: 80rem;
   margin-inline: auto;
   padding-inline: 2rem;
}

.post-breadcrumb {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.85rem;
   color: rgba(255,255,255,.55);
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
}

.post-breadcrumb a {
   color: rgba(255,255,255,.7);
   transition: color .2s ease;
}

.post-breadcrumb a:hover { color: #ffffff; }
.post-breadcrumb span[aria-current] { color: rgba(255,255,255,.9); }

.post-eyebrow {
   display: inline-block;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: #7FB8DD;
   margin-bottom: 1rem;
}

.post-hero__title {
   font-size: clamp(2rem, 4.5vw, 3.25rem);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.01em;
   margin-bottom: 1.25rem;
   max-width: 28ch;
}

.post-hero__meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.6rem 1.25rem;
   font-size: 0.95rem;
   color: rgba(255,255,255,.7);
}

.post-hero__meta .dot {
   width: 4px;
   height: 4px;
   border-radius: 9999px;
   background: rgba(255,255,255,.4);
}

/* FEATURED IMAGE */
.post-featured-image {
   background: #f4f5f4;
}

.post-featured-image__inner {
   max-width: 80rem;
   margin-inline: auto;
   padding: 0 2rem;
   transform: translateY(-2.5rem);
}

.post-featured-image__img {
   width: 100%;
   max-height: 520px;
   object-fit: cover;
   border-radius: 0.75rem;
   display: block;
}

/* BODY LAYOUT */
.post-body {
   max-width: 80rem;
   margin-inline: auto;
   padding: 1rem 2rem 5.5rem;
   display: grid;
   grid-template-columns: 1fr;
   gap: 3rem;
}

@media (min-width: 1024px) {
   .post-body {
      grid-template-columns: 1fr 300px;
      gap: 5rem;
      padding-top: 2rem;
      align-items: start;
   }
}

/* CONTENT */
.post-content { max-width: 46rem; }

.post-content h2 {
   font-size: 1.6rem;
   font-weight: 600;
   line-height: 1.2;
   color: #222222;
   margin: 2.5rem 0 1rem;
   letter-spacing: -0.01em;
}

.post-content h3 {
   font-size: 1.15rem;
   font-weight: 600;
   color: #222222;
   margin: 2rem 0 0.65rem;
}

.post-content p {
   font-size: 1.0625rem;
   line-height: 1.8;
   color: #4a4f4d;
   margin-bottom: 1.25rem;
}

.post-content a {
   color: #1E6FA8;
   font-weight: 500;
   text-decoration: underline;
   text-underline-offset: 2px;
   text-decoration-color: rgba(30,111,168,.35);
   transition: text-decoration-color .2s ease;
}

.post-content a:hover { text-decoration-color: #1E6FA8; }

.post-content ul,
.post-content ol {
   margin: 0 0 1.3rem;
   padding-left: 1.6rem;
}

.post-content ul li,
.post-content ol li {
   font-size: 1.0625rem;
   line-height: 1.7;
   color: #4a4f4d;
   margin-bottom: 0.55rem;
}

.post-content img {
   width: 100%;
   border-radius: 0.5rem;
   margin: 1.5rem 0;
}

.post-content blockquote {
   border-left: 3px solid #1E6FA8;
   margin: 2rem 0;
   padding: 1rem 1.5rem;
   background: #F4F8FB;
   border-radius: 0 0.5rem 0.5rem 0;
}

.post-content blockquote p {
   font-size: 1.1rem;
   font-style: italic;
   color: #2c3a44;
   margin: 0;
}

/* TAGS */
.post-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 2.5rem;
   padding-top: 2rem;
   border-top: 1px solid #eceeed;
}

.post-tag {
   display: inline-block;
   padding: 0.3rem 0.85rem;
   background: #f0f4f7;
   color: #1E6FA8;
   font-size: 0.85rem;
   font-weight: 500;
   border-radius: 9999px;
   transition: background .2s ease;
}

.post-tag:hover { background: #dceaf4; }

/* SIDEBAR */
.post-sidebar {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

@media (min-width: 1024px) {
   .post-sidebar {
      position: sticky;
      top: 120px;
   }
}

.post-sidebar__box {
   background: #ffffff;
   border: 1px solid #e6e8e7;
   border-radius: 0.75rem;
   padding: 1.5rem;
}

.post-sidebar__label {
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: #9aa19d;
   margin-bottom: 1rem;
}

.post-author {
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.post-author__avatar {
   width: 48px !important;
   height: 48px !important;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
}

.post-author__initial {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: #1E6FA8;
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
   font-weight: 600;
   flex-shrink: 0;
}

.post-author__name {
   font-size: 0.95rem;
   font-weight: 600;
   color: #222222;
}

.post-author__role {
   font-size: 0.82rem;
   color: #6B726E;
}

/* SIDEBAR CONTACT */
.post-sidebar__contact {
   background: #222222;
   border-color: #222222;
   color: #ffffff;
}

.post-sidebar__contact-title {
   font-size: 1.05rem;
   font-weight: 600;
   color: #ffffff;
   margin-bottom: 0.6rem;
}

.post-sidebar__contact p {
   font-size: 0.9rem;
   color: rgba(255,255,255,.7);
   line-height: 1.6;
   margin-bottom: 1.2rem;
}

.post-sidebar__contact-rows { display: grid; gap: 0.75rem; }

.post-sidebar__contact-row {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   font-size: 0.92rem;
}

.post-sidebar__contact-row svg {
   width: 1rem;
   height: 1rem;
   color: #7FB8DD;
   flex-shrink: 0;
}

.post-sidebar__contact-row a {
   color: #ffffff;
   transition: color .2s ease;
}

.post-sidebar__contact-row a:hover { color: #7FB8DD; }

/* RELATED */
.post-related {
   background: #f8f9f8;
   padding: 4rem 0;
}

.post-related__inner {
   max-width: 80rem;
   margin-inline: auto;
   padding-inline: 2rem;
}

.post-related__title {
   font-size: 1.75rem;
   font-weight: 600;
   color: #222222;
   margin-bottom: 2rem;
}

.post-related__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 1.5rem;
}

.post-card__link {
   display: block;
   background: #ffffff;
   border: 1px solid #e6e8e7;
   border-radius: 0.75rem;
   overflow: hidden;
   transition: border-color .2s ease;
}

.post-card__link:hover { border-color: #1E6FA8; }

.post-card__image { aspect-ratio: 16/9; overflow: hidden; }

.post-card__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .4s ease;
}

.post-card__link:hover .post-card__img { transform: scale(1.04); }

.post-card__content { padding: 1.25rem; }

.post-card__cat {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #1E6FA8;
   margin-bottom: 0.5rem;
}

.post-card__title {
   font-size: 1.05rem;
   font-weight: 600;
   color: #222222;
   line-height: 1.35;
   margin-bottom: 0.5rem;
}

.post-card__date {
   font-size: 0.82rem;
   color: #9aa19d;
}

@media (max-width: 640px) {
   .post-hero { padding: 160px 0 60px; }
   .post-featured-image__inner { transform: translateY(-1.5rem); }
   .post-body { padding-bottom: 3.5rem; }
   .post-related__grid { grid-template-columns: 1fr; }
}