/* ══════════════════════════════════════
   First Link Dubai — Blog Styles v2
   Editorial magazine layout
══════════════════════════════════════ */

/* ── Page reset ── */
.blog-page{ font-family: inherit; color: var(--ink); background: #fff; }

/* ── Nav: blog pages inherit site.css nav exactly — no overrides needed ── */
@media(min-width:769px){
  .blog-page .nav-links{ display: flex !important; }
}
/* Active blog link highlight */
.blog-page .nav-links a[href*="blog/index"]:not([href*="#"]),
.blog-page .nav-links a.blog-nav-active{ color: #0f3d46 !important; }

/* ── Breadcrumb ── */
.blog-breadcrumb{
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: rgba(255,255,255,.6);
  margin-bottom: 1.1rem; flex-wrap: wrap;
}
.blog-breadcrumb a{ color: rgba(255,255,255,.8); text-decoration: none; }
.blog-breadcrumb a:hover{ color: #fff; }
.blog-breadcrumb span{ opacity: .5; }

/* ═══════════════════════════════════════
   BLOG INDEX PAGE
═══════════════════════════════════════ */

/* Blog hero */
.blog-hero{
  padding: calc(var(--nav-h,72px) + var(--bar-h,36px) + 3rem) 0 3rem;
  background: #f8f8f8;
  position: relative;
  overflow: clip;
  text-align: center;
}
.blog-hero::before{
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg stroke='%230f3d46' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='12' width='22' height='16' rx='4'/%3E%3Cpath d='M22 28 L20 34 L28 28'/%3E%3Cpath d='M210 47 C210 44 207 42 204 44 C201 42 198 44 198 47 C198 51 204 55 204 55 C204 55 210 51 210 47Z'/%3E%3Crect x='310' y='8' width='12' height='20' rx='3'/%3E%3Cline x1='314' y1='25' x2='318' y2='25'/%3E%3Ccircle cx='440' cy='30' r='10'/%3E%3Ccircle cx='437' cy='28' r='1.2' fill='%230f3d46'/%3E%3Ccircle cx='443' cy='28' r='1.2' fill='%230f3d46'/%3E%3Cpath d='M436 33 Q440 37 444 33'/%3E%3Cpolygon points='90,60 92,66 98,66 93,70 95,76 90,72 85,76 87,70 82,66 88,66'/%3E%3Cpath d='M480 70 Q488 62 496 70 Q488 78 480 70'/%3E%3Crect x='140' y='88' width='22' height='16' rx='3'/%3E%3Cpath d='M140 90 L151 98 L162 90'/%3E%3Cpath d='M38 130 Q24 120 28 108 Q32 96 44 100 Q56 104 52 118 L42 134 Q34 146 42 152 Q50 158 58 150 L72 130'/%3E%3Cline x1='260' y1='110' x2='260' y2='124'/%3E%3Cline x1='253' y1='117' x2='267' y2='117'/%3E%3Crect x='390' y='100' width='24' height='18' rx='3'/%3E%3Ccircle cx='402' cy='109' r='5'/%3E%3Cpath d='M394 100 L398 96 L406 96 L410 100'/%3E%3Cpath d='M460 150 L466 138 L463 148 L469 136'/%3E%3Cpath d='M100 200 Q112 190 124 200 Q136 210 148 200 Q160 190 172 200'/%3E%3Ccircle cx='310' cy='190' r='10'/%3E%3Ccircle cx='307' cy='188' r='1.2' fill='%230f3d46'/%3E%3Ccircle cx='313' cy='188' r='1.2' fill='%230f3d46'/%3E%3Cpath d='M306 193 Q310 197 314 193'/%3E%3Crect x='18' y='240' width='22' height='16' rx='4'/%3E%3Cpath d='M22 256 L20 262 L28 256'/%3E%3Cpolygon points='430,215 438,225 430,235 422,225'/%3E%3Cpath d='M200 280 C200 276 197 274 194 276 C191 274 188 276 188 280 C188 284 194 288 194 288 C194 288 200 284 200 280Z'/%3E%3Crect x='280' y='270' width='12' height='20' rx='3'/%3E%3Cline x1='284' y1='287' x2='288' y2='287'/%3E%3Cpath d='M60 320 Q46 310 50 298 Q54 286 66 290 Q78 294 74 308 L64 324 Q56 336 64 342 Q72 348 80 340 L94 320'/%3E%3Cpolygon points='380,295 382,301 388,301 383,305 385,311 380,307 375,311 377,305 372,301 378,301'/%3E%3Cpath d='M470 310 Q478 302 486 310 Q478 318 470 310'/%3E%3Crect x='130' y='360' width='24' height='18' rx='3'/%3E%3Ccircle cx='142' cy='369' r='5'/%3E%3Cpath d='M134 360 L138 356 L146 356 L150 360'/%3E%3Cline x1='340' y1='350' x2='340' y2='364'/%3E%3Cline x1='333' y1='357' x2='347' y2='357'/%3E%3Cpath d='M20 420 Q32 410 44 420 Q56 430 68 420 Q80 410 92 420'/%3E%3Ccircle cx='240' cy='410' r='10'/%3E%3Ccircle cx='237' cy='408' r='1.2' fill='%230f3d46'/%3E%3Ccircle cx='243' cy='408' r='1.2' fill='%230f3d46'/%3E%3Cpath d='M236 413 Q240 417 244 413'/%3E%3Cpath d='M420 390 L426 378 L423 388 L429 376'/%3E%3Cpolygon points='490,410 492,416 498,416 493,420 495,426 490,422 485,426 487,420 482,416 488,416'/%3E%3Crect x='310' y='440' width='22' height='16' rx='4'/%3E%3Cpath d='M314 456 L312 462 L320 456'/%3E%3Cpath d='M80 480 C80 476 77 474 74 476 C71 474 68 476 68 480 C68 484 74 488 74 488 C74 488 80 484 80 480Z'/%3E%3Cpolygon points='160,475 168,485 160,495 152,485'/%3E%3Crect x='430' y='470' width='12' height='20' rx='3'/%3E%3Cline x1='434' y1='487' x2='438' y2='487'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 520px 520px;
}
.blog-hero > *{ position: relative; z-index: 1; }
.blog-hero-eyebrow{
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in oklab, #0f3d46 75%, transparent);
  background: color-mix(in oklab, #0f3d46 6%, transparent);
  padding: .22rem .6rem; border-radius: 999px; margin-bottom: .85rem;
}
.blog-hero-eyebrow svg, .blog-hero-eyebrow i{ width: 11px; height: 11px; }
.blog-hero h1{
  font-size: clamp(2.4rem, 1.4rem + 3.5vw, 3.6rem);
  font-weight: 800; line-height: 1.12; color: #0f3d46;
  margin-bottom: .7rem;
}
.blog-hero p{ font-size: .98rem; color: oklch(0.5 0.025 195); max-width: 480px; margin: 0 auto 1.9rem; }

/* Category filter pills */
.blog-filters{ display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 3rem; }
.blog-filter{
  display: inline-flex; align-items: center; gap: .4rem;
  height: 52px !important; padding: 0 1.2rem; border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  border: 1.5px solid oklch(0.90 0.014 195);
  background: #fff; color: oklch(0.45 0.03 195);
  cursor: pointer; transition: all .15s; text-decoration: none;
  white-space: nowrap;
}
.blog-filter:hover, .blog-filter.active{ background: #0f3d46; color: #fff; border-color: #0f3d46; }

/* Blog grid */
.blog-section{ padding: 2rem 0 5rem; overflow-x: clip; }
.blog-container{ max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.blog-grid{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.75rem; }
@media(max-width:900px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:580px){ .blog-grid{ grid-template-columns: 1fr; } }
@media(max-width:680px){
  .blog-hero{ padding-top: calc(var(--nav-h,72px) + var(--bar-h,36px) + 1rem); padding-bottom: 1rem; }
  .blog-hero h1{ font-size: clamp(1.45rem, 7.5vw, 2.2rem); margin-bottom: .4rem; }
  .blog-hero p{ font-size: .875rem; margin-bottom: .85rem; }
  .blog-filters{ margin-bottom: 1.5rem; gap: .35rem; }
  .blog-filter{ height: 38px !important; padding: 0 .85rem; font-size: .78rem; }
}

/* Post card */
.post-card{
  display: flex; flex-direction: column;
  border-radius: 14px; border: 1px solid oklch(0.92 0.014 195);
  background: #fff; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s, transform .2s;
}
.post-card:hover{ box-shadow: 0 14px 40px -14px rgba(15,61,70,.18); transform: translateY(-3px); }
.post-card-img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.post-card-body{ padding: 1.2rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card-tag{
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #0f3d46; margin-bottom: .55rem;
}
.post-card h2{ font-size: 1rem; font-weight: 700; line-height: 1.3; color: oklch(0.15 0.03 195); margin-bottom: .45rem; min-height: 3.9rem; }
.post-card p{ font-size: .875rem; line-height: 1.6; color: oklch(0.45 0.03 195); margin-bottom: .9rem; flex: 1; }
.post-card-meta{ display: flex; align-items: center; gap: .55rem; font-size: .73rem; color: oklch(0.55 0.03 195); }
.post-card-meta span{ display: flex; align-items: center; gap: .25rem; }

/* Featured card */
.post-card--featured{ grid-column: 1/3; flex-direction: row; }
.post-card--featured .post-card-img{ width: 46%; aspect-ratio: unset; flex-shrink: 0; }
.post-card--featured .post-card-body{ padding: 2rem 2rem; }
.post-card--featured h2{ font-size: 1.3rem; }
@media(max-width:900px){ .post-card--featured{ grid-column: auto; flex-direction: column; } .post-card--featured .post-card-img{ width: 100%; aspect-ratio: 16/9; } }

/* Index CTA banner */
.blog-cta{
  background: #0f3d46; color: #fff;
  border-radius: 18px; padding: 2rem 2.5rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  margin-top: 2rem; flex-wrap: wrap;
}
.blog-cta h3{ font-size: 1.4rem; font-weight: 800; margin-bottom: .35rem; }
.blog-cta p{ font-size: .9rem; opacity: .72; margin: 0; }

/* ═══════════════════════════════════════
   SINGLE POST PAGE — EDITORIAL HERO
═══════════════════════════════════════ */
.post-page{ min-height: 100vh; }

/* ── Full-bleed background hero ── */
.post-hero{
  position: relative;
  overflow: hidden;
  margin-top: 0;
  min-height: clamp(420px, 50vw, 600px);
  display: flex;
  align-items: flex-start;
  background: #081a1e;
}
/* Full-bleed image as background */
.post-hero-fig{
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  margin: 0;
  z-index: 0;
  display: block;
}
.post-hero-img{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  aspect-ratio: unset;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  max-width: none;
  margin: 0;
  display: block;
  box-shadow: none;
}
/* Dark gradient overlay */
.post-hero::before{
  content:"";
  display: block;
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg,
      rgba(0,0,0,.85) 0%,
      rgba(0,0,0,.55) 45%,
      rgba(0,0,0,.30) 100%
    );
  pointer-events: none;
}
/* Brand ambient glow */
.post-hero::after{
  content:"";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(700px 360px at 0% 100%, color-mix(in oklab,#0f3d46 38%,transparent), transparent 60%);
  pointer-events: none;
}
.post-hero-grid{
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(var(--nav-h,72px) + var(--bar-h,36px) + 90px) 2rem 6.5rem;
  box-sizing: border-box;
}
.post-hero-inner{
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Post breadcrumb */
.post-breadcrumb{
  font-size: .78rem; font-weight: 600;
  margin-bottom: 1.1rem; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
}
.post-breadcrumb a{ color: rgba(255,255,255,.9); text-decoration: none; font-weight: 600; }
.post-breadcrumb a:hover{ color: #fff; }
.post-breadcrumb span:not(:last-child){ color: rgba(255,255,255,.45); font-weight: 400; }
.post-breadcrumb span:last-child{ color: rgba(255,255,255,.5); font-weight: 400; }

/* Post category tag (on hero — white) */
.post-tag{ display: none; }

.post-hero h1{
  font-size: clamp(1.75rem, 1rem + 2.8vw, 3rem);
  font-weight: 800; line-height: 1.18;
  color: #fff;
  margin-top: .2rem;
  margin-bottom: .9rem;
  text-wrap: pretty;
}

.post-hero-desc{
  font-size: 1.05rem; line-height: 1.65;
  color: rgba(255,255,255,.78);
  margin-bottom: 1.5rem;
  max-width: 680px;
}

.post-meta{
  display: flex; align-items: center; gap: 1.1rem;
  flex-wrap: wrap; font-size: .78rem;
  color: rgba(255,255,255,.6);
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.post-meta span{ display: flex; align-items: center; gap: .3rem; }
.post-meta svg{ width: 13px; height: 13px; opacity: .7; }
.post-meta i{ width: 14px; height: 14px; opacity: .7; }

/* ── Post body layout (article + sidebar) ── */
.post-layout{
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem;
  align-items: start;
}
@media(max-width:880px){
  .post-layout{ grid-template-columns: 1fr; }
  .post-sidebar{ display: none !important; }
}

/* ── Article typography ── */
.post-body{ min-width: 0; }
.post-body > p:first-child{ font-size: 1.1rem; line-height: 1.8; color: oklch(0.28 0.03 195); font-weight: 500; }
.post-body h2{
  font-size: 1.5rem; font-weight: 800;
  color: oklch(0.13 0.03 195);
  margin: 2.75rem 0 .8rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid oklch(0.93 0.014 195);
  line-height: 1.25;
}
.post-body h3{
  font-size: 1.1rem; font-weight: 700;
  color: oklch(0.20 0.03 195);
  margin: 1.75rem 0 .5rem;
}
.post-body p{ font-size: .975rem; line-height: 1.82; color: oklch(0.32 0.03 195); margin-bottom: 1.1rem; }
.post-body ul, .post-body ol{ margin: .6rem 0 1.1rem 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .45rem; text-align: left; }
.post-body li{ font-size: .975rem; line-height: 1.72; color: oklch(0.32 0.03 195); text-align: left; }
.post-body strong{ color: oklch(0.16 0.03 195); font-weight: 700; }
.post-body a:not(.btn){ color: #0f3d46; text-decoration: underline; text-underline-offset: 3px; }
.post-body a:not(.btn):hover{ opacity: .75; }

/* Info box */
.info-box{
  border-left: 3px solid #0f3d46;
  background: #f8f8f8;
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.3rem; margin: 1.5rem 0;
}
.info-box p{ margin: 0 !important; font-size: .9rem !important; color: oklch(0.28 0.03 195) !important; }

/* Comparison table */
.compare-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0 2rem;
  border-radius: 10px;
  /* thin custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #01b0ca rgba(0,0,0,.08);
}
.compare-table-wrap::-webkit-scrollbar{ height: 4px; }
.compare-table-wrap::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius: 4px; }
.compare-table-wrap::-webkit-scrollbar-thumb{ background: #01b0ca; border-radius: 4px; }
.compare-table{
  width: 100%; border-collapse: collapse;
  font-size: .875rem; margin: 0;
  border: 1px solid oklch(0.90 0.014 195);
  border-radius: 10px; overflow: hidden;
}
.compare-table th{
  background: #0f3d46; color: #fff;
  padding: .65rem 1rem; text-align: left; font-weight: 700; font-size: .82rem;
}
.compare-table td{
  padding: .6rem 1rem;
  border-bottom: 1px solid oklch(0.93 0.014 195);
  color: oklch(0.32 0.03 195); line-height: 1.5;
}
.compare-table tr:last-child td{ border-bottom: none; }
.compare-table tr:nth-child(even) td{ background: #f8f8f8; }

/* In-article CTA */
.post-cta{
  background: linear-gradient(135deg, #0f3d46 0%, oklch(0.26 0.06 195) 100%);
  color: #fff; border-radius: 16px;
  padding: 2rem; margin: 2.5rem 0;
  position: relative; overflow: hidden;
}
.post-cta::before{
  content: "";
  position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
}
.post-cta h4{ font-size: 1.1rem; font-weight: 800; margin: 0 0 .4rem; position: relative; }
.post-cta p{ font-size: .875rem; opacity: .75; margin-bottom: 1.1rem !important; position: relative; color: rgba(255,255,255,.85) !important; }
.post-cta .btn-wa{ position: relative; border-radius: 100px !important; }

/* ── Sidebar ── */
.post-sidebar{ position: sticky; top: 130px; display: flex; flex-direction: column; gap: 1.25rem; }

/* TOC */
.toc{
  background: #f8f8f8;
  border: 1px solid oklch(0.90 0.014 195);
  border-radius: 14px; padding: 1.25rem 1.4rem;
}
.toc h4{
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #0f3d46; margin-bottom: .9rem;
  display: flex; align-items: center; gap: .4rem;
}
.toc h4::before{
  content: "";
  display: block; width: 14px; height: 2px;
  background: #0f3d46; border-radius: 2px;
}
.toc ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.toc li{ font-size: .83rem; border-bottom: 1px solid oklch(0.92 0.01 195); }
.toc li:last-child{ border-bottom: none; }
.toc a{
  color: oklch(0.40 0.03 195); text-decoration: none;
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .25rem;
  transition: color .15s, padding-left .15s;
  counter-increment: toc;
}
.toc a::before{
  content: counter(toc, decimal-leading-zero);
  font-size: .65rem; font-weight: 700; color: #0f3d46; opacity: .55; flex-shrink: 0;
}
.toc ol{ counter-reset: toc; }
.toc a:hover{ color: #0f3d46; padding-left: .35rem; }

/* Sidebar CTA */
.sidebar-cta{
  background: #0f3d46; color: #fff;
  border-radius: 14px; padding: 1.5rem;
  text-align: center;
  position: relative; overflow: hidden;
}
.sidebar-cta::before{
  content: "";
  position: absolute; bottom: -30px; left: -30px;
  width: 120px; height: 120px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
}
.sidebar-cta h4{ font-size: 1rem; font-weight: 800; margin: 0 0 .4rem; position: relative; }
.sidebar-cta p{ font-size: .82rem; opacity: .72; margin-bottom: 1.1rem; position: relative; }
.sidebar-cta .btn-wa{ display: flex; justify-content: center; width: 100%; position: relative; border-radius: 100px !important; }

/* ── Related posts ── */
.related-posts{
  max-width: 1100px; margin: 0 auto;
  padding: 0 2rem 2rem;
  border-top: 2px solid oklch(0.93 0.014 195);
}
.related-posts h3{
  font-size: 1.1rem; font-weight: 800;
  color: oklch(0.15 0.03 195);
  margin: 2rem 0 1.5rem;
}
.related-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; align-items: start; }
@media(max-width:700px){
  .related-grid{
    grid-template-columns: unset;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 0 .75rem;
    scrollbar-width: none;
  }
  .related-grid::-webkit-scrollbar{ display: none; }
  .related-grid .post-card{
    flex: 0 0 80vw;
    max-width: 300px;
    min-width: 240px;
    scroll-snap-align: start;
  }
  .related-all-btn{
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
  }
}
.related-all-btn{ display: none; }

/* ── Blog footer ── */
.blog-footer{
  background: oklch(0.13 0.03 195); color: rgba(255,255,255,.5);
  text-align: center; padding: 2rem 1.5rem;
  font-size: .8rem;
}
.blog-footer a{ color: rgba(255,255,255,.75); text-decoration: none; }
.blog-footer a:hover{ color: #fff; }

/* ── Progress bar ── */
.read-progress{
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, #0f3d46, oklch(0.74 0.07 188));
  transition: width .1s linear;
}

/* TOC active link highlight */
.toc a.toc-active{
  color: #0f3d46 !important;
  padding-left: .5rem;
  border-left: 2px solid #0f3d46;
  font-weight: 600;
}

/* Smooth scroll for blog pages */
html{ scroll-behavior: smooth; }

@media(max-width:900px){
  .post-hero-grid{ grid-template-columns: 1fr; }
}

@media(max-width:600px){
  .post-hero-grid{ padding: calc(var(--nav-h,72px) + var(--bar-h,36px) + .5rem) 1.25rem 2rem; }
  .post-hero-inner{ padding-top: 0 !important; }
  .post-layout{ padding: 2rem 1.25rem 3rem; }
  .related-posts{ padding: 0 1.25rem 3rem; }
  .post-body h2{ font-size: 1.25rem; }
}