/* =========================================================
   Article List (Blog Listing) Page Styles
   Uses only var(--...) tokens defined in the NEW shared.css/root.css
   ========================================================= */



/* ===== Base ===== */

.section-padding {
  padding-block: var(--section-padding-y);
}

.section-padding-sm {
  padding-block: calc(var(--section-padding-y) * 0.55);
}



/* ===== Buttons ===== */
.btn-primary-brand {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

.btn-primary-brand:hover,
.btn-primary-brand:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.btn-outline-brand {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background-color: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-cta {
  background-color: var(--color-background);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
  border: none;
}

.btn-cta:hover,
.btn-cta:focus {
  background-color: var(--color-surface);
  color: var(--color-primary-dark);
}

/* ===== Badge ===== */
.badge-soft {
  display: inline-block;
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-lg);
}

/* ===== Breadcrumb ===== */
.breadcrumb-item a {
  color: var(--color-text-secondary);
}

.breadcrumb-item.active {
  color: var(--color-text-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-muted);
}

/* ===== Hero ===== */
.blog-hero {
  padding-block: calc(var(--section-padding-y) * 0.75) calc(var(--section-padding-y) * 0.55);
  background-color: var(--color-surface);
}

/* ===== Featured Article ===== */
.featured-article {
  height: 80vh;
  min-height: 80vh;
  max-height: 80vh;

  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.featured-article .row {
  height: 100%;
}

.featured-article .col-lg-6 {
  height: 100%;
}

/* NOTE: in the markup this class sits on the SAME element as Bootstrap's
   .col-lg-6 (<div class="col-lg-6 featured-image-wrapper">). It must not
   set width/height here — that fights the 50/50 Bootstrap grid split and
   breaks the whole layout. Sizing is handled by Bootstrap + the
   `.featured-article .col-lg-6 { height: 100% }` rule above; this class
   only needs to clip the image to its rounded corner. */
.featured-image-wrapper {
  overflow: hidden;
}

.featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.featured-content {
  padding: 2.25rem;
}

@media (max-width: 991.98px) {

  .featured-article {
    height: auto;
    min-height: auto;
    max-height: none;
  }

  .featured-article .row {
    height: auto;
  }

  .featured-article .col-lg-6 {
    height: auto;
  }

  /* On mobile, Bootstrap stacks the columns into full-width blocks, so it's
     safe to give this element (col-lg-6 + featured-image-wrapper) an
     explicit height here — width is untouched and stays 100% automatically. */
  .featured-image-wrapper {
    height: 45vh;
    min-height: 18rem;
    max-height: 30rem;
  }

  .featured-content {
    height: auto;
    min-height: 0;
    padding: 1.75rem;
  }

}


/* ===== Category Badge =====
   Old semantic tokens (info/warning/success) no longer exist in root.css.
   Re-mapped onto the new brand palette (primary green + gold + warm-beige)
   so each category still reads as visually distinct. */
.category-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-sm);
  margin: 0.85rem 0.85rem 0;
}

.category-design {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.category-dev {
  background-color: var(--color-gold-light);
  color: var(--color-gold);
}

.category-marketing {
  background-color: var(--color-warm-beige);
  color: var(--color-primary-dark);
}

.category-business {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

/* ===== Search ===== */
.blog-search .input-group-text {
  background-color: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.blog-search .form-control {
  border-color: var(--color-border);
  color: var(--color-text);
  background-color: var(--color-background);
}

.blog-search .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem var(--color-primary-light);
}

.blog-search:focus-within .input-group-text {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* ===== Category Filter Buttons ===== */
.category-btn {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  font-size: 0.85rem;
  border-radius: var(--radius-lg);
  padding: 0.4rem 1.1rem;
}

.category-btn:hover,
.category-btn:focus {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.category-btn.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ===== Sort Select ===== */
.form-select {
  border-color: var(--color-border);
  color: var(--color-text);
  background-color: var(--color-background);
  min-width: 9rem;
}

.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem var(--color-primary-light);
}

/* ===== Article Card ===== */
.article-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.article-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-lg);
}

.article-image-link {
  display: block;
}

/* Image wrapper: width is always 100% of the card, height follows a fixed
   aspect ratio (1:1, same look as the old 400x400 box). This is what fixes
   the "empty space" bug when the card gets wider than 400px — the wrapper
   scales fluidly instead of relying on a fixed pixel size. */
.article-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-surface);
}

.article-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.article-meta {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.article-title a {
  color: var(--color-text);
}

.article-title a:hover,
.article-title a:focus {
  color: var(--color-primary);
}

.article-excerpt {
  flex-grow: 1;
  line-height: var(--line-height-relaxed);
  margin-bottom: 1rem;
}

.tag-chip {
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-sm);
}

/* ===== Pagination ===== */
.pagination .page-link {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  margin-inline: 0.2rem;
  border-radius: var(--radius-sm);
}

.pagination .page-link:hover,
.pagination .page-link:focus {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.pagination .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.pagination .page-item.disabled .page-link {
  color: var(--color-text-muted);
  background-color: var(--color-surface);
}



/* ===== Focus visibility (Accessibility) ===== */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


@media (max-width: 767.98px) {
  .section-padding {
    padding-block: calc(var(--section-padding-y) * 0.7);
  }
}