/* =========================================================
   Inner pages — Law Office of Baron Drexel
   Loaded AFTER style.css (reuses tokens, header, footer, btn).
   ========================================================= */

/* Active nav item + solid header on inner pages */
.mainnav__links a.is-active { color: var(--gold); }
.mainnav__links a.is-active::after { width: 100%; }

/* ---------- Page banner (hero for inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--navy-900); color: #fff; text-align: center;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 4.5rem) 0 4.5rem;
}
.page-hero__bg { position: absolute; inset: 0; background: url("../images/hero-bg.jpg") center/cover no-repeat; opacity: .5; }
.page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,16,37,.82) 0%, rgba(0,16,37,.9) 100%); }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__eyebrow { display: inline-block; color: var(--gold); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: .9rem; margin-bottom: 1rem; }
.page-hero__title { color: #fff; font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 700; }
.page-hero__crumb { margin-top: 1rem; color: rgba(255,255,255,.7); font-size: 1.05rem; }
.page-hero__crumb a { color: rgba(255,255,255,.9); }
.page-hero__crumb a:hover { color: var(--gold); }
.page-hero__crumb i { font-size: .7rem; margin: 0 .5rem; opacity: .6; }

/* ---------- Generic content section ---------- */
.page-section { padding: 6rem 0; }
.page-section--tint { background: var(--blue-50b); }
.page-section__head { max-width: 52rem; margin: 0 auto 3rem; text-align: center; }
.page-section__head .section-lead { color: var(--blue-500); }
.section-eyebrow { display: inline-block; color: var(--blue-500); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: .85rem; margin-bottom: .75rem; }

/* ---------- Prose (article text) ---------- */
.prose { max-width: 60rem; }
.prose p { color: var(--muted); font-size: 1.15rem; line-height: 1.85; margin-bottom: 1.4rem; }
.prose h2 { color: var(--navy-800); font-size: 1.9rem; font-weight: 700; margin: 2.75rem 0 1rem; }
.prose h3 { color: var(--navy-800); font-size: 1.4rem; font-weight: 600; margin: 2rem 0 .75rem; }
.prose strong { color: var(--navy-800); }
.prose > :first-child { margin-top: 0; }

/* ---------- Split (text + image) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split--reverse .split__media { order: -1; }
.split__media { position: relative; }
.split__media img { width: 100%; max-height: 32rem; object-fit: cover; object-position: center; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.split__text .section-title { margin-bottom: 1.25rem; }
.split__text p { color: var(--muted); font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.25rem; }

/* ---------- Info / value cards ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.info-card { background: #fff; border-radius: var(--radius); padding: 2.25rem; box-shadow: var(--shadow-sm); border: 0.0625rem solid #eef2f7; }
.info-card__icon { width: 3.75rem; height: 3.75rem; border-radius: 14px; background: var(--blue-50); color: var(--navy-800); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 1.25rem; }
.info-card h3 { color: var(--navy-800); font-size: 1.35rem; font-weight: 600; margin-bottom: .75rem; }
.info-card p { color: var(--muted); font-size: 1rem; line-height: 1.7; }

/* ---------- Highlight strip / callout ---------- */
.callout { background: var(--navy-900); color: #fff; border-radius: var(--radius); padding: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; box-shadow: var(--shadow-md); }
.callout h3 { color: #fff; font-size: 1.9rem; font-weight: 700; max-width: 40rem; }
.callout p { color: rgba(255,255,255,.8); margin-top: .5rem; }
.callout .btn--light { background: #fff; color: var(--navy-800); }

/* ---------- Stat row ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
.stat-row__item { padding: 1.5rem; }
.stat-row__num { font-family: var(--font-head); font-size: 3rem; font-weight: 700; color: var(--navy-800); }
.stat-row__label { color: var(--blue-400); font-size: 1.05rem; margin-top: .25rem; }

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 1rem; margin-top: 1.5rem; }
.checklist li { display: flex; gap: .875rem; align-items: flex-start; color: var(--ink-2); font-size: 1.1rem; }
.checklist i { color: var(--blue-500); font-size: 1.25rem; margin-top: .2rem; flex: 0 0 auto; }
.checklist strong { color: var(--navy-800); }

/* ---------- Blog grid ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem; }
.blog-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 0.0625rem solid #eef2f7; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-card__media { height: 13rem; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.blog-card__tag { display: inline-block; align-self: flex-start; background: var(--blue-50); color: var(--navy-800); font-size: .78rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; padding: .3rem .75rem; border-radius: 999px; margin-bottom: 1rem; }
.blog-card__meta { color: var(--gray); font-size: .85rem; margin-bottom: .5rem; }
.blog-card h3 { color: var(--navy-800); font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin-bottom: .75rem; }
.blog-card p { color: var(--muted); font-size: .98rem; line-height: 1.6; margin-bottom: 1.25rem; }
.blog-card__more { margin-top: auto; color: var(--blue-500); font-weight: 600; font-size: .95rem; }
.blog-card__more i { font-size: .8rem; margin-left: .35rem; }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: start; }
.contact-methods { display: grid; gap: 1.5rem; }
.contact-method { display: flex; gap: 1.25rem; align-items: flex-start; }
.contact-method__icon { width: 3.5rem; height: 3.5rem; flex: 0 0 3.5rem; border-radius: 50%; background: var(--navy-900); color: #fff; display: grid; place-items: center; font-size: 1.2rem; }
.contact-method h4 { color: var(--navy-800); font-size: 1.2rem; margin-bottom: .25rem; }
.contact-method p, .contact-method a { color: var(--muted); font-size: 1.05rem; }
.contact-method a:hover { color: var(--blue-500); }
.contact-social { display: flex; gap: .875rem; margin-top: 1rem; }
.contact-social a { width: 2.875rem; height: 2.875rem; border-radius: 12px; background: var(--blue-50); color: var(--navy-800); display: grid; place-items: center; font-size: 1.1rem; transition: all .2s ease; }
.contact-social a:hover { background: var(--navy-900); color: #fff; }
.contact-card { background: #fff; border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow-md); border: 0.0625rem solid #eef2f7; }
.contact-card .field, .contact-card .field--full { margin-bottom: 1.25rem; }
.contact-card input, .contact-card textarea, .contact-card select { width: 100%; padding: .95rem 1.1rem; border: 0.0625rem solid #d7dbe6; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 1rem; color: var(--navy-800); background: #fbfcfe; }
.contact-card select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23667c99' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.25rem; }
.contact-card input:focus, .contact-card textarea:focus, .contact-card select:focus { outline: none; border-color: var(--navy-700); background: #fff; }
.contact-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cards-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  /* Odd last card: span the row and center, instead of an orphan with an empty cell */
  .cards-grid > :last-child:nth-child(odd),
  .blog-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 32rem; width: 100%; justify-self: center; }
}
@media (max-width: 900px) {
  .split, .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--reverse .split__media { order: 0; }
  /* Tall portrait photos: cap height so single-column pages don't get a huge dead image */
  .split__media img { max-height: 34rem; object-fit: cover; object-position: center top; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .page-section { padding: 4rem 0; }
  .cards-grid, .blog-grid, .stat-row { grid-template-columns: 1fr; }
  .cards-grid > :last-child:nth-child(odd),
  .blog-grid > :last-child:nth-child(odd) { max-width: none; }
  .callout { padding: 2rem; }
  .contact-card { padding: 1.75rem; }
  .contact-card .form-row { grid-template-columns: 1fr; }
}