/* =====================================================================
   TREATMENT-ARCHIVE.CSS — R3 Medispa Theme
   Loaded only on: archive-treatment.php AND taxonomy-pathway.php.
Not yet designed. Should style .therapy-filter-bar / .therapy-card / #therapyGrid --
reuse the .therapy-* patterns already written in home.css's THERAPIES section as a
starting point, then promote shared rules here so both the homepage grid and this
archive look consistent without duplicating CSS.
   ===================================================================== */

.treatment-archive {
   --forest-900:#0f2318;--forest-800:#1a3a28;--forest-700:#25533a;
   --forest-600:#2e6447;--forest-500:#3a7a56;--forest-400:#5a9970;
   --forest-300:#86b997;--forest-200:#b8d8c4;--forest-100:#dceee4;
   --terra:#c4532e;--terra-hover:#8b3a2a;
   --ink:#1c2320;--ink-mid:#3d4a42;--ink-light:#6b7d72;
   --white:#ffffff;--off-white:#fdfcfa;
   --cream:#f8f5f0;--cream-dark:#e4dbd1;
   --border:rgba(26,58,40,.10);
   --r-sm:8px;--r-md:12px;--r-lg:20px;--r-pill:999px;
   --shadow-md:0 8px 32px rgba(0,0,0,.10);

   background: var(--cream);
   color: var(--ink);
   font-family: 'DM Sans', sans-serif;
   font-weight: 300;
   /* Fixed nav is 104px tall — same offset .tx-hero uses */
   margin-top: 104px;
}

.treatment-archive .container {
   max-width: 1300px;
   margin-inline: auto;
   padding-inline: 4.5rem;
}

/* ---------- Header ---------- */

.treatment-archive .archive-header {
   background: var(--white);
   padding: 88px 4.5rem 56px;
   text-align: center;
   border-bottom: 1px solid var(--border);
}

.treatment-archive .archive-eyebrow {
   font-size: .68rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--forest-500);
   font-weight: 600;
   margin: 0 0 1rem;
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

.treatment-archive .archive-eyebrow::before {
   content: '';
   width: 18px;
   height: 1px;
   background: currentColor;
   flex-shrink: 0;
}

.treatment-archive .archive-title {
   font-family: 'Fraunces', serif;
   font-weight: 300;
   font-size: clamp(34px, 4.5vw, 56px);
   line-height: 1.1;
   letter-spacing: -.015em;
   color: var(--forest-900);
   margin: 0 0 16px;
}

.treatment-archive .archive-intro {
   max-width: 560px;
   margin: 0 auto;
   color: var(--ink-mid);
   font-size: 14px;
   line-height: 1.85;
}

/* ---------- Grid ---------- */

.treatment-grid {
   list-style: none;
   margin: 0 0 56px;
   padding: 96px 0 0;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.25rem;
   max-width: 1300px;
   margin-inline: auto;
}

@media (max-width: 1024px) {
   .treatment-grid { grid-template-columns: repeat(3, 1fr); padding-top: 64px; }
   .treatment-archive .archive-header,
   .treatment-archive .what-section { padding-inline: 3rem; }
}

@media (max-width: 768px) {
   .treatment-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding-inline: 1.5rem; padding-top: 48px; }
   .treatment-archive .archive-header { padding: 56px 1.5rem 40px; }
   .treatment-archive .container { padding-inline: 1.5rem; }
}

@media (max-width: 480px) {
   .treatment-grid { grid-template-columns: 1fr; padding-inline: 1.25rem; }
}

/* ---------- Card ---------- */

.treatment-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   overflow: hidden;
   transition: box-shadow .25s, transform .25s;
}

.treatment-card:hover,
.treatment-card:focus-within {
   box-shadow: var(--shadow-md);
   transform: translateY(-3px);
}

.treatment-card__link {
   display: flex;
   flex-direction: column;
   height: 100%;
   color: inherit;
   text-decoration: none;
}

.treatment-card__link:focus-visible {
   outline: 2px solid var(--forest-500);
   outline-offset: 2px;
}

.treatment-card__media {
   position: relative;
   aspect-ratio: 4 / 3;
   background: var(--cream-dark);
   overflow: hidden;
}

.treatment-card__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .4s ease;
}

.treatment-card:hover .treatment-card__image {
   transform: scale(1.04);
}

.treatment-card__media-placeholder {
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, var(--cream-dark), var(--cream));
}

.treatment-card__badge {
   position: absolute;
   top: 12px;
   left: 12px;
   background: rgba(253, 252, 250, .92);
   color: var(--forest-800);
   font-size: .625rem;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   padding: 5px 10px;
   border-radius: var(--r-pill);
   backdrop-filter: blur(2px);
}

.treatment-card__body {
   padding: 1.75rem 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1;
}

.treatment-card__title {
   font-family: 'Fraunces', serif;
   font-weight: 300;
   font-size: 18px;
   line-height: 1.25;
   color: var(--ink);
   margin: 0 0 2px;
}

.treatment-card__tagline {
   font-size: 13.5px;
   line-height: 1.7;
   color: var(--ink-light);
   margin: 0;
   flex: 1;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.treatment-card__meta {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: .75rem;
   color: var(--ink-light);
}

.treatment-card__meta-icon {
   flex-shrink: 0;
   color: var(--forest-500);
}

.treatment-card__cta {
   margin-top: 8px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: .75rem;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--terra);
}

.treatment-card__cta span {
   transition: transform .2s ease;
}

.treatment-card:hover .treatment-card__cta span {
   transform: translateX(3px);
}

/* ---------- Pagination ---------- */

.treatment-archive .pagination,
.treatment-archive .navigation.pagination {
   display: flex;
   justify-content: center;
   gap: 8px;
   flex-wrap: wrap;
   padding-bottom: 96px;
}

.treatment-archive .page-numbers {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 40px;
   height: 40px;
   padding-inline: 12px;
   border: 1px solid var(--border);
   border-radius: var(--r-sm);
   color: var(--ink);
   text-decoration: none;
   font-size: .8125rem;
   font-family: 'DM Sans', sans-serif;
   transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.treatment-archive .page-numbers.current {
   background: var(--forest-800);
   border-color: var(--forest-800);
   color: #fff;
}

.treatment-archive .page-numbers:hover:not(.current):not(.dots) {
   border-color: var(--forest-500);
   color: var(--forest-500);
}

.treatment-archive .archive-empty {
   text-align: center;
   padding: 96px 0;
   color: var(--ink-light);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
   .treatment-card,
   .treatment-card__image,
   .treatment-card__cta span {
      transition: none;
   }
}