/* Daikin Blog Templates — DaikinBlog */
:root {
  --dkn-blue: #0097e0;
  --dkn-blue-hover: #54C3F1;
  --dkn-dark: #111827;
  --dkn-gray: #6b7280;
  --dkn-gray-light: #f9fafb;
  --dkn-muted: #ececf0;
  --dkn-border: #e5e7eb;
}

/* ---- Page Hero ---- */
.dkn-blog-hero {
  background: var(--dkn-gray-light); /* #f9fafb — matches design hero */
  border-bottom: 1px solid var(--dkn-border);
  margin-bottom: 0;
}
.dkn-blog-hero-inner {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 2rem;
}
.dkn-blog-hero-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dkn-blog-hero-icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  color: #0097e0;
}
.dkn-blog-hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
}
/* `#main .x` variants outrank the site template's `#main p` (ID) rules */
.dkn-blog-hero-subtitle,
#main .dkn-blog-hero-subtitle {
  font-size: 1.125rem;
  color: #4b5563;
  max-width: 48rem;
  margin: 0;
  line-height: 1.6;
}

/* ---- Content container (featured + grid), matches hero width/padding ---- */
.dkn-blog-body {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
}
.dkn-blog-body-grid { padding-bottom: 4rem; }

/* ---- Featured Section ---- */
.dkn-featured-section { margin: 3rem 0; }

.dkn-featured-main {
  position: relative;
  overflow: hidden;
  height: 650px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dkn-border);
  text-decoration: none;
  color: inherit;
}
.dkn-featured-main:hover { text-decoration: none; color: inherit; }

.dkn-featured-img { height: 360px; overflow: hidden; flex-shrink: 0; background: #e5e7eb; }
.dkn-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dkn-featured-main:hover .dkn-featured-img img { transform: scale(1.05); }

.dkn-featured-body {
  background: var(--dkn-blue);
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dkn-featured-date {
  color: white;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .025em;
  font-weight: 600;
  margin-bottom: .75rem;
}
.dkn-featured-title,
#main .dkn-featured-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  /* Post titles are normal case per mockup; override the site template's uppercase h2. */
  text-transform: none;
}
/* Summary under the featured title. Brand faces carry their own weight, so the
   family (not font-weight) selects the regular cut. */
.dkn-featured-excerpt,
#main .dkn-featured-excerpt {
    color: white;
    font-family: 'martian_b_thairegular';
    font-size: .875rem !important;
    line-height: 1.1rem;
    margin-bottom: 1rem;
    margin-top: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dkn-featured-link {
  color: white;
  font-size: .875rem;
  /* Semibold via the dedicated face; font-weight stays normal to avoid synthetic bolding. */
  font-family: 'martian_b_thaisemibold';
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  transition: gap .2s;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.dkn-featured-main:hover .dkn-featured-link { gap: 1rem; }

/* ---- Tags ---- */
.dkn-tag-group { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.dkn-tag {
    background: var(--dkn-dark);
    color: white;
    line-height: 1.5;
    font-size: .625rem;
    padding: .25rem .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: inline-block;
}
.dkn-tag-light {
  /* Featured blue-box tags are the SAME size as the dark card tags (mockup FeaturedSection:
     text-[10px] px-3 py-1) — just translucent-white on the blue body. No size override. */
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
}

/* ---- Recent Posts Stack (right side of featured) ---- */
.dkn-recent-stack {
  height: 650px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dkn-border);
  border-left: none;
}
@media (max-width: 767px) {
  .dkn-recent-stack { height: auto; border-left: 1px solid var(--dkn-border); border-top: none; }
  .dkn-featured-main { height: auto; }
  .dkn-featured-img { height: 220px; }
}
.dkn-recent-item {
  flex: 1;
  min-height: 0;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--dkn-border);
  text-decoration: none;
  color: inherit;
  transition: background .2s;
  overflow: hidden;
}
.dkn-recent-item:last-child { border-bottom: none; }
.dkn-recent-item:hover { background: var(--dkn-gray-light); text-decoration: none; color: inherit; }
/* Text + thumb row; shrinks (clipping the clamped text) before the tags or padding do */
.dkn-recent-body { display: flex; gap: 1rem; flex: 1; min-height: 0; overflow: hidden; margin-bottom: .75rem; }
.dkn-recent-content { flex: 1; min-width: 0; }
.dkn-recent-date {
  font-size: .8rem;
  color: var(--dkn-blue);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-bottom: .4rem;
}
.dkn-recent-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dkn-dark);
  line-height: 1.3;
  margin-bottom: .4rem;
  transition: color .2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dkn-recent-item:hover .dkn-recent-title { color: var(--dkn-blue); }
.dkn-recent-excerpt,
#main .dkn-recent-excerpt {
  font-size: .9rem;
  color: var(--dkn-gray);
  line-height: 1.1rem !important;
  display: -webkit-box;
  /* Two lines (mockup line-clamp-2): text wraps to a second row, clipped before it reaches the tags. */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}
.dkn-recent-thumb {
  width: 8rem;
  height: 6rem;
  object-fit: cover;
  flex-shrink: 0;
}
/* Tag pills below the body row; the body's margin-bottom is the gap, so they never overlap the copy */
.dkn-recent-tags { margin-top: 0; gap: .5rem; flex-shrink: 0; }
.dkn-recent-tags .dkn-tag { font-size: .625rem; padding: .25rem .75rem; }

/* ---- Tag Filter ---- */
.dkn-tag-filter {
  background: var(--dkn-gray-light);
  border-top: 1px solid var(--dkn-border);
  border-bottom: 1px solid var(--dkn-border);
  margin-bottom: 4rem;
}
.dkn-tag-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dkn-tag-btn {
  padding: 1rem 1.25rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  border: none;
  border-bottom: 4px solid transparent;
  background: transparent;
  color: var(--dkn-gray);
  cursor: pointer;
  transition: all .2s;
}
.dkn-tag-btn:hover { color: var(--dkn-dark); background: rgba(255,255,255,.5); }
.dkn-tag-btn.active { color: var(--dkn-blue); background: white; border-bottom-color: var(--dkn-blue); }

/* ---- Blog Card Grid ---- */
.dkn-card-col { display: flex; }
/* Row spacing between wrapped card rows. Bootstrap's y-gutter didn't take, so use an explicit
   row-gap (2rem = mockup gap-8) and zero the gutter so the two don't stack. */
#dkn-blog-grid { --bs-gutter-y: 0; row-gap: 2rem; }
.dkn-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  width: 100%;
  background: #fff;
  border: 1px solid var(--dkn-border);
  padding: 1.25rem;
  transition: box-shadow .2s, transform .2s;
}
.dkn-card:hover {
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.15);
  transform: translateY(-2px);
}
.dkn-card-img-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f4f6;
  /* full-bleed across the padded card top */
  margin: -1.25rem -1.25rem 1rem;
}
.dkn-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dkn-card:hover .dkn-card-img { transform: scale(1.05); }
.dkn-card-date { font-size: .75rem; color: var(--dkn-gray); margin-bottom: .625rem; }
.dkn-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--dkn-dark);
  line-height: 1.4;
  margin-bottom: .5rem;
  transition: color .2s;
}
.dkn-card:hover .dkn-card-title { color: var(--dkn-blue); }
.dkn-card-excerpt,
#main .dkn-card-excerpt {
  font-size: .875rem;
  color: var(--dkn-gray);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
  flex: 1;
}
.dkn-read-more {
  font-size: .75rem;
  font-weight: 700;
  color: var(--dkn-blue);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.dkn-arrow { display: inline-block; transition: transform .2s; }
.dkn-card:hover .dkn-arrow,
.dkn-recent-item:hover .dkn-arrow,
.dkn-featured-main:hover .dkn-arrow { transform: translateX(4px); }

/* ---- Bottom CTA banner ---- */
.dkn-cta {
  background: linear-gradient(to bottom right, var(--dkn-dark), #1f2937);
  border-top: 4px solid var(--dkn-blue);
  padding: 5rem 0;
}
.dkn-cta-inner {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}
.dkn-cta-title {
  color: white;
  font-size: 2.25rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}
.dkn-cta-text,
#main .dkn-cta-text {
  color: white;
  font-size: 1.25rem;
  line-height: 1.625;
  margin: 0 0 2rem;
}
.dkn-cta-btn {
  display: inline-block;
  background: var(--dkn-blue);
  color: white;
  padding: 1rem 2.5rem;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background .2s;
}
.dkn-cta-btn:hover { background: var(--dkn-blue-hover); color: white; text-decoration: none; }

/* ---- Detail Page ---- */
/* Site header is position:absolute (transparent overlay): 90px tall on mobile,
   200px on >=760px. Offset the hero by exactly that so it clears the header
   instead of rendering behind it. */
.dkn-detail-hero-wrap { background: white; padding: 90px 0 0; }
@media (min-width: 760px) {
  .dkn-detail-hero-wrap { padding-top: 200px; }
}
.dkn-detail-hero-inner { position: relative; }
.dkn-detail-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--dkn-blue);
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 2rem;
}
.dkn-detail-back:hover { color: var(--dkn-blue-hover); text-decoration: none; }
.dkn-detail-hero-img { width: 100%; height: 330px; object-fit: cover; display: block; }
.dkn-detail-title-box {
  position: relative;
  z-index: 10;
  margin-top: -6rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  background: var(--dkn-muted);
  padding: 3.5rem;
  border-left: 8px solid var(--dkn-blue);
}
@media (max-width: 991px) {
  .dkn-detail-title-box { margin-top: 0; max-width: 100%; padding: 2rem; }
  .dkn-detail-hero-img { height: 220px; }
}
.dkn-tag-badge {
  display: inline-block;
  background: var(--dkn-blue);
  color: white;
  padding: .375rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1.5rem;
}
.dkn-detail-post-title,
#main .dkn-detail-post-title {
  /* Mockup title is text-2xl (1.5rem). Fixed (no clamp, which grew to ~30px on desktop) and
     #main-guarded so the site template's h1 rules can't enlarge it. */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  color: var(--dkn-dark);
  /* Normal case per mockup; override site template's uppercase h1. */
  text-transform: none;
}
.dkn-detail-meta { display: flex; align-items: center; gap: .5rem; color: var(--dkn-gray); font-size: 1rem; }

/* Article body */
.dkn-article { font-size: 1rem; line-height: 1.75; color: #374151; }
/* #main-guarded so the site template's `#main h2/h3` (ID specificity) can't override size/case.
   text-transform:none keeps copy headings in normal case per the mockup. */
.dkn-article h2, #main .dkn-article h2 { font-size: 2rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: var(--dkn-dark); text-transform: none; }
.dkn-article h3, #main .dkn-article h3 { font-size: 1.5rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: .75rem; color: var(--dkn-dark); text-transform: none; }
.dkn-article p { margin-bottom: 1.25rem; }
.dkn-article a { color: var(--dkn-blue); }
.dkn-lead-callout {
  background: rgba(0,151,224,.05);
  border-left: 4px solid var(--dkn-blue);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #374151;
}

/* Sidebar */
.dkn-sidebar-follow { background: var(--dkn-blue); padding: 1.5rem; margin-bottom: 0.9rem; }
/* margin-top:0 + #main guard removes the site template's default h3 top margin that was making
   the Follow Us box too tall at the top. */
.dkn-sidebar-follow h3, #main .dkn-sidebar-follow h3 { color: white; font-size: 1rem; font-weight: 500; margin-top: 0; margin-bottom: 1rem; line-height: 1.2; }
.dkn-social-links { display: flex; gap: .75rem; }
.dkn-social-link {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: var(--dkn-blue);
  text-decoration: none;
  transition: all .2s;
  font-size: .8125rem;
  font-weight: 700;
}
.dkn-social-link:hover { background: var(--dkn-blue-hover); color: white; text-decoration: none; }

.dkn-sidebar-latest {
  background: var(--dkn-muted);
  padding: 1.5rem;
  border-top: 4px solid var(--dkn-blue);
}
.dkn-sidebar-latest h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid rgba(0,151,224,.15);
}
.dkn-sidebar-post { padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.08); }
.dkn-sidebar-post:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.dkn-sidebar-post a { text-decoration: none; color: inherit; display: block; }
.dkn-sidebar-post a:hover { text-decoration: none; }
/* Latest-post thumbnail — mockup gives each item a 4:3 image above the date. */
.dkn-sidebar-post-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: .75rem; background: #fff; }
.dkn-sidebar-post .dkn-sidebar-post-img { transition: opacity .2s; }
.dkn-sidebar-post a:hover .dkn-sidebar-post-img { opacity: .9; }
/* Dark tag chips under the summary, matching the mockup's Latest Posts. */
.dkn-sidebar-post-tags { margin-top: .5rem; margin-bottom: .5rem; gap: .375rem; }
.dkn-sidebar-post-date { font-size: .6875rem; color: var(--dkn-gray); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem; }
.dkn-sidebar-post-title { font-size: .9375rem; font-weight: 700; color: var(--dkn-dark); line-height: 1.4; margin-bottom: .4rem; transition: color .2s; }
.dkn-sidebar-post a:hover .dkn-sidebar-post-title { color: var(--dkn-blue); }
/* #main ID-guard so the site template's `#main p` rule can't enlarge the summary. */
.dkn-sidebar-post-excerpt,
#main .dkn-sidebar-post-excerpt {
  font-size: .8125rem;
  color: var(--dkn-gray);
  line-height: 1.5;
  margin-bottom: .5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dkn-sidebar-read-more {
  font-size: .75rem;
  font-weight: 700;
  color: var(--dkn-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  transition: color .2s;
}
.dkn-sidebar-post a:hover .dkn-sidebar-read-more { color: var(--dkn-blue); }