/* page-home.css
   Specific tweaks for the Buddhadham home/article page you posted.
   Load this AFTER components.css so it can override defaults.
*/

/* --- page container tweaks --- */
article.prose {
  padding-top: 0;            /* header has its own padding */
  padding-bottom: 2rem;
  gap: 1.2rem;
}

/* tighten hero area spacing on small screens */
.page-header {
  padding: clamp(28px, 6vw, 48px) 20px;
}

/* subtitle slightly lighter and comfortable width */
.subtitle {
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: 0.25rem;
  line-height: 1.45;
}

/* --- link lists / section titles --- */
.section-title {
  font-size: 1.12rem;
  margin: 1.2rem 0 .5rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 55%, var(--card));
  padding-bottom: .45rem;
  width: 100%;
}

/* clean list style for link-list */
.link-list {
  list-style: none;
  margin: .6rem 0 1.2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .45rem .9rem;
}
.link-list li { line-height: 1.5; }
.link-list a {
  display: inline-block;
  padding: .35rem .5rem;
  border-radius: 8px;
  color: var(--link);
  text-decoration: none;
}
.link-list a:hover { background: var(--link); color: var(--bg); }

/* --- figure & figcaption --- */
/* prefer centered caption for this page (overrides components) */
.prose figure { text-align: center; margin: 1.2rem auto; }
.prose figure figcaption {
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  font-style: italic;
  margin-top: .4rem;
  max-width: 720px;
  padding: 0 .4rem;
}

/* override any inline image width to respect our hero sizing */
.prose img[alt="พระพุทธรูป"], .hero-img {
  width: min(100%, 420px) !important;
  display:block;
  margin: 0 auto;
  height: auto;
  border-radius: var(--radius);
}

/* --- audio player styling --- */
.prose audio {
  background: transparent;
  border-radius: 10px;
  padding: 6px;
  width: min(100%, 680px) !important;
  display: block;
  margin: 12px auto !important;
}

/* make sure audio controls are comfortably tall on mobile */
.prose audio { height: 44px; }

/* --- small housekeeping for old inline styles & partials --- */
/* support header partials that use .inline-flex / .lang-switch that appeared in your markup */
.site-header .inline-flex, .site-header__nav, .site-header__nav a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.lang-switch, .site-header__lang { margin-left: auto; }

/* ensure header links have consistent visual */
.site-header a, .site-header__nav a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}
.site-header a:hover { color: var(--bg); background: var(--link); padding: 6px 8px; border-radius: 6px; }

/* --- accessibility / print --- */
@media print {
  .link-list { grid-template-columns: 1fr; gap: .2rem; }
  .prose img, .hero-img { page-break-inside: avoid; max-width: 100%; }
  .site-header, .site-footer, #toTop { display: none; }
}

/* --- responsive tweaks --- */
@media (max-width: 720px) {
  .link-list { grid-template-columns: 1fr; }
  .page-header { padding: 28px 14px; }
  .subtitle { font-size: 1rem; padding: 0 6px; }
  .site-header { padding: .55rem 12px; }
}