/* ===================================================================
   Provet theme - professional veterinary clinic
   Version: 1.0.0
   Author: Reveloni
   For: CMS 6.0.2+

   Characteristics: competence and trust. Where Fauna is warm and playful
   (shelters, pet shops), Provet is the professional register - a clinic you
   would trust with your animal's health. Restraint and precision: clean
   layout, generous whitespace, clear hierarchy, a cool professional palette.
   The animal context is present but refined - elegant line-art profiles
   (dog, cat, horse), not cartoon faces.

   The medical language is entirely secular: an ECG pulse line, a stethoscope,
   a rounded plus used only as a neutral clinical mark. No cross or any symbol
   that could read as religious.

   The admin colour scheme becomes the CLINIC COLOUR - buttons, links, the
   pulse line, the animal profiles and accents all take it, so one theme runs
   a professional medical blue, a calm veterinary teal or a green, all from
   one theme. Light mode is a modern consulting room - white and cool light
   grey; dark mode is the clinic in the evening - deep graphite-navy, cool and
   professional (not the warm brown of Fauna).

   Signature devices, all pure CSS: an ECG pulse line, three line-art animal
   profiles (dog, cat, horse) as page-card placeholders via SVG masks so they
   take the scheme colour, a rounded-plus accent, a pill price tag and a
   pulse toggle.

   For veterinary clinics and hospitals, animal practices, specialist
   veterinary surgeries (surgery, diagnostics, dentistry), veterinary
   laboratories and 24-hour animal care.

   Changelog:
     1.0.0 - Initial release. Built with auto-fit grids, .page-card-image
             styled as the image itself, the crop-safe gallery pipeline and
             a header-anchored dropdown from day one.
   =================================================================== */

/* === RESET === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === PALETTE ===
   Engine injects --primary / --secondary / --accent on :root (inline).
   --pv-care is the clinic colour (from --primary); the pulse line and the
   animal profiles take it too, so the whole theme reflects the scheme. */
:root {
    /* Clean white + cool light grey surfaces */
    --pv-white: #ffffff;
    --pv-surface: #f3f6f8;
    --pv-surface-raised: #ffffff;
    --pv-surface-deep: #e7edf1;

    /* Ink (cool slate, professional, not harsh black) */
    --pv-ink: #1c2730;
    --pv-ink-soft: #526170;
    --pv-ink-faint: #8b98a5;

    /* Care - the clinic colour, scheme-aware (default professional teal) */
    --pv-care: color-mix(in srgb, var(--primary, #147d8d) 86%, #10707f);
    --pv-care-bright: color-mix(in srgb, var(--primary, #1f9aad) 68%, #1f9aad);
    --pv-care-soft: color-mix(in srgb, var(--pv-care) 12%, transparent);
    --pv-care-deep: color-mix(in srgb, var(--pv-care) 76%, #06222a);

    /* Structure */
    --pv-line: color-mix(in srgb, var(--pv-ink) 12%, transparent);
    --pv-line-soft: color-mix(in srgb, var(--pv-ink) 7%, transparent);
    --pv-grid: color-mix(in srgb, var(--pv-care) 9%, transparent);

    --pv-shadow-sm: 0 1px 3px rgba(28, 39, 48, 0.07), 0 1px 2px rgba(28, 39, 48, 0.04);
    --pv-shadow-md: 0 8px 24px rgba(28, 39, 48, 0.09);
    --pv-shadow-lg: 0 20px 48px rgba(28, 39, 48, 0.13);

    --pv-radius: 10px;
    --pv-radius-lg: 16px;
    --pv-pill: 999px;

    --pv-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --font-display: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;

    /* Aliases some engine snippets rely on */
    --text: var(--pv-ink);
    --text-light: var(--pv-ink-soft);
}

/* The clinic in the evening - cool, professional, not cold */
[data-theme="dark"] {
    --pv-white: #0e161e;
    --pv-surface: #0c141c;
    --pv-surface-raised: #161f29;
    --pv-surface-deep: #080e15;

    --pv-ink: #e8eef4;
    --pv-ink-soft: #a2b0be;
    --pv-ink-faint: #64717e;

    --pv-care: color-mix(in srgb, var(--primary, #23a3b5) 80%, #23a3b5);
    --pv-care-bright: color-mix(in srgb, var(--primary, #4cc4d6) 66%, #4cc4d6);
    --pv-care-soft: color-mix(in srgb, var(--pv-care) 20%, transparent);
    --pv-care-deep: color-mix(in srgb, var(--pv-care) 60%, #04141b);

    --pv-line: color-mix(in srgb, #ffffff 12%, transparent);
    --pv-line-soft: color-mix(in srgb, #ffffff 6%, transparent);
    --pv-grid: color-mix(in srgb, var(--pv-care) 14%, transparent);

    --pv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --pv-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --pv-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6);
}

/* Line-art animal profiles as SVG masks, so they take --pv-care (the scheme).
   Each is a clean single-stroke silhouette. Masks let the colour follow the
   scheme instead of being baked into the SVG. */
:root {
    --pv-dog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14 L20 26 M20 14 Q24 18 28 20 M14 30 Q12 24 20 24 Q28 24 32 30 L32 46 Q32 52 26 52 L18 52 Q12 52 12 46 L12 34 Q12 30 14 30 Z M32 34 Q40 32 46 36 Q52 40 50 48 L48 52'/%3E%3C/svg%3E");
    --pv-cat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 18 L14 8 L24 16 Q32 14 40 16 L50 8 L46 18 Q52 26 50 36 Q46 48 32 50 Q18 48 14 36 Q12 26 18 18 Z'/%3E%3Cpath d='M26 34 L30 36 L26 38 M38 34 L34 36 L38 38' stroke-width='2.5'/%3E%3Cpath d='M32 40 L32 43'/%3E%3C/svg%3E");
    --pv-horse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 10 Q44 14 44 22 L46 38 Q48 46 44 52 L38 52 Q36 44 34 40 Q28 38 24 34 Q20 30 22 24 L26 14 Q28 10 34 12 M40 10 Q36 8 34 12 M26 20 Q32 22 36 26'/%3E%3C/svg%3E");
    /* ECG pulse trace - flat, QRS spike, flat - as a mask too */
    --pv-pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 12 L44 12 L50 12 L54 4 L60 20 L66 12 L70 12 L120 12'/%3E%3C/svg%3E");
}

/* === BASE === */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--pv-ink);
    background: var(--pv-surface);
    transition: background var(--pv-transition), color var(--pv-transition);
}

::selection {
    background: var(--pv-care-soft);
    color: var(--pv-ink);
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
}

img {
    max-width: 100%;
}

/* === ANIMATIONS (CMS framework) === */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(var(--animation-offset, 20px));
    transition: opacity 0.7s ease, transform 0.7s ease;
}

body.js-ready[data-animations-enabled="true"] .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

body:not([data-animations-enabled="true"]) .animate-on-scroll {
    opacity: 1;
    transform: none;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--pv-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--pv-care);
    text-decoration: none;
    transition: color var(--pv-transition);
}

a:hover {
    color: var(--pv-care-bright);
}

/* === HEADER === */
header {
    position: relative;
    z-index: 100;
    background: var(--pv-surface-raised);
    border-bottom: 1px solid var(--pv-line-soft);
    box-shadow: var(--pv-shadow-sm);
    transition: background var(--pv-transition);
}

/* The dropdown anchors to this box, so `top: 100%` is the bottom of the
   bar regardless of logo height. */
header .container {
    position: relative;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    gap: 1rem;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-container img {
    height: 80px;
    width: auto;
    display: block;
}

.site-title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--pv-ink);
    letter-spacing: -0.02em;
}

/* === NAV / HAMBURGER === */
nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

.hamburger-menu {
    /* static on purpose: the header container is the anchor */
    position: static;
}

.hamburger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--pv-care);
    border: none;
    border-radius: var(--pv-radius);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
    cursor: pointer;
    box-shadow: var(--pv-shadow-sm);
    transition: background var(--pv-transition), transform var(--pv-transition);
}

.hamburger-btn:hover {
    background: var(--pv-care-bright);
    transform: translateY(-1px);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    /* aligns with the button: the container's padding box ends 1.5rem outside it */
    right: 1.5rem;
    min-width: 252px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--pv-surface-raised);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-radius);
    box-shadow: var(--pv-shadow-lg);
    z-index: 300;
}

.dropdown-menu.active {
    display: block;
}

.dropdown-menu ul {
    display: block;
    padding: 0.5rem 0;
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 0.6rem 1.4rem;
    color: var(--pv-ink);
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background var(--pv-transition), border-color var(--pv-transition), color var(--pv-transition);
}

.dropdown-menu a:hover {
    background: var(--pv-care-soft);
    border-left-color: var(--pv-care);
}

.dropdown-menu a.active {
    border-left-color: var(--pv-care);
    color: var(--pv-care);
}

/* === BREADCRUMBS === */
.breadcrumbs {
    background: var(--pv-surface-deep);
    border-bottom: 1px solid var(--pv-line-soft);
    font-size: 0.8rem;
}

.breadcrumbs .container {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breadcrumbs a {
    color: var(--pv-ink-soft);
}

.breadcrumbs a:hover {
    color: var(--pv-care);
}

.breadcrumbs span {
    color: var(--pv-care);
}

.breadcrumbs strong {
    color: var(--pv-ink);
    font-weight: 600;
}

/* === HERO - clean, with a faint ECG pulse line === */
.hero {
    position: relative;
    padding: 5rem 1.5rem 4.75rem;
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient(180deg, var(--pv-surface-raised) 0%, var(--pv-surface) 100%);
}

/* subtle graph-paper grid, very light */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        repeating-linear-gradient(0deg, var(--pv-grid) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, var(--pv-grid) 0 1px, transparent 1px 26px);
    -webkit-mask: radial-gradient(ellipse 80% 74% at 50% 42%, #000 30%, transparent 74%);
            mask: radial-gradient(ellipse 80% 74% at 50% 42%, #000 30%, transparent 74%);
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.hero h1 {
    font-size: clamp(2.4rem, 5.5vw, 3.9rem);
    font-weight: 700;
    color: var(--pv-ink);
    letter-spacing: -0.025em;
    margin-bottom: 1.1rem;
}

/* ECG pulse rule under the title */
.hero h1::after {
    content: '';
    display: block;
    width: 120px;
    height: 22px;
    margin: 1.25rem auto 0;
    background: var(--pv-care);
    -webkit-mask: var(--pv-pulse) no-repeat center / contain;
            mask: var(--pv-pulse) no-repeat center / contain;
}

.hero p {
    font-size: 1.16rem;
    color: var(--pv-ink-soft);
    max-width: 54ch;
    margin: 0 auto 1.5rem;
}

/* === HERO WITH BACKGROUND IMAGE === */
.hero--has-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 54vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem;
    border-radius: var(--pv-radius-lg);
    margin: 1.25rem auto 0;
    max-width: 1180px;
    box-shadow: var(--pv-shadow-md);
}

.hero--has-bg::before {
    display: none;
}

.hero--has-bg .hero-bg-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.hero--has-bg .hero-bg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero--has-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    left: 0; right: 0; bottom: 0;
    height: auto;
    background: linear-gradient(180deg, rgba(12, 22, 30, 0.34) 0%, rgba(12, 22, 30, 0.66) 100%);
    -webkit-mask: none; mask: none;
    opacity: 1;
}

.hero--overlay-none::after   { background: linear-gradient(180deg, transparent 0%, rgba(12, 22, 30, 0.30) 100%); }
.hero--overlay-light::after  { background: linear-gradient(180deg, rgba(12, 22, 30, 0.16) 0%, rgba(12, 22, 30, 0.44) 100%); }
.hero--overlay-medium::after { background: linear-gradient(180deg, rgba(12, 22, 30, 0.34) 0%, rgba(12, 22, 30, 0.66) 100%); }
.hero--overlay-strong::after { background: linear-gradient(180deg, rgba(12, 22, 30, 0.52) 0%, rgba(12, 22, 30, 0.82) 100%); }

.hero--has-bg .container {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.hero--has-bg h1 {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
}

.hero--has-bg h1::after {
    background: #fff;
}

.hero--has-bg p {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* === BUTTONS === */
.btn,
.cta-button {
    display: inline-block;
    background: var(--pv-care);
    border: none;
    border-radius: var(--pv-radius);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.8rem 2.2rem;
    cursor: pointer;
    box-shadow: var(--pv-shadow-sm);
    transition: background var(--pv-transition), transform var(--pv-transition), box-shadow var(--pv-transition);
}

.btn:hover,
.cta-button:hover {
    background: var(--pv-care-bright);
    transform: translateY(-2px);
    box-shadow: var(--pv-shadow-md);
}

.cta-button {
    margin-top: 0.8rem;
}

.hero--has-bg .cta-button {
    background: #fff;
    color: var(--pv-care-deep);
}

.hero--has-bg .cta-button:hover {
    background: var(--pv-surface);
}

/* === CONTENT === */
main {
    background: var(--pv-surface);
}

.content-section {
    padding: 3.25rem 0;
}

.content-section h1 {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.content-section h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 2.25rem 0 1rem;
}

/* ECG pulse rule under section headings */
.content-section h2::after {
    content: '';
    display: block;
    width: 88px;
    height: 16px;
    margin-top: 0.6rem;
    background: var(--pv-care);
    -webkit-mask: var(--pv-pulse) no-repeat left center / contain;
            mask: var(--pv-pulse) no-repeat left center / contain;
}

.content-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 1.85rem 0 0.7rem;
}

.content-section ul,
.content-section ol {
    margin: 0 0 1.15rem 1.5rem;
}

/* rounded plus (neutral clinical mark, not a cross) as list bullet */
.content-section ul li::marker {
    content: '\ff0b  ';
    color: var(--pv-care);
}

.content-section ol li::marker {
    color: var(--pv-care);
    font-family: var(--font-display);
    font-weight: 600;
}

.content-section blockquote {
    margin: 1.85rem 0;
    padding: 1.15rem 1.6rem;
    background: var(--pv-surface-raised);
    border-left: 3px solid var(--pv-care);
    border-radius: var(--pv-radius);
    color: var(--pv-ink-soft);
    box-shadow: var(--pv-shadow-sm);
}

/* === PAGE CARDS === */
.page-cards-grid {
    display: grid;
    /* auto-fit: a lone subpage fills the row, pairs split it evenly */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.page-card {
    display: flex;
    flex-direction: column;
    background: var(--pv-surface-raised);
    border: 1px solid var(--pv-line-soft);
    border-radius: var(--pv-radius-lg);
    overflow: hidden;
    box-shadow: var(--pv-shadow-sm);
    transition: transform var(--pv-transition), box-shadow var(--pv-transition), border-color var(--pv-transition);
}

.page-card:hover {
    transform: translateY(-4px);
    border-color: var(--pv-care-soft);
    box-shadow: var(--pv-shadow-md);
}

/* The engine puts .page-card-image on the element ITSELF: an <img> for a
   thumbnail (optionally inside an unclassed <picture>), or a <div> for the
   placeholder. Style it as the image - object-fit is a no-op on the div. */
.page-card-image {
    display: block;
    width: 100%;
    height: 208px;
    object-fit: cover;
    object-position: center;
    background: var(--pv-surface-deep);
}

/* <picture> carries no class; make it a block so the image spans the card */
.page-card > picture {
    display: block;
    line-height: 0;
}

img.page-card-image {
    transition: transform 0.5s ease;
}

.page-card:hover img.page-card-image {
    transform: scale(1.04);
}

/* --- Placeholders: three line-art animal profiles on a clean field --- */
.page-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        repeating-linear-gradient(0deg, var(--pv-grid) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, var(--pv-grid) 0 1px, transparent 1px 24px),
        linear-gradient(160deg, var(--pv-surface-raised), var(--pv-surface-deep));
    background-size: 24px 24px, 24px 24px, auto;
}

/* Hide the engine emoji */
.page-card-placeholder span {
    display: none;
}

/* the profile disc */
.page-card-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    border: 2px solid var(--pv-care-soft);
    background: var(--pv-surface-raised);
    box-shadow: var(--pv-shadow-sm);
}

/* the line-art profile itself (SVG mask, coloured by --pv-care) */
.page-card-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 66px;
    height: 66px;
    background: var(--pv-care);
}

.page-card:nth-child(3n+1) .page-card-placeholder::after {
    -webkit-mask: var(--pv-dog) no-repeat center / contain;
            mask: var(--pv-dog) no-repeat center / contain;
}

.page-card:nth-child(3n+2) .page-card-placeholder::after {
    -webkit-mask: var(--pv-cat) no-repeat center / contain;
            mask: var(--pv-cat) no-repeat center / contain;
}

.page-card:nth-child(3n) .page-card-placeholder::after {
    -webkit-mask: var(--pv-horse) no-repeat center / contain;
            mask: var(--pv-horse) no-repeat center / contain;
}

.page-card:hover .page-card-placeholder::before {
    border-color: var(--pv-care);
    transition: border-color var(--pv-transition);
}

.page-card-content {
    padding: 1.7rem 1.6rem 1.6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-card h3,
.page-card-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--pv-ink);
}

.page-card-excerpt {
    color: var(--pv-ink-soft);
    font-size: 1rem;
    flex: 1;
    margin-bottom: 1.1rem;
}

.page-card-link {
    align-self: flex-start;
    color: var(--pv-care);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--pv-care-soft);
    transition: color var(--pv-transition), border-color var(--pv-transition);
}

.page-card-link:hover {
    color: var(--pv-care-bright);
    border-color: currentColor;
}

/* === GALLERY === */
.gallery-grid {
    display: grid;
    /* auto-fit so one image spans the width and pairs split it evenly */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.6rem;
    margin: 2.25rem 0 2.75rem;
}

.gallery-item {
    position: relative;
    cursor: pointer;
    border-radius: var(--pv-radius-lg);
    overflow: hidden;
    background: var(--pv-surface-deep);
    border: 1px solid var(--pv-line-soft);
    box-shadow: var(--pv-shadow-sm);
    transition: transform var(--pv-transition), box-shadow var(--pv-transition);
}

.gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--pv-shadow-md);
}

/* care bar sweeping in on hover */
.gallery-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--pv-care);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--pv-transition);
    z-index: 2;
}

.gallery-item:hover::after {
    transform: scaleX(1);
}

/* The 4:3 window carries the ratio; the child fills it. Explicit
   height:auto overrides the engine's height attribute so portraits and
   squares crop to 4:3 instead of collapsing into vertical strips. */
.gallery-item > img,
.gallery-item > picture {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    transition: transform 0.45s ease;
}

.gallery-item > img {
    object-fit: cover;
}

.gallery-item > picture img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item source {
    display: none;
}

.gallery-item:hover > img,
.gallery-item:hover > picture {
    transform: scale(1.04);
}

/* === LIGHTBOX === */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 26, 0.95);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 88vw;
    max-height: 84vh;
    border-radius: var(--pv-radius);
    border: 3px solid var(--pv-surface-raised);
    box-shadow: 0 24px 68px rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: var(--pv-care);
    border: none;
    border-radius: var(--pv-radius);
    color: #fff;
    font-family: var(--font-display);
    cursor: pointer;
    box-shadow: var(--pv-shadow-md);
    transition: background var(--pv-transition), transform var(--pv-transition);
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background: var(--pv-care-bright);
    transform: scale(1.06);
}

.lightbox-close {
    top: 1.5rem;
    right: 1.7rem;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    line-height: 1;
}

.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    font-size: 1.45rem;
}

.lightbox-nav:hover {
    transform: translateY(-50%) scale(1.06);
}

.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox-counter {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.12em;
}

/* === PRICE TAG - pill with a rounded plus === */
.price-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--pv-care);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0.5rem 1.35rem;
    margin: 0.85rem 0 1.1rem;
    border-radius: var(--pv-radius);
    box-shadow: var(--pv-shadow-sm);
}

/* rounded plus before the price (neutral clinical mark) */
.price-tag::before {
    content: '\ff0b';
    font-size: 0.95rem;
    opacity: 0.85;
}

a.price-tag:hover {
    background: var(--pv-care-bright);
    color: #fff;
}

/* === TESTIMONIALS === */
.testimonials-grid {
    display: grid;
    /* auto-fit for consistent stretching with one or two testimonials */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.testimonial-card {
    position: relative;
    background: var(--pv-surface-raised);
    border: 1px solid var(--pv-line-soft);
    border-radius: var(--pv-radius-lg);
    padding: 2.5rem 1.8rem 1.7rem;
    box-shadow: var(--pv-shadow-sm);
    transition: transform var(--pv-transition), box-shadow var(--pv-transition);
}

/* a small pulse line pinned at the top */
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 1.15rem;
    left: 1.8rem;
    width: 40px;
    height: 14px;
    background: var(--pv-care);
    -webkit-mask: var(--pv-pulse) no-repeat center / contain;
            mask: var(--pv-pulse) no-repeat center / contain;
    opacity: 0.8;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pv-shadow-md);
}

.testimonial-rating {
    color: var(--pv-care);
    letter-spacing: 0.16em;
    margin-bottom: 0.6rem;
    margin-top: 0.9rem;
    font-size: 0.95rem;
}

.testimonial-text {
    color: var(--pv-ink-soft);
    margin-bottom: 0.9rem;
}

.testimonial-author {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--pv-ink);
}

.testimonial-author::before {
    content: '\2014\00a0';
    color: var(--pv-care);
}

/* === CONTACT FORM === */
.contact-form {
    max-width: 680px;
    margin: 2.75rem auto;
    background: var(--pv-surface-raised);
    border: 1px solid var(--pv-line-soft);
    border-radius: var(--pv-radius-lg);
    padding: 2.75rem 2.3rem;
    box-shadow: var(--pv-shadow-md);
}

.contact-form h2 {
    text-align: center;
}

.contact-form h2::after {
    -webkit-mask-position: center;
            mask-position: center;
    margin-left: auto;
    margin-right: auto;
}

.form-group {
    margin-bottom: 1.35rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pv-ink-soft);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: var(--pv-surface);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-radius);
    color: var(--pv-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.78rem 1rem;
    transition: border-color var(--pv-transition), box-shadow var(--pv-transition);
}

.form-group textarea {
    min-height: 155px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--pv-care);
    box-shadow: 0 0 0 3px var(--pv-care-soft);
}

/* === ALERTS === */
.error,
.success {
    border-radius: var(--pv-radius);
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.25rem;
    font-size: 0.98rem;
    border-left: 4px solid;
}

.error {
    background: color-mix(in srgb, #c94b4b 12%, var(--pv-surface-raised));
    border-color: #c94b4b;
    color: color-mix(in srgb, #a63333 76%, var(--pv-ink));
}

.success {
    background: color-mix(in srgb, #2f9e6f 14%, var(--pv-surface-raised));
    border-color: #2f9e6f;
    color: var(--pv-ink);
}

/* === FOOTER === */
footer {
    position: relative;
    background: linear-gradient(180deg, var(--pv-surface-deep), var(--pv-surface-raised));
    color: var(--pv-ink-soft);
    margin-top: 3.5rem;
    border-top: 1px solid var(--pv-line-soft);
    overflow: hidden;
}

/* care line at the very top */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--pv-care);
    z-index: 1;
}

.footer-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2.25rem;
    padding: 3.25rem 0 2.25rem;
}

.footer-section h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pv-ink);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--pv-care-soft);
}

.footer-section p {
    margin-bottom: 0.45rem;
    font-size: 1rem;
}

.footer-section a {
    color: var(--pv-ink-soft);
}

.footer-section a:hover {
    color: var(--pv-care);
}

.footer-menu {
    list-style: none;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.4rem;
}

.social-links {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.6rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pv-surface-raised);
    border: 1px solid var(--pv-line-soft);
    color: var(--pv-ink-soft);
    transition: background var(--pv-transition), color var(--pv-transition), transform var(--pv-transition);
}

.social-links a:hover {
    background: var(--pv-care);
    color: #fff;
    transform: translateY(-2px);
}

.copyright {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--pv-line-soft);
    padding: 1.15rem 0 1.3rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--pv-ink-faint);
}

/* === DARK MODE TOGGLE - pulse button === */
.dark-mode-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1200;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: var(--pv-care);
    box-shadow: var(--pv-shadow-md);
    cursor: pointer;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--pv-transition), box-shadow var(--pv-transition);
}

.dark-mode-toggle::before {
    content: '';
    width: 22px;
    height: 12px;
    background: #fff;
    -webkit-mask: var(--pv-pulse) no-repeat center / contain;
            mask: var(--pv-pulse) no-repeat center / contain;
}

html[data-theme="dark"] .dark-mode-toggle::before {
    content: '\263D';
    width: auto;
    height: auto;
    background: none;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    -webkit-mask: none;
            mask: none;
}

.dark-mode-toggle:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--pv-shadow-lg);
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .hero {
        padding: 3.75rem 1.25rem 3.5rem;
    }

    .hero--has-bg {
        min-height: 44vh;
        margin: 1rem 1rem 0;
    }

    .page-cards-grid,
    .testimonials-grid {
        gap: 1.6rem;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 1rem;
    }

    .header-content {
        padding: 0.8rem 0;
    }

    .logo-container img {
        height: 56px;
    }

    .site-title {
        font-size: 1.28rem;
    }

    .dropdown-menu {
        /* position and top come from the base rule (anchored to the header
           container); on small screens the menu spans the width */
        left: 1.5rem;
        right: 1.5rem;
        min-width: 0;
    }

    .hero h1 {
        font-size: 2.3rem;
    }

    .content-section {
        padding: 2.25rem 0;
    }

    .gallery-grid {
        /* auto-fit here too, tighter columns on small screens */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.2rem;
    }

    .contact-form {
        padding: 1.9rem 1.3rem;
    }

    .lightbox-nav {
        width: 42px;
        height: 42px;
    }

    .lightbox-prev { left: 0.6rem; }
    .lightbox-next { right: 0.6rem; }

    .dark-mode-toggle {
        bottom: 1.1rem;
        right: 1.1rem;
        width: 44px;
        height: 44px;
    }

    .footer-content {
        gap: 1.75rem;
        padding: 2.5rem 0 1.75rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .animate-on-scroll,
    .page-card,
    .gallery-item,
    .gallery-item > img,
    .gallery-item > picture,
    .gallery-item::after,
    .page-card-placeholder::before,
    .testimonial-card,
    .dark-mode-toggle {
        transition: none;
    }
}