/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme — Satilla Training Center
 Author:         DABL Consulting
 Template:       Divi
 Version:        1.2.0
*/

/* ==========================================================================
   Satilla Training Center — design system
   Source: docs/2026-08-24-satilla-wordpress-redesign.md
   ========================================================================== */

:root {
  --stc-forest:    #1a472a;  /* primary CTA */
  --stc-forest-dk: #133319;  /* CTA hover */
  --stc-teal:      #2d8a7a;  /* secondary */
  --stc-success:   #4a9966;  /* accent */
  --stc-cream:     #f5f3ed;  /* page background */
  --stc-charcoal:  #2c2c2a;  /* body text */
  --stc-border:    #e5e4e0;  /* rules, card edges */

  --stc-s-section: 48px;
  --stc-s-major:   32px;
  --stc-s-card:    24px;
  --stc-s-inner:   16px;

  --stc-max:       1200px;   /* global so it works outside .stc-band too */
}

/* --- Typography ---------------------------------------------------------- */

body,
.et_pb_module,
#main-content {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--stc-charcoal);
  background-color: var(--stc-cream);
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.3;
  color: var(--stc-charcoal);
}

h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

/* --- Buttons ------------------------------------------------------------- */

.et_pb_button,
.et_pb_button:hover,
a.stc-btn {
  background-color: var(--stc-forest);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 12px 24px !important;
  min-height: 44px;          /* touch target */
  font-size: 16px;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .18s ease, transform .18s ease;
}

.et_pb_button:hover,
a.stc-btn:hover {
  background-color: var(--stc-forest-dk);
  transform: scale(.98);
  color: #fff;
}

/* Divi injects a pseudo-element arrow on hover; suppress it */
.et_pb_button:after { display: none !important; }

/* --- Accessibility ------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.et_pb_button:focus-visible {
  outline: 3px solid var(--stc-teal);
  outline-offset: 2px;
}

/* --- Responsive type ----------------------------------------------------- */

@media (max-width: 1024px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
}

@media (max-width: 767px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
}

/* ==========================================================================
   Homepage
   ========================================================================== */

.stc-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.stc-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  color: var(--stc-teal);
  margin: 0 0 var(--stc-s-inner);
}

.stc-lede { font-size: 18px; max-width: 60ch; }

/* --- Hero ---------------------------------------------------------------- */

.stc-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  background: var(--stc-cream);
}

.stc-hero__media { position: relative; min-height: 420px; }

.stc-hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.stc-hero__panel {
  padding: var(--stc-s-section);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--stc-charcoal);
  color: #fff;
}

.stc-hero__panel h1 { color: #fff; margin: 0 0 var(--stc-s-inner); }
.stc-hero__panel .stc-lede { color: #e8e6e0; margin: 0 0 var(--stc-s-major); }

.stc-hero__cta { display: flex; flex-wrap: wrap; gap: var(--stc-s-inner); }

.stc-btn--ghost {
  background: transparent;
  border: 2px solid #fff;
}
.stc-btn--ghost:hover { background: #fff; color: var(--stc-charcoal); }

/* --- Trust builders ------------------------------------------------------ */

.stc-trust { padding: var(--stc-s-section); }

.stc-trust__grid,
.stc-principles__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--stc-s-major);
}

.stc-trust__item {
  background: #fff;
  border: 1px solid var(--stc-border);
  border-radius: 8px;
  padding: var(--stc-s-card);
}

.stc-trust__item h3 { margin: 0 0 var(--stc-s-inner); color: var(--stc-forest); }
.stc-trust__item p  { margin: 0; }

/* --- Dual path ----------------------------------------------------------- */

.stc-paths { padding: 0 var(--stc-s-section) var(--stc-s-section); }

.stc-paths__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--stc-s-major);
}

.stc-path {
  background: var(--stc-forest);
  color: #fff;
  border-radius: 8px;
  padding: var(--stc-s-section);
}

.stc-path h3 { color: #fff; margin: 0 0 var(--stc-s-inner); }
.stc-path p  { margin: 0 0 var(--stc-s-major); color: #e2ece6; }
.stc-path .stc-btn { background: #fff; color: var(--stc-forest); }
.stc-path .stc-btn:hover { background: var(--stc-cream); color: var(--stc-forest-dk); }

/* --- Three Ps ------------------------------------------------------------ */

.stc-principles { background: #fff; border-block: 1px solid var(--stc-border); }
.stc-principles__inner { padding: var(--stc-s-section); }
.stc-principles__inner > h2 { margin-block: 0 var(--stc-s-inner); }
.stc-principles__inner > .stc-lede { margin-block: 0 var(--stc-s-major); }
.stc-principles__grid li h3 { color: var(--stc-teal); margin: 0 0 8px; }
.stc-principles__grid li p  { margin: 0; }

/* --- Locations ----------------------------------------------------------- */

.stc-locations { padding: var(--stc-s-section); text-align: center; }
.stc-locations > h2 { margin-block: 0 var(--stc-s-major); }

.stc-locations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--stc-s-major);
  margin-bottom: var(--stc-s-major);
}

.stc-location h3 { margin: 0 0 8px; font-size: 18px; color: var(--stc-forest); }
.stc-location p  { margin: 0; }
.stc-location__note {
  font-size: 14px; color: #6b6b67; margin-top: 4px !important;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .stc-trust__grid,
  .stc-principles__grid,
  .stc-locations__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .stc-hero { grid-template-columns: 1fr; }
  .stc-hero__media { min-height: 280px; }
  .stc-hero__panel,
  .stc-trust,
  .stc-principles__inner,
  .stc-locations { padding: var(--stc-s-major) var(--stc-s-card); }
  .stc-paths { padding: 0 var(--stc-s-card) var(--stc-s-major); }
  .stc-path { padding: var(--stc-s-card); }
  .stc-trust__grid,
  .stc-paths__grid,
  .stc-principles__grid,
  .stc-locations__grid { grid-template-columns: 1fr; gap: var(--stc-s-card); }
  .stc-hero__cta { flex-direction: column; align-items: stretch; }
}


/* ==========================================================================
   Divi code-module compatibility
   Divi strips <p> inside code modules, so paragraphs are .stc-p divs.
   ========================================================================== */

.stc-p { margin: 0 0 1rem; }
.stc-p:last-child { margin-bottom: 0; }

/* Divi's global list styles re-add markers; override for our own grids */
.stc-trust__grid,
.stc-trust__grid > li,
.stc-principles__grid,
.stc-principles__grid > li {
  list-style: none !important;
  list-style-type: none !important;
}
.stc-trust__grid > li::marker,
.stc-principles__grid > li::marker { content: none; }

#main-content .stc-trust__grid,
#main-content .stc-principles__grid { padding-left: 0 !important; }

/* Buttons must sit on their own line inside cards */
.stc-path .stc-btn,
.stc-locations__cta .stc-btn { margin-top: var(--stc-s-inner); }
.stc-path .stc-p { margin-bottom: var(--stc-s-inner); }

/* ==========================================================================
   Footer
   ========================================================================== */

.stc-footer {
  background: var(--stc-charcoal);
  color: #e8e6e0;
  padding: var(--stc-s-section);
}

.stc-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--stc-s-major);
  max-width: 1200px;
  margin: 0 auto;
}

.stc-footer__col h3 {
  color: #fff;
  font-size: 16px;
  margin: 0 0 var(--stc-s-inner);
}

.stc-footer__col .stc-p { font-size: 15px; margin-bottom: 8px; }
.stc-footer__note { color: #9a9a94; font-size: 13px; }

.stc-footer a { color: var(--stc-success); text-decoration: none; }
.stc-footer a:hover { color: #fff; text-decoration: underline; }

.stc-footer__credit { font-size: 14px; }

@media (max-width: 1024px) {
  .stc-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .stc-footer { padding: var(--stc-s-major) var(--stc-s-card); }
  .stc-footer__grid { grid-template-columns: 1fr; gap: var(--stc-s-card); }
}

/* Locations CTA band (addresses live in the footer, not duplicated here) */
.stc-locations__lede { margin: 0 auto var(--stc-s-major); max-width: 62ch; }
.stc-locations__cta  { margin: 0; }

/* Header logo: Divi caps by height; give it room to read at small sizes */
#logo { max-height: 62px; width: auto; }

/* ==========================================================================
   Interior pages — shared components
   ========================================================================== */

.stc-pagehead {
  background: var(--stc-charcoal);
  color: #fff;
  padding: var(--stc-s-section);
}
.stc-pagehead h1 { color: #fff; margin-block: 0 var(--stc-s-inner); }
.stc-pagehead .stc-lede { color: #e8e6e0; margin-block: 0; }

.stc-band { padding: var(--stc-s-section); }
.stc-band--alt { background: #fff; border-block: 1px solid var(--stc-border); }
.stc-band > h2 { margin-block: 0 var(--stc-s-inner); }
.stc-band > .stc-p { max-width: 68ch; }

.stc-btn--outline {
  background: transparent;
  border: 2px solid var(--stc-forest);
  color: var(--stc-forest);
  margin-left: var(--stc-s-inner);
}
.stc-btn--outline:hover { background: var(--stc-forest); color: #fff; }

.stc-contactline a { color: var(--stc-forest); font-weight: 500; }

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

.stc-cards {
  list-style: none !important;
  margin: var(--stc-s-major) 0 0;
  padding-left: 0 !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--stc-s-major);
}
.stc-cards > li::marker { content: none; }

.stc-card {
  background: var(--stc-cream);
  border: 1px solid var(--stc-border);
  border-radius: 8px;
  padding: var(--stc-s-card);
}
.stc-band--alt .stc-card { background: var(--stc-cream); }
.stc-card h3 { margin: 0 0 var(--stc-s-inner); color: var(--stc-forest); font-size: 20px; }

/* --- Dog listings -------------------------------------------------------- */

.stc-dogs {
  list-style: none !important;
  margin: 0; padding-left: 0 !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--stc-s-card);
}
.stc-dogs > li::marker { content: none; }

.stc-dog {
  background: #fff;
  border: 1px solid var(--stc-border);
  border-radius: 8px;
  padding: var(--stc-s-card);
  text-align: center;
}
.stc-dog h3 { margin: 0 0 8px; font-size: 20px; color: var(--stc-forest); }
.stc-dog a { color: var(--stc-teal); font-weight: 500; }
.stc-dog__pending { color: #6b6b67; font-style: italic; font-size: 15px; }

/* --- Document links ------------------------------------------------------ */

.stc-docs {
  list-style: none !important;
  margin: var(--stc-s-major) 0 0; padding-left: 0 !important;
  display: grid; gap: 12px; max-width: 520px;
}
.stc-docs > li::marker { content: none; }

.stc-docs a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--stc-s-inner);
  padding: 14px var(--stc-s-card);
  background: #fff;
  border: 1px solid var(--stc-border);
  border-radius: 6px;
  color: var(--stc-charcoal);
  text-decoration: none;
  min-height: 44px;
}
.stc-docs a:hover { border-color: var(--stc-forest); color: var(--stc-forest); }
.stc-docs span {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--stc-forest);
  padding: 3px 8px; border-radius: 3px;
}

/* --- FAQ ----------------------------------------------------------------- */

.stc-faq { margin: var(--stc-s-major) 0 var(--stc-s-major); max-width: 72ch; }
.stc-faq dt { font-weight: 500; font-size: 18px; color: var(--stc-forest); margin-top: var(--stc-s-card); }
.stc-faq dt:first-child { margin-top: 0; }
.stc-faq dd { margin: 8px 0 0; }

/* --- Lists, tables, notices ---------------------------------------------- */

.stc-list { margin: var(--stc-s-inner) 0 var(--stc-s-card) 1.25rem; max-width: 72ch; }
.stc-list li { margin-bottom: 10px; }

.stc-tablewrap { overflow-x: auto; margin: var(--stc-s-major) 0 var(--stc-s-inner); }
.stc-table { border-collapse: collapse; width: 100%; min-width: 420px; background: #fff; }
.stc-table th, .stc-table td {
  border: 1px solid var(--stc-border);
  padding: 12px var(--stc-s-inner);
  text-align: left;
}
.stc-table thead th { background: var(--stc-forest); color: #fff; font-weight: 500; }
.stc-table tbody tr:nth-child(even) { background: var(--stc-cream); }

.stc-note { font-size: 15px; color: #55554f; max-width: 72ch; }
.stc-notice { background: var(--stc-cream); }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .stc-cards, .stc-dogs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .stc-pagehead, .stc-band { padding: var(--stc-s-major) var(--stc-s-card); }
  .stc-cards, .stc-dogs { grid-template-columns: 1fr; gap: var(--stc-s-card); }
  .stc-btn--outline { margin-left: 0; margin-top: 12px; }
  .stc-band .stc-p .stc-btn { width: 100%; }
}

/* ==========================================================================
   Content container — centre sections on wide screens
   ========================================================================== */

.stc-pagehead,
.stc-band,
.stc-trust,
.stc-paths,
.stc-principles__inner,
.stc-locations {
  --stc-max: 1200px;
}

.stc-pagehead > *,
.stc-band > *,
.stc-trust > *,
.stc-paths > *,
.stc-principles__inner > *,
.stc-locations > * {
  max-width: var(--stc-max);
  margin-inline: auto;
}

/* Prose keeps a readable measure but stays flush with the container's left
   edge, so headings and body text share one alignment. */
.stc-band > .stc-p,
.stc-band > .stc-note,
.stc-band > .stc-faq,
.stc-band > .stc-list,
.stc-pagehead > .stc-lede {
  max-width: min(68ch, var(--stc-max));
  margin-inline: max(0px, calc((100% - var(--stc-max)) / 2)) auto;
}

/* The locations band is deliberately centre-aligned */
.stc-locations > .stc-p { margin-inline: auto; text-align: center; }

/* Hero is a full-bleed split; exclude it from the container rules */
.stc-hero > * { max-width: none; margin-inline: 0; }

/* ==========================================================================
   Studs, tiles, galleries, steps
   ========================================================================== */

.stc-studlist {
  list-style: none !important; margin: 0; padding-left: 0 !important;
  display: grid; gap: var(--stc-s-major);
}
.stc-studlist > li::marker { content: none; }

.stc-stud {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--stc-s-major);
  align-items: start;
  background: #fff;
  border: 1px solid var(--stc-border);
  border-radius: 8px;
  padding: var(--stc-s-card);
}
.stc-stud > img { width: 100%; height: auto; border-radius: 6px; display: block; }
.stc-stud h3 { margin: 0 0 4px; font-size: 24px; color: var(--stc-forest); }
.stc-stud__reg { font-weight: 500; margin-bottom: 4px !important; }
.stc-stud__meta { color: #6b6b67; font-size: 15px; }

.stc-clearances {
  list-style: none !important; margin: var(--stc-s-inner) 0; padding-left: 0 !important;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px var(--stc-s-inner);
}
.stc-clearances > li::marker { content: none; }
.stc-clearances li { font-size: 15px; }
.stc-clearances span {
  display: block; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: #6b6b67;
}

/* --- Link tiles ---------------------------------------------------------- */

.stc-tiles {
  list-style: none !important; margin: 0; padding-left: 0 !important;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stc-s-card);
}
.stc-tiles > li::marker { content: none; }

.stc-tile a {
  display: block; text-decoration: none; color: var(--stc-charcoal);
  border: 1px solid var(--stc-border); border-radius: 8px; overflow: hidden;
  background: #fff; height: 100%;
  transition: border-color .18s ease, transform .18s ease;
}
.stc-tile a:hover { border-color: var(--stc-forest); transform: translateY(-2px); }
.stc-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.stc-tile h3 { margin: 0; padding: var(--stc-s-inner); font-size: 18px; color: var(--stc-forest); }

/* --- Gallery ------------------------------------------------------------- */

.stc-gallery {
  list-style: none !important; margin: var(--stc-s-major) 0 0; padding-left: 0 !important;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stc-s-inner);
}
.stc-gallery > li::marker { content: none; }
.stc-gallery img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 6px; display: block;
}

/* --- Numbered process steps ---------------------------------------------- */

.stc-steps { list-style: none; counter-reset: stc-step; margin: var(--stc-s-major) 0 0; padding-left: 0; }
.stc-steps > li {
  counter-increment: stc-step;
  position: relative;
  padding-left: 60px;
  margin-bottom: var(--stc-s-major);
  max-width: 72ch;
}
.stc-steps > li::before {
  content: counter(stc-step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--stc-forest); color: #fff;
  border-radius: 50%; font-weight: 500;
}
.stc-steps h3 { margin: 6px 0 8px; font-size: 20px; }

/* --- Figures and inline logos -------------------------------------------- */

.stc-figure {
  width: 100%; max-width: var(--stc-max); height: auto;
  border-radius: 8px; display: block;
  margin: 0 auto var(--stc-s-major);
}
.stc-logo-inline { max-width: 220px; height: auto; display: block; margin-bottom: var(--stc-s-card); }
.stc-ann__meta { color: var(--stc-teal); font-weight: 500; }

/* --- Divi contact form --------------------------------------------------- */

.et_pb_contact_form_container .et_pb_contact_field input,
.et_pb_contact_form_container .et_pb_contact_field textarea {
  border: 1px solid var(--stc-border) !important;
  border-radius: 6px !important;
  padding: 12px var(--stc-s-inner) !important;
}
.et_pb_contact_form_container .et_pb_contact_submit { min-height: 44px; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .stc-tiles, .stc-gallery { grid-template-columns: repeat(2, 1fr); }
  .stc-stud { grid-template-columns: 240px 1fr; }
}
@media (max-width: 767px) {
  .stc-stud { grid-template-columns: 1fr; gap: var(--stc-s-card); }
  .stc-clearances { grid-template-columns: repeat(2, 1fr); }
  .stc-tiles { grid-template-columns: 1fr; }
  .stc-gallery { grid-template-columns: repeat(2, 1fr); }
  .stc-steps > li { padding-left: 52px; }
}

/* Inline prose links inside content sections */
.stc-band .stc-p a:not(.stc-btn),
.stc-stud__body a:not(.stc-btn) {
  color: var(--stc-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.stc-band .stc-p a:not(.stc-btn):hover,
.stc-stud__body a:not(.stc-btn):hover { color: var(--stc-forest); }

/* Banner image sitting directly under a page header.
   Portrait phone photos are cropped to a landscape band so they do not
   dominate the page. */
.stc-figure--banner {
  width: 100%;
  max-width: none;
  height: clamp(240px, 34vw, 420px);
  object-fit: cover;
  object-position: center 40%;
  border-radius: 0;
  margin: 0 0 0;
  display: block;
}

/* ==========================================================================
   Per-photo crop focus
   These photos are portrait phone shots displayed in landscape or square
   frames. Each rule points the crop at the dog's (or person's) face so the
   subject is never cut off. Keyed on filename so it applies wherever the
   image is used — banner, tile, or gallery.
   ========================================================================== */

.stc-figure--banner,
.stc-tile img,
.stc-gallery img { object-position: center 35%; }   /* sensible default */

img[src*="ourdogs-started-tile"] { object-position: center 18% !important; }
img[src*="ourdogs-studs-tile"]   { object-position: center 22% !important; }
img[src*="ourdogs-puppies-tile"] { object-position: center 38% !important; }
img[src*="ourdogs-dams-tile"]    { object-position: center 30% !important; }
img[src*="home-about-2"]         { object-position: center 32% !important; }
img[src*="home-meetdogs"]        { object-position: center 50% !important; }
img[src*="training-ga-3"]        { object-position: center 58% !important; }
img[src*="training-ab-3"]        { object-position: center 60% !important; }
img[src*="litter-img2"]          { object-position: center 28% !important; }

/* Litter gallery: these are hand-held shots with subjects high in frame */
img[src*="litter-img1"] { object-position: center 30% !important; }
img[src*="litter-img3"] { object-position: center 50% !important; }
img[src*="litter-img4"] { object-position: center 45% !important; }
img[src*="litter-img5"] { object-position: center 30% !important; }
img[src*="litter-img6"] { object-position: center 22% !important; }
img[src*="litter-img7"] { object-position: center 30% !important; }
img[src*="litter-img8"] { object-position: center 30% !important; }

/* Give banners a little more height so less of the photo is cut away */
.stc-figure--banner { height: clamp(280px, 38vw, 460px); }

/* ==========================================================================
   Embedded PDF viewer
   ========================================================================== */

.stc-pdf {
  max-width: var(--stc-max);
  margin: var(--stc-s-major) auto var(--stc-s-inner);
  margin-inline: max(0px, calc((100% - var(--stc-max)) / 2)) auto;
  border: 1px solid var(--stc-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.stc-pdf iframe {
  display: block;
  width: 100%;
  height: clamp(420px, 78vh, 900px);
  border: 0;
}

.stc-pdf__fallback { font-size: 15px; color: #55554f; }

/* Mobile browsers frequently refuse to render a PDF in an iframe, so shrink
   the frame there and lean on the fallback link. */
@media (max-width: 767px) {
  .stc-pdf iframe { height: 60vh; }
  .stc-pdf__fallback { font-weight: 500; }
}

/* Tablet: the hero stays a 50/50 split down to 767px, so the headline is
   sitting in a ~340px column. Ease the type down so it wraps to three lines
   instead of four, and keep the two CTAs on one row. */
@media (min-width: 768px) and (max-width: 1024px) {
  .stc-hero__panel h1 { font-size: 30px; }
  .stc-hero__panel .stc-lede { font-size: 16px; }
  .stc-hero__panel { padding: var(--stc-s-major) var(--stc-s-card); }
  .stc-hero__cta .stc-btn { padding: 10px 16px !important; font-size: 15px; }
}

/* ==========================================================================
   Image framing v2
   ========================================================================== */

.stc-hero__media { min-height: 540px; }
.stc-hero__media img { object-position: center 45%; }

.stc-figure--banner {
  height: auto;
  max-width: 860px;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  border-radius: 8px;
}
@media (max-width: 900px) {
  .stc-figure--banner { max-width: 100%; aspect-ratio: 4 / 3; }
}

img[src*="contact-photo"]        { object-position: center 16% !important; }
img[src*="ourdogs-puppies-tile"] { object-position: center 40% !important; }
img[src*="ourdogs-started-tile"] { object-position: center 16% !important; }
img[src*="ourdogs-studs-tile"]   { object-position: center 20% !important; }
img[src*="home-about-2"]         { object-position: center 30% !important; }
img[src*="litter-img2"]          { object-position: center 24% !important; }
img[src*="training-ab-3"]        { object-position: center 58% !important; }

@media (max-width: 767px) {
  .stc-hero__media { min-height: 320px; }
  .stc-figure--banner { aspect-ratio: 4 / 3; border-radius: 0; }
}

/* ==========================================================================
   Wide banner — for photos that are genuinely landscape.
   ========================================================================== */

.stc-figure--wide {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 2.25 / 1;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0;
  margin: 0;
  display: block;
}
@media (min-width: 1600px) {
  .stc-figure--wide { aspect-ratio: auto; height: 620px; }
}
@media (max-width: 767px) {
  .stc-figure--wide { aspect-ratio: 4 / 3; object-position: center 40%; }
}

img[src*="training-ab-3-wide"]        { object-position: center 60% !important; }
img[src*="home-meetdogs-wide"]        { object-position: center 55% !important; }
img[src*="ourdogs-started-tile-wide"] { object-position: center 45% !important; }
img[src*="ourdogs-puppies-tile-wide"] { object-position: center 45% !important; }
img[src*="ourdogs-studs-tile-wide"]   { object-position: center 50% !important; }
img[src*="litter-img2-wide"]          { object-position: center 45% !important; }
img[src*="training-ga-3-wide"]        { object-position: center 55% !important; }
img[src*="home-about-2-wide"]         { object-position: center 45% !important; }