/* ==========================================================================
   StayHygge Core — Frontend CSS Design System
   Scope: .shc-page  |  Prefix: --shc-*  /  .shc-*
   Aesthetic: Warm Architectural — Jost headings, Inter body, cream canvas,
   sage + terracotta accents. Luxury editorial, not a clone of sibling plugins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens  (custom properties on root scope element .shc-page)
   Override at runtime via Task 4 inline <style>: .shc-page { --shc-cream: ...; }
   Do NOT add !important here — tokens must remain overridable.
   -------------------------------------------------------------------------- */

.shc-page {
    --shc-cream:        #faf6f0;
    --shc-charcoal:     #2e2a25;
    --shc-sage:         #728474;
    --shc-terra:        #c06a46;
    --shc-grey:         #6b6560;
    --shc-line:         #e7ddd0;
    --shc-font:         'Inter', sans-serif;
    --shc-font-heading: 'Jost', sans-serif;
    --shc-radius:       6px;
    --shc-transition:   .3s ease;
    --shc-max-width:    1200px;

    /* Spacing scale — keep padding values on these tokens (see padding audit). */
    --shc-space-section: 88px;  /* vertical section rhythm; shrinks on mobile */
    --shc-space-gutter:  28px;  /* horizontal container + card gutter */
    --shc-space-card:    32px;  /* card internal vertical padding */

    font-family: var(--shc-font);
    font-weight: 300;
    color: var(--shc-grey);
    background: var(--shc-cream);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   2. Scoped Reset
   -------------------------------------------------------------------------- */

.shc-page *,
.shc-page *::before,
.shc-page *::after {
    box-sizing: border-box;
}

.shc-page h1,
.shc-page h2,
.shc-page h3,
.shc-page h4,
.shc-page h5,
.shc-page h6,
.shc-page p {
    margin: 0;
    padding: 0;
}

.shc-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

.shc-page ul,
.shc-page ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shc-page a {
    color: var(--shc-charcoal);
    text-decoration: none;
    transition: color var(--shc-transition);
}

.shc-page a:hover {
    color: var(--shc-terra);
}

/* --------------------------------------------------------------------------
   3. Typography — Headings (Jost 300 uppercase)
   -------------------------------------------------------------------------- */

.shc-page h1,
.shc-page h2,
.shc-page h3,
.shc-page h4,
.shc-page h5,
.shc-page h6 {
    font-family: var(--shc-font-heading);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--shc-charcoal);
    line-height: 1.12;
}

.shc-page h1 { font-size: 3.5rem; }
.shc-page h2 { font-size: 2.25rem; }
.shc-page h3 { font-size: 1.5rem; }
.shc-page h4 { font-size: 1.125rem; }

.shc-page p {
    line-height: 1.8;
    color: var(--shc-grey);
}

.shc-page p + p {
    margin-top: 1.25em;
}

/* Semantic typography hooks used by template tasks */
.shc-h1 {
    font-family: var(--shc-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--shc-charcoal);
    line-height: 1.1;
}

.shc-h2 {
    font-family: var(--shc-font-heading);
    font-size: 2.25rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--shc-charcoal);
    line-height: 1.15;
}

/* Eyebrow label — small, wide-tracked, terracotta */
.shc-eyebrow {
    display: inline-block;
    font-family: var(--shc-font-heading);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--shc-terra);
    margin-bottom: 12px;
}

/* Thin terracotta hairline rule */
.shc-rule {
    width: 48px;
    height: 1px;
    background: var(--shc-terra);
    border: 0;
    margin: 0;
}

/* Screen-reader only utility */
.shc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* --------------------------------------------------------------------------
   4. Container & Section Rhythm  [hooks: .shc-container, .shc-section]
   -------------------------------------------------------------------------- */

.shc-container {
    max-width: var(--shc-max-width);
    margin: 0 auto;
    padding: 0 var(--shc-space-gutter);
}

.shc-section {
    padding: var(--shc-space-section) 0;
}

.shc-section--alt {
    background-color: #f4ede4;
}

.shc-section--dark {
    background-color: var(--shc-charcoal);
    color: #fff;
}

.shc-section--dark .shc-h1,
.shc-section--dark .shc-h2,
.shc-section--dark h1,
.shc-section--dark h2,
.shc-section--dark h3 {
    color: #fff;
}

.shc-section--dark p {
    color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   5. Button  [hook: .shc-btn]
   Terracotta solid, uppercase Jost, no border-radius (sharp architectural).
   -------------------------------------------------------------------------- */

.shc-btn {
    display: inline-block;
    font-family: var(--shc-font-heading);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 14px 28px;
    background: var(--shc-terra);
    color: #fff;
    border: 1px solid var(--shc-terra);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--shc-transition), border-color var(--shc-transition);
    white-space: nowrap;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
}

.shc-btn:hover {
    background: #a85835;
    border-color: #a85835;
    color: #fff;
}

.shc-btn:focus-visible {
    outline: 2px solid var(--shc-terra);
    outline-offset: 3px;
}

.shc-btn:active {
    opacity: .9;
}

/* Ghost variant — for use on dark/image backgrounds */
.shc-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.shc-btn--ghost:hover {
    background: #fff;
    color: var(--shc-charcoal);
    border-color: #fff;
}

/* Outline variant */
.shc-btn--outline {
    background: transparent;
    color: var(--shc-terra);
    border-color: var(--shc-terra);
}

.shc-btn--outline:hover {
    background: var(--shc-terra);
    color: #fff;
}

/* --------------------------------------------------------------------------
   6. Hero  [hook: .shc-hero]
   Full-width image hero with dark overlay; template sets background-image
   via inline style on .shc-hero__bg. Feather fade to cream at bottom.
   -------------------------------------------------------------------------- */

.shc-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
}

.shc-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.shc-hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(46, 42, 37, var(--shc-hero-overlay, 0.48));
    z-index: 1;
}

/* Feather-edge fade into cream background */
.shc-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(to top, var(--shc-cream), transparent);
    z-index: 2;
    pointer-events: none;
}

.shc-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 80px var(--shc-space-gutter);
    max-width: 860px;
}

.shc-hero__eyebrow {
    display: inline-block;
    font-family: var(--shc-font-heading);
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 20px;
}

.shc-hero__title {
    font-family: var(--shc-font-heading);
    font-size: 4rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 20px;
}

.shc-hero__subtitle {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 36px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

.shc-hero__rule {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    border: 0;
    margin: 0 auto 28px;
}

/* --------------------------------------------------------------------------
   7. Story / Brand Narrative  [hook: .shc-story]
   Editorial prose block, optionally with a side image (2-col on desktop).
   Markup: .shc-story > .shc-story__copy + optional .shc-story__image
   -------------------------------------------------------------------------- */

/* Single-column editorial story. Each section is copy at a comfortable reading
   width, followed by an optional full-width feature image — so images sit
   between the sections rather than starving a cramped side column. */
.shc-story {
    display: block;
}

.shc-story__section {
    margin-bottom: 64px;
}

.shc-story__section:last-child {
    margin-bottom: 0;
}

.shc-story__heading {
    margin-bottom: 20px;
}

.shc-story__image {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--shc-radius);
}

/* Section image sits under its copy; legacy top image keeps a bottom gap. */
.shc-story__section .shc-story__image {
    margin-top: 40px;
}

.shc-story > .shc-story__image {
    margin-bottom: 48px;
}

.shc-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shc-story__copy {
    max-width: 720px;
    margin: 0 auto;
}

.shc-story__copy p {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--shc-grey);
}

.shc-story__copy p + p {
    margin-top: 1.25em;
}

.shc-story__copy .shc-eyebrow {
    margin-bottom: 16px;
}

/* Section headings within the story (e.g. "The Stay Hygge Story",
   "Giving Back to Bethel"). */
.shc-story__copy h2,
.shc-story__copy h3 {
    font-size: 1.375rem;
    margin: 48px 0 18px;
}

.shc-story__copy .shc-rule {
    margin: 24px 0;
}

/* --------------------------------------------------------------------------
   8. Values Card Grid  [hook: .shc-values]
   Markup: .shc-values > .shc-values__grid > .shc-values__card
           .shc-values__card > .shc-values__icon + .shc-values__title + p
   -------------------------------------------------------------------------- */

.shc-values {
    /* Section wrapper; background set by modifier or parent .shc-section */
}

.shc-values__header {
    text-align: center;
    margin-bottom: 56px;
}

.shc-values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.shc-values__card {
    padding: var(--shc-space-card) var(--shc-space-gutter);
    border: 1px solid var(--shc-line);
    background: #fff;
    transition: border-color var(--shc-transition), box-shadow var(--shc-transition);
}

.shc-values__card:hover {
    border-color: var(--shc-terra);
    box-shadow: 0 4px 24px rgba(192, 106, 70, 0.08);
}

/* Optional dashicon glyph accent (terracotta). Scoped under .shc-page so it
   overrides the core .dashicons sizing regardless of stylesheet load order. */
.shc-page .shc-values__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 34px;
    line-height: 1;
    color: var(--shc-terra);
    background: none;
    margin-bottom: 20px;
}

.shc-values__title {
    font-family: var(--shc-font-heading);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--shc-charcoal);
    margin-bottom: 12px;
}

.shc-values__card p {
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--shc-grey);
}

/* --------------------------------------------------------------------------
   8b. What We Do  [hook: .shc-services]
   Markup: .shc-services > .shc-services__header + .shc-services__grid
           .shc-services__grid > a.shc-services__card
   -------------------------------------------------------------------------- */

.shc-services__header {
    text-align: center;
    margin-bottom: 56px;
}

.shc-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.shc-services__card {
    display: flex;
    flex-direction: column;
    padding: var(--shc-space-card) var(--shc-space-gutter);
    background: var(--shc-cream);
    border: 1px solid var(--shc-line);
    border-radius: var(--shc-radius);
    text-decoration: none;
    color: inherit;
    transition: transform var(--shc-transition),
                border-color var(--shc-transition),
                box-shadow var(--shc-transition);
}

a.shc-services__card:hover {
    transform: translateY(-4px);
    border-color: var(--shc-terra);
    box-shadow: 0 16px 40px rgba(46, 42, 37, 0.08);
}

.shc-services__title {
    font-family: var(--shc-font-heading);
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--shc-charcoal);
    margin-bottom: 12px;
}

.shc-services__text {
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--shc-grey);
    margin-bottom: 20px;
}

.shc-services__arrow {
    margin-top: auto;
    font-size: 1.125rem;
    color: var(--shc-terra);
    transition: transform var(--shc-transition);
}

a.shc-services__card:hover .shc-services__arrow {
    transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   9. Team Grid  [hook: .shc-team]
   Markup: .shc-team > .shc-team__grid > .shc-team__member
           .shc-team__member > .shc-team__photo + .shc-team__name + .shc-team__role + p
   -------------------------------------------------------------------------- */

.shc-team__header {
    text-align: center;
    margin-bottom: 56px;
}

.shc-team__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.shc-team__member {
    text-align: center;
}

.shc-team__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: 20px;
}

.shc-team__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--shc-transition);
}

.shc-team__member:hover .shc-team__photo img {
    transform: scale(1.03);
}

.shc-team__name {
    font-family: var(--shc-font-heading);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--shc-charcoal);
    margin-bottom: 6px;
}

.shc-team__role {
    font-size: .875rem;
    color: var(--shc-terra);
    letter-spacing: .04em;
    margin-bottom: 12px;
}

.shc-team__member p {
    font-size: .9375rem;
    color: var(--shc-grey);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   10. Stats Row  [hook: .shc-stats]
   Markup: .shc-stats > .shc-stats__row > .shc-stats__item
           .shc-stats__item > .shc-stats__number + .shc-stats__label
   Big editorial figures — large Jost numerals, small tracked labels.
   -------------------------------------------------------------------------- */

.shc-stats {
    border-top: 1px solid var(--shc-line);
    border-bottom: 1px solid var(--shc-line);
    padding: 64px 0;
}

.shc-stats__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.shc-stats__item {
    text-align: center;
    padding: 0 var(--shc-space-gutter);
    border-right: 1px solid var(--shc-line);
}

.shc-stats__item:last-child {
    border-right: 0;
}

.shc-stats__number {
    display: block;
    font-family: var(--shc-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--shc-charcoal);
    letter-spacing: -.01em;
    line-height: 1;
    margin-bottom: 10px;
}

.shc-stats__label {
    display: block;
    font-family: var(--shc-font-heading);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--shc-grey);
}

/* On the dark stats band, force light text + subtle dividers (the base
   number/label colors are dark and would be invisible on charcoal). */
.shc-section--dark .shc-stats {
    border-color: rgba(255, 255, 255, 0.15);
}
.shc-section--dark .shc-stats__item {
    border-right-color: rgba(255, 255, 255, 0.15);
}
.shc-section--dark .shc-stats__number {
    color: #fff;
}
.shc-section--dark .shc-stats__label {
    color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   11. CTA Band  [hook: .shc-cta]
   Full-width charcoal band with centered heading + button.
   Markup: .shc-cta > .shc-container > .shc-cta__inner
           .shc-cta__inner > .shc-eyebrow + .shc-cta__heading + .shc-cta__body + .shc-btn
   -------------------------------------------------------------------------- */

.shc-cta {
    background: var(--shc-charcoal);
    color: #fff;
    padding: var(--shc-space-section) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle warm texture hint */
.shc-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(192, 106, 70, 0.12) 0%, transparent 65%);
    pointer-events: none;
}

.shc-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.shc-cta .shc-eyebrow {
    color: var(--shc-terra);
    margin-bottom: 16px;
}

/* .shc-page prefix so #fff beats the base `.shc-page h2` charcoal color. */
.shc-page .shc-cta__heading {
    font-family: var(--shc-font-heading);
    font-size: 2.5rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
}

.shc-cta__body {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.75;
    margin-bottom: 36px;
}

/* --------------------------------------------------------------------------
   12. Contact Grid  [hook: .shc-contact-grid]
   2-column layout: left = form (.shc-form), right = contact details (.shc-details).
   Decision: form takes 3/5 width (slightly wider), details 2/5 on desktop.
   Markup: .shc-contact-grid > .shc-contact-grid__form + .shc-contact-grid__details
   -------------------------------------------------------------------------- */

/* Keep the whole Contact page to a focused width so the form doesn't stretch,
   even if the active theme renders our template in a full-width wrapper. */
.shc-page--contact .shc-container {
    max-width: 1080px;
}

/* Contact page header (eyebrow + title + intro) sits above the form/details
   grid — give it room so the form isn't smushed against the intro. */
.shc-page--contact .shc-section__header {
    margin-bottom: 56px;
}

.shc-contact-intro {
    max-width: none;
    margin: 20px 0 0;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--shc-grey);
}

.shc-contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 64px;
    align-items: stretch;
    max-width: 1000px;
}

.shc-contact-grid__form {
    /* Contains .shc-form */
}

/* Vertical divider between the form and the details column. */
.shc-contact-grid__details {
    border-left: 1px solid var(--shc-line);
    padding-left: 64px;
}

/* --------------------------------------------------------------------------
   13. Form  [hook: .shc-form]
   Flat, architectural inputs — no rounded corners, hairline borders.
   Markup: .shc-form > .shc-form__group > .shc-form__label + .shc-form__input
           Textarea: .shc-form__input--textarea
           Submit: .shc-btn inside .shc-form__submit
   -------------------------------------------------------------------------- */

.shc-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.shc-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.shc-form__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shc-form__label {
    font-family: var(--shc-font-heading);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--shc-charcoal);
}

/* .shc-page prefix raises specificity above a theme's default input[type=...]
   styling, so our minimal underline fields win instead of theme boxes. */
.shc-page .shc-form__input {
    font-family: var(--shc-font);
    font-size: .9375rem;
    font-weight: 300;
    color: var(--shc-charcoal);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--shc-line);
    border-radius: 0;
    box-shadow: none;
    padding: 10px 0;
    width: 100%;
    outline: none;
    transition: border-color var(--shc-transition);
    -webkit-appearance: none;
    appearance: none;
}

.shc-page .shc-form__input::placeholder {
    color: var(--shc-line);
    font-weight: 300;
}

.shc-page .shc-form__input:focus {
    border-color: transparent;
    border-bottom-color: var(--shc-terra);
    box-shadow: none;
    outline: none;
}

.shc-page .shc-form__input--textarea {
    resize: vertical;
    min-height: 140px;
    border: 1px solid var(--shc-line);
    padding: 12px 16px;
    font-size: .9375rem;
}

.shc-page .shc-form__input--textarea:focus {
    border-color: var(--shc-terra);
}

.shc-form__submit {
    margin-top: 8px;
}

.shc-form__note {
    font-size: .8125rem;
    color: var(--shc-grey);
    margin-top: 12px;
}

/* --------------------------------------------------------------------------
   14. Contact Details  [hook: .shc-details]
   Stacked key-value contact info block with terracotta accent lines.
   Markup: .shc-details > .shc-details__group (repeating)
           .shc-details__group > .shc-details__label + .shc-details__value
   -------------------------------------------------------------------------- */

.shc-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.shc-details__group {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--shc-line);
}

.shc-details__group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.shc-details__label {
    font-family: var(--shc-font-heading);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--shc-terra);
    margin-bottom: 8px;
}

.shc-details__value {
    font-size: 1rem;
    color: var(--shc-charcoal);
    line-height: 1.6;
    font-weight: 300;
}

.shc-details__value a {
    color: var(--shc-charcoal);
    text-decoration: none;
    transition: color var(--shc-transition);
}

.shc-details__value a:hover {
    color: var(--shc-terra);
}

.shc-details__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shc-details__list li {
    font-size: 1rem;
    font-weight: 300;
    color: var(--shc-charcoal);
    line-height: 1.5;
    padding: 8px 0 8px 20px;
    position: relative;
    border-bottom: 1px solid var(--shc-line);
}

.shc-details__list li:last-child {
    border-bottom: 0;
}

.shc-details__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 8px;
    height: 1px;
    background: var(--shc-terra);
}

/* --------------------------------------------------------------------------
   15. Blog Hero  [hook: .shc-blog-hero]
   Large featured post: full-width card with left-aligned text overlay.
   Decision: 60/40 split — image right (background), content left on dark wash.
   Markup: .shc-blog-hero > .shc-blog-hero__bg + .shc-blog-hero__content
           .shc-blog-hero__content > .shc-eyebrow + .shc-blog-hero__title +
           .shc-blog-hero__excerpt + .shc-blog-hero__meta + .shc-btn
   -------------------------------------------------------------------------- */

/* The blog page has no hero, so add breathing room above the "Journal" header. */
.shc-page--blog {
    padding-top: 72px;
}

.shc-page__header {
    margin-bottom: 40px;
}

.shc-blog-hero {
    position: relative;
    min-height: 440px;
    max-height: 60vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--shc-charcoal);
}

.shc-blog-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform var(--shc-transition);
}

.shc-blog-hero:hover .shc-blog-hero__bg {
    transform: scale(1.02);
}

/* Bottom-anchored gradient (text sits bottom-left) + mild left wash, so the
   overlay reliably darkens the area under the text regardless of the photo. */
.shc-blog-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(30, 27, 23, 0.92) 0%,
            rgba(30, 27, 23, 0.45) 42%,
            rgba(30, 27, 23, 0.08) 100%
        ),
        linear-gradient(
            to right,
            rgba(30, 27, 23, 0.55) 0%,
            rgba(30, 27, 23, 0) 60%
        );
    z-index: 1;
}

.shc-blog-hero__content {
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding: 48px;
    color: #fff;
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.shc-blog-hero__content .shc-eyebrow {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
}

.shc-blog-hero__title {
    font-family: var(--shc-font-heading);
    font-size: 2rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 16px;
}

.shc-blog-hero__excerpt {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 20px;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shc-blog-hero__meta {
    font-size: .8125rem;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.shc-blog-hero__meta span + span::before {
    content: ' · ';
    color: rgba(255, 255, 255, 0.35);
}

/* Force light hero text over the photo, beating any theme heading/paragraph/
   link colors (the .shc-page prefix raises specificity above generic tags). */
.shc-page .shc-blog-hero__content,
.shc-page .shc-blog-hero__content .shc-eyebrow,
.shc-page .shc-blog-hero__title,
.shc-page .shc-blog-hero__title a,
.shc-page .shc-blog-hero__excerpt,
.shc-page .shc-blog-hero__meta {
    color: #fff;
}

.shc-page .shc-blog-hero__title a {
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   16. Blog Filters  [hooks: .shc-filters, .shc-filters__btn, .shc-filters__btn--active]
   Category/tag filter tabs above the post grid.
   State: JS adds .shc-filters__btn--active on the active tab.
   -------------------------------------------------------------------------- */

.shc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    margin-bottom: 40px;
    align-items: center;
    border-bottom: 1px solid var(--shc-line);
    padding-bottom: 20px;
}

.shc-filters__label {
    font-family: var(--shc-font-heading);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--shc-grey);
    margin-right: 8px;
}

.shc-filters__btn {
    display: inline-block;
    font-family: var(--shc-font-heading);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 12px;
    color: var(--shc-grey);
    background: transparent;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: color var(--shc-transition),
                background var(--shc-transition);
}

.shc-filters__btn:hover {
    color: var(--shc-charcoal);
    background: rgba(46, 42, 37, 0.05);
}

.shc-filters__btn--active,
.shc-filters__btn[aria-pressed="true"] {
    color: #fff;
    background: var(--shc-terra);
}

.shc-filters__btn:focus-visible {
    outline: 2px solid var(--shc-terra);
    outline-offset: 3px;
}

/* Overflow categories hidden until the "More" toggle is clicked. */
.shc-filters__btn--extra {
    display: none;
}

.shc-filters.is-expanded .shc-filters__btn--extra {
    display: inline-block;
}

.shc-filters__more {
    font-family: var(--shc-font-heading);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 12px;
    color: var(--shc-terra);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--shc-transition);
}

.shc-filters__more:hover {
    color: var(--shc-charcoal);
}

/* --------------------------------------------------------------------------
   17. Post Grid  [hook: .shc-grid]
   Auto-fill grid, 3 columns on desktop.
   -------------------------------------------------------------------------- */

.shc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 32px;
}

.shc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.shc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.shc-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   18. Post Card  [hook: .shc-post-card]
   Markup: .shc-post-card > .shc-post-card__img (wrapper) + .shc-post-card__body
           .shc-post-card__body > .shc-post-card__cat + .shc-post-card__title +
           .shc-post-card__meta
   -------------------------------------------------------------------------- */

.shc-post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--shc-line);
    transition: border-color var(--shc-transition), box-shadow var(--shc-transition);
    text-decoration: none;
    color: inherit;
}

.shc-post-card:hover {
    border-color: var(--shc-terra);
    box-shadow: 0 6px 28px rgba(192, 106, 70, 0.08);
}

.shc-post-card__img {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}

.shc-post-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--shc-transition);
}

.shc-post-card:hover .shc-post-card__img img {
    transform: scale(1.04);
}

.shc-post-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.shc-post-card__cat {
    font-family: var(--shc-font-heading);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--shc-terra);
    margin-bottom: 10px;
}

.shc-post-card__title {
    font-family: var(--shc-font-heading);
    font-size: 1.0625rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--shc-charcoal);
    line-height: 1.3;
    margin-bottom: 12px;
    flex: 1;
    transition: color var(--shc-transition);
}

.shc-post-card:hover .shc-post-card__title {
    color: var(--shc-terra);
}

.shc-post-card__meta {
    font-size: .8125rem;
    color: var(--shc-grey);
    letter-spacing: .02em;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--shc-line);
}

.shc-post-card__meta span + span::before {
    content: ' · ';
}

/* --------------------------------------------------------------------------
   19. Single Post Reading Column  [hook: .shc-post]
   Centered editorial reading column with comfortable line length.
   Markup: .shc-post > .shc-post__header + .shc-post__body + .shc-post__related
           .shc-post__header > .shc-eyebrow + .shc-post__title + .shc-post__meta +
           .shc-post__image
   -------------------------------------------------------------------------- */

/* This template has no hero, so give the article its own breathing room at the
   top, and space beneath the related posts before the footer. */
.shc-page--post {
    padding-top: 72px;
    padding-bottom: 96px;
}

.shc-post {
    max-width: 760px;
    margin: 0 auto;
}

.shc-post__header {
    margin-bottom: 48px;
    text-align: center;
}

.shc-post__title {
    font-family: var(--shc-font-heading);
    font-size: 2.75rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--shc-charcoal);
    line-height: 1.1;
    margin-bottom: 20px;
}

.shc-post__meta {
    font-size: .875rem;
    color: var(--shc-grey);
    letter-spacing: .04em;
    margin-bottom: 32px;
}

.shc-post__meta span + span::before {
    content: ' · ';
    color: var(--shc-line);
}

.shc-post__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 48px;
}

.shc-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Body prose */
.shc-post__body {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--shc-grey);
}

.shc-post__body p {
    margin-bottom: 1.5em;
}

.shc-post__body h2,
.shc-post__body h3 {
    font-family: var(--shc-font-heading);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--shc-charcoal);
    margin-top: 2em;
    margin-bottom: .75em;
}

.shc-post__body h2 { font-size: 1.5rem; }
.shc-post__body h3 { font-size: 1.125rem; }

.shc-post__body a {
    color: var(--shc-terra);
    text-decoration: underline;
    text-decoration-color: rgba(192, 106, 70, 0.3);
    text-underline-offset: 3px;
}

.shc-post__body a:hover {
    text-decoration-color: var(--shc-terra);
}

.shc-post__body ul,
.shc-post__body ol {
    list-style: disc;
    padding-left: 1.5em;
    margin: 1em 0;
}

.shc-post__body li {
    margin-bottom: .5em;
    line-height: 1.75;
}

.shc-post__body blockquote {
    margin: 2em 0;
    padding: 24px 32px;
    border-left: 2px solid var(--shc-terra);
    background: rgba(231, 221, 208, 0.25);
    font-size: 1.125rem;
    font-style: italic;
    color: var(--shc-charcoal);
}

.shc-post__body img {
    border-radius: var(--shc-radius);
    margin: 2em 0;
}

/* Thin divider between post and related */
.shc-post__divider {
    width: 100%;
    height: 1px;
    background: var(--shc-line);
    border: 0;
    margin: 64px 0 48px;
}

/* Related posts */
.shc-post__related-heading {
    font-family: var(--shc-font-heading);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--shc-terra);
    margin-bottom: 32px;
    text-align: center;
}

/* ==========================================================================
   Responsive — 768px Mobile
   ========================================================================== */

@media (max-width: 768px) {

    /* Typography scale */
    .shc-page h1,
    .shc-h1             { font-size: 2.125rem; }
    .shc-page h2,
    .shc-h2             { font-size: 1.625rem; }
    .shc-page h3        { font-size: 1.25rem; }

    /* Shrink section rhythm once — drives .shc-section AND .shc-cta via the token */
    .shc-page           { --shc-space-section: 56px; }
    .shc-stats          { padding: 56px 0; }
    .shc-container      { padding: 0 18px; }

    /* Hero */
    .shc-hero           { min-height: 65vh; }
    .shc-hero__title    { font-size: 2.5rem; }
    .shc-hero__content  { padding: 56px 18px; }

    /* Story sections */
    .shc-story__section { margin-bottom: 48px; }
    .shc-story__image   { aspect-ratio: 4 / 3; }

    /* What We Do */
    .shc-services__grid   { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .shc-services__header { margin-bottom: 40px; }

    /* Contact header spacing */
    .shc-page--contact .shc-section__header { margin-bottom: 40px; }

    /* Values */
    .shc-values__grid   { grid-template-columns: 1fr; }

    /* Team */
    .shc-team__grid     { grid-template-columns: repeat(2, 1fr); gap: 24px; }

    /* Stats */
    .shc-stats__row     { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .shc-stats__item    { padding: 24px 16px; border-right: 0; border-bottom: 1px solid var(--shc-line); }
    .shc-stats__item:nth-child(odd)  { border-right: 1px solid var(--shc-line); }
    .shc-stats__item:last-child,
    .shc-stats__item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
    .shc-stats__number  { font-size: 2.5rem; }

    /* CTA — vertical rhythm now follows --shc-space-section (56px on mobile) */
    .shc-cta__heading   { font-size: 1.75rem; }

    /* Contact grid — stack vertically (drop the vertical divider) */
    .shc-contact-grid   { grid-template-columns: 1fr; gap: 40px; }
    .shc-contact-grid__details { border-left: 0; padding-left: 0; }

    /* Form row */
    .shc-form__row      { grid-template-columns: 1fr; }

    /* Blog */
    .shc-page--blog     { padding-top: 48px; }
    .shc-page--post     { padding-top: 48px; padding-bottom: 64px; }
    .shc-blog-hero      { min-height: 400px; align-items: flex-end; }
    .shc-blog-hero__content { padding: 32px 18px; max-width: 100%; }
    .shc-blog-hero__title   { font-size: 1.5rem; }
    .shc-blog-hero__overlay {
        background: linear-gradient(
            to top,
            rgba(46, 42, 37, 0.88) 0%,
            rgba(46, 42, 37, 0.35) 60%,
            transparent 100%
        );
    }

    /* Grid */
    .shc-grid--2,
    .shc-grid--3,
    .shc-grid--4        { grid-template-columns: 1fr; }

    /* Single post */
    .shc-post__title    { font-size: 1.875rem; }
    .shc-post__body     { font-size: 1rem; }
}

/* ==========================================================================
   Responsive — 480px Extra Small
   ========================================================================== */

@media (max-width: 480px) {
    .shc-page h1,
    .shc-h1             { font-size: 1.875rem; }
    .shc-page h2,
    .shc-h2             { font-size: 1.5rem; }
    .shc-hero__title    { font-size: 2rem; }
    .shc-team__grid     { grid-template-columns: 1fr; }
    .shc-services__grid { grid-template-columns: 1fr; }
    .shc-stats__row     { grid-template-columns: 1fr; }
    .shc-stats__item    { border-right: 0; border-bottom: 1px solid var(--shc-line); }
    .shc-stats__item:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Reduced Motion — disable all transitions and animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .shc-page *,
    .shc-page *::before,
    .shc-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Explicit resets for image zoom effects */
    .shc-post-card:hover .shc-post-card__img img { transform: none; }
    .shc-team__member:hover .shc-team__photo img  { transform: none; }
    .shc-blog-hero:hover .shc-blog-hero__bg        { transform: none; }
    .shc-values__card:hover                        { box-shadow: none; }
    .shc-post-card:hover                           { box-shadow: none; }
}