/* ==========================================================================
   GoldATM Blog Styles
   Overrides for blog archive and single post pages.
   ========================================================================== */

/* ---------- Archive: Featured post card ---------- */
.goldatm-blog-featured {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--border-gold, rgba(200, 168, 78, 0.1));
  margin-bottom: 48px;
}

.goldatm-blog-featured img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.goldatm-blog-featured:hover img {
  transform: scale(1.03);
}

.goldatm-blog-featured .goldatm-blog-featured__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  background: linear-gradient(to top, rgba(13, 13, 13, 0.95), transparent);
}

/* ---------- Archive: Post grid ---------- */
.gold-atm-grid .uk-card,
.goldatm-blog-grid .uk-card {
  background: var(--charcoal, #1A1A1A) !important;
  border: 1px solid var(--border-gold, rgba(200, 168, 78, 0.1));
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}

.gold-atm-grid .uk-card:hover,
.goldatm-blog-grid .uk-card:hover {
  border-color: var(--border-gold-hover, rgba(200, 168, 78, 0.3));
  transform: translateY(-2px);
}

.gold-atm-grid .uk-card-media-top img,
.goldatm-blog-grid .uk-card-media-top img {
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.gold-atm-grid .uk-card-body,
.goldatm-blog-grid .uk-card-body {
  padding: 24px;
  background: var(--charcoal, #1A1A1A);
}

/* Post card title */
.gold-atm-grid .uk-card-title,
.goldatm-blog-grid .uk-card-title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 300;
  font-size: 20px;
  color: var(--cream, #F5F0E8);
  margin-bottom: 8px;
  line-height: 1.3;
}

.gold-atm-grid .uk-card-title a,
.goldatm-blog-grid .uk-card-title a {
  color: inherit !important;
  text-decoration: none;
}

.gold-atm-grid .uk-card-title a:hover,
.goldatm-blog-grid .uk-card-title a:hover {
  color: var(--gold, #C8A84E) !important;
}

/* Post date/meta */
.gold-atm-grid .uk-text-meta,
.goldatm-blog-grid .uk-text-meta,
.gold-atm-grid .uk-article-meta,
.goldatm-blog-grid .uk-article-meta {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim, rgba(245, 240, 232, 0.35));
  font-weight: 400;
}

/* Post excerpt */
.gold-atm-grid .uk-card-body p,
.goldatm-blog-grid .uk-card-body p {
  font-size: 14px;
  color: var(--text-muted, rgba(245, 240, 232, 0.5));
  line-height: 1.7;
  font-weight: 300;
}

/* Read more link */
.gold-atm-grid .uk-card-body .uk-button,
.gold-atm-grid .uk-card-body a.uk-link,
.goldatm-blog-grid .uk-card-body .uk-button {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold, #C8A84E);
  font-weight: 500;
}

/* ---------- Single post ---------- */
.uk-article {
  color: var(--cream, #F5F0E8);
}

.uk-article-title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--cream, #F5F0E8);
  line-height: 1.2;
  margin-bottom: 16px;
}

.uk-article-meta {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim, rgba(245, 240, 232, 0.35)) !important;
  font-weight: 400;
  margin-bottom: 32px;
}

/* Article body */
.uk-article p,
.uk-article li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted, rgba(245, 240, 232, 0.5));
  font-weight: 300;
}

.uk-article h2,
.uk-article h3,
.uk-article h4 {
  color: var(--cream, #F5F0E8);
  margin-top: 40px;
}

.uk-article a {
  color: var(--gold, #C8A84E);
  text-decoration: underline;
  text-decoration-color: rgba(200, 168, 78, 0.3);
  text-underline-offset: 2px;
}

.uk-article a:hover {
  text-decoration-color: var(--gold, #C8A84E);
}

.uk-article blockquote {
  border-left: 2px solid var(--gold, #C8A84E);
  padding-left: 24px;
  font-style: italic;
  color: var(--cream, #F5F0E8);
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 20px;
  font-weight: 300;
}

.uk-article img {
  border-radius: 4px;
}

/* Featured image */
.uk-article .uk-article-featured-image img,
.uk-article .uk-card-media-top img {
  border-radius: 6px;
  width: 100%;
  object-fit: cover;
}

/* Tags */
.uk-article .uk-tag,
.uk-article .uk-label {
  background: rgba(200, 168, 78, 0.1);
  border: 1px solid var(--border-gold, rgba(200, 168, 78, 0.1));
  color: var(--gold, #C8A84E);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}

/* Dividers */
.uk-article .uk-divider-icon,
.uk-article hr {
  border-color: var(--border-gold, rgba(200, 168, 78, 0.1));
}

/* Pagination */
.uk-pagination > * > * {
  color: var(--text-dim, rgba(245, 240, 232, 0.35));
}

.uk-pagination > .uk-active > * {
  color: var(--gold, #C8A84E);
}

.uk-pagination > * > :hover {
  color: var(--cream, #F5F0E8);
}

/* ---------- Related posts ---------- */
.goldatm-related-posts h3,
.uk-article + .uk-section h3 {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold, #C8A84E);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-weight: 500;
  margin-bottom: 24px;
}

/* ---------- Help Center / FAQ ---------- */
.uk-accordion-title {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--cream, #F5F0E8);
  padding: 16px 0;
  border-bottom: 1px solid var(--border-gold, rgba(200, 168, 78, 0.1));
}

.uk-accordion-title:hover {
  color: var(--gold, #C8A84E);
}

.uk-accordion-title::before {
  color: var(--gold, #C8A84E);
}

.uk-accordion-content {
  font-size: 14px;
  color: var(--text-muted, rgba(245, 240, 232, 0.5));
  line-height: 1.7;
  font-weight: 300;
  padding: 16px 0;
}

/* ---------- Contact cards ---------- */
.goldatm-contact-card {
  background: var(--charcoal, #1A1A1A);
  border: 1px solid var(--border-gold, rgba(200, 168, 78, 0.1));
  border-radius: 6px;
  padding: 32px;
  text-align: center;
  transition: border-color 0.3s;
}

.goldatm-contact-card:hover {
  border-color: var(--border-gold-hover, rgba(200, 168, 78, 0.3));
}

.goldatm-contact-card a {
  color: var(--gold, #C8A84E);
  font-weight: 500;
}

/* ==========================================================================
   Blog & Support Page Sections
   ========================================================================== */

/* ---------- Blog Hero ---------- */
.goldatm-blog-hero {
  padding: 60px 40px 100px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(200, 168, 78, 0.06) 0%, transparent 60%),
    var(--dark, #0D0D0D);
}

.goldatm-blog-hero__inner {
  max-width: 800px;
  margin: 0 auto;
}

.goldatm-blog-hero__title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(32px, 5.5vw, 64px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--cream, #F5F0E8);
  margin: 0 0 28px;
}

/* ---------- Featured Post Overlay Text ---------- */
.goldatm-blog-featured a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.goldatm-blog-featured__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold, #C8A84E);
  margin-bottom: 12px;
}

.goldatm-blog-featured__title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 300;
  color: var(--cream, #F5F0E8);
  line-height: 1.2;
  margin: 0 0 12px;
}

.goldatm-blog-featured__excerpt {
  font-size: 14px;
  color: var(--text-muted, rgba(245, 240, 232, 0.5));
  line-height: 1.6;
  font-weight: 300;
  margin: 0 0 16px;
  max-width: 600px;
}

.goldatm-blog-featured__link {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold, #C8A84E);
  font-weight: 500;
}

/* ---------- Blog Archive Section ---------- */
.goldatm-blog-archive {
  padding: 0 40px 100px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- Blog Grid (3-col → 2-col → 1-col) ---------- */
.goldatm-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 960px) {
  .goldatm-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .goldatm-blog-grid {
    grid-template-columns: 1fr;
  }

  .goldatm-blog-hero {
    padding: 40px 24px 60px;
  }

  .goldatm-blog-archive {
    padding: 0 24px 60px;
  }

  .goldatm-blog-featured img {
    height: 260px;
  }

  .goldatm-blog-featured .goldatm-blog-featured__overlay {
    padding: 24px;
  }
}

/* ---------- Pagination list reset ---------- */
.goldatm-blog-archive .uk-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.goldatm-blog-archive .page-numbers {
  padding: 8px 14px;
  color: var(--text-dim, rgba(245, 240, 232, 0.35));
  text-decoration: none;
  font-size: 14px;
}

.goldatm-blog-archive .page-numbers.current {
  color: var(--gold, #C8A84E);
}

.goldatm-blog-archive .page-numbers:hover {
  color: var(--cream, #F5F0E8);
}

/* ---------- Support Hero ---------- */
.goldatm-support-hero {
  padding: 60px 40px 100px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(200, 168, 78, 0.06) 0%, transparent 60%),
    var(--dark, #0D0D0D);
}

.goldatm-support-hero__inner {
  max-width: 800px;
  margin: 0 auto;
}

.goldatm-support-hero__title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(32px, 5.5vw, 64px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--cream, #F5F0E8);
  margin: 0 0 28px;
}

.goldatm-support-hero__sub {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-muted, rgba(245, 240, 232, 0.5));
  max-width: 600px;
  margin: 0 auto;
  font-weight: 300;
}

/* ---------- Support FAQ Section ---------- */
.goldatm-support-faq {
  padding: 0 40px 100px;
  max-width: 800px;
  margin: 0 auto;
}

.goldatm-support-faq__inner {
  max-width: 800px;
  margin: 0 auto;
}

.goldatm-support-faq .goldatm-section-title {
  margin-bottom: 40px;
}

/* ---------- Support Articles Section ---------- */
.goldatm-support-articles {
  padding: 0 40px 100px;
  max-width: 1200px;
  margin: 0 auto;
}

.goldatm-support-articles__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.goldatm-support-articles .goldatm-section-title {
  margin-bottom: 40px;
}

/* ---------- Support Contact Section ---------- */
.goldatm-support-contact {
  padding: 0 40px 100px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.goldatm-support-contact__inner {
  max-width: 800px;
  margin: 0 auto;
}

.goldatm-support-contact .goldatm-section-title {
  margin-bottom: 40px;
}

.goldatm-support-contact__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.goldatm-contact-card h3 {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 20px;
  font-weight: 300;
  color: var(--cream, #F5F0E8);
  margin: 0 0 8px;
}

.goldatm-contact-card p {
  font-size: 14px;
  color: var(--text-muted, rgba(245, 240, 232, 0.5));
  font-weight: 300;
  margin: 0 0 16px;
}

/* ---------- Support Responsive ---------- */
@media (max-width: 640px) {
  .goldatm-support-hero {
    padding: 40px 24px 60px;
  }

  .goldatm-support-faq,
  .goldatm-support-articles,
  .goldatm-support-contact {
    padding: 0 24px 60px;
  }

  .goldatm-support-contact__grid {
    grid-template-columns: 1fr;
  }
}