/* =========================================================
   home.css — Front page specific styles
   Loaded only on is_front_page() via functions.php
   @package tarsis-theme
   ========================================================= */

/* ── Design tokens ──────────────────────────────────────── */
:root {
    --h-bg:         #FDFDFC;
    --h-dark:       #1A1A1A;
    --h-body:       #4A4A4A;
    --h-green:      #2D6A4F;
    --h-white:      #FDFDFC;
    --h-border:     #E8E8E4;
    --h-card-dark:  #242424;
    --h-muted:      #AAAAAA;
    --h-placeholder:#E8E8E4;

    --h-font:         'DM Sans', system-ui, -apple-system, sans-serif;
    --h-font-heading: 'Playfair Display', Georgia, serif;
    --h-font-display: 'Urbanist', system-ui, sans-serif;

    --h-radius-sm:  8px;
    --h-radius-md:  12px;
    --h-radius-lg:  12px;

    --h-shadow:     0 2px 20px rgba(0, 0, 0, 0.06);
    --h-container:  1200px;
}

/* ── Shared layout ──────────────────────────────────────── */

.home-section {
    padding-block: 80px;
}

.home-container {
    max-width: var(--h-container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Section label — small green uppercase tag */
.section-label {
    display: inline-block;
    font-family: var(--h-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--h-green);
    margin-bottom: 14px;
}

/* Centered section header block */
.section-header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 56px;
}

.section-header h2 {
    font-family: var(--h-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--h-dark);
    line-height: 1.2;
    margin-top: 8px;
    margin-bottom: 0;
}

/* ── Buttons ────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--h-radius-sm);
    font-family: var(--h-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.btn--primary {
    background: var(--h-dark);
    color: var(--h-white);
}

.btn--primary:hover {
    background: var(--h-green);
    color: var(--h-white);
}

.btn--ghost {
    background: transparent;
    color: var(--h-green);
    padding-inline: 0;
}

.btn--ghost:hover {
    color: var(--h-dark);
}

.btn--light {
    background: var(--h-white);
    color: var(--h-green);
    padding: 16px 40px;
}

.btn--light:hover {
    background: #F0F0F0;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ═══════════════════════════════════════════════════════════ */

.hero {
    background: var(--h-bg);
    /* Push content below fixed floating nav: 18px top offset + ~50px pill + 32px breathing */
    padding-top: 110px;
    padding-bottom: 0;
}

/* Full-width centered title above the two columns */
.hero__title {
    font-family: var(--h-font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--h-dark);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0 auto 48px;
    max-width: 900px;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
    padding-bottom: 56px;
}

/* Left copy (subtitle, rotating, CTA) */
.hero__subtitle {
    font-family: var(--h-font);
    font-size: 17px;
    font-weight: 400;
    color: var(--h-body);
    line-height: 1.7;
    text-align: justify;
    margin: 0 0 28px;
}

/* Rotating specialties */
.hero__rotating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
}

.hero__rotating-label {
    font-family: var(--h-font);
    font-size: 23px;
    font-weight: 600;
    color: var(--h-body);
}

.hero__rotating-badge {
    display: inline-block;
    background: var(--h-green);
    color: #fff;
    font-family: var(--h-font);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 6px 16px;
    border-radius: 100px;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    transition: opacity 0.25s ease;
}

.hero__rotating-badge.fade-out {
    opacity: 0;
}

.hero__ctas {
    display: flex;
    align-items: center;
}

/* Logo mark — top-left of hero copy column */
.hero__logo-mark {
    margin-bottom: 28px;
}

.hero__logo-mark img {
    width: 250px;
    height: auto;
    display: block;
    /* Original colors — light background, no invert */
}

/* Right — image only */
.hero__visual {
    display: flex;
    flex-direction: column;
}

.hero__image {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1.5px solid rgba(26, 26, 26, 0.18);
    background: var(--h-placeholder);
}

.hero__image img,
.hero__image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Metrics bar — full width dark strip ─────────────────── */

.hero__metrics-bar {
    background: var(--h-dark);
    padding-block: 32px;
    width: 100%;
}

.hero__metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.metric:last-child,
.metric:nth-child(2) {
    border-right: none;
}

.metric__number {
    font-family: var(--h-font-display);
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.metric__label {
    font-family: var(--h-font);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 2 — ABOUT
   ═══════════════════════════════════════════════════════════ */

.about {
    background: var(--h-white);
}

.about__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    align-items: center;
}

.about__title {
    font-family: var(--h-font-heading);
    font-size: 34px;
    font-weight: 700;
    color: var(--h-dark);
    line-height: 1.15;
    margin: 8px 0 24px;
}

.about__text {
    font-family: var(--h-font);
    font-size: 19px;
    color: var(--h-body);
    line-height: 1.75;
    margin: 0;
}

.about__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    background: var(--h-placeholder);
}

/* ═══════════════════════════════════════════════════════════
   SECTION 3 — SERVICES
   ═══════════════════════════════════════════════════════════ */

.services {
    background: var(--h-bg);
}

.services__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: stretch;
}

.services__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.services__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.services__header-text {
    margin-bottom: 0;
}

.services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.services__card {
    background: var(--h-white);
    border: 1px solid var(--h-border);
    border-radius: 20px;
    padding: 32px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.services__card:hover {
    border-color: var(--h-green);
    box-shadow: var(--h-shadow);
}

.services__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    color: var(--h-green);
    display: block;
}

.services__card-title {
    font-family: var(--h-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--h-dark);
    margin: 0 0 12px;
}

.services__card-text {
    font-family: var(--h-font);
    font-size: 15px;
    color: var(--h-body);
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 4 — PORTFOLIO  (video left · list right)
   ═══════════════════════════════════════════════════════════ */

.portfolio {
    background: var(--h-dark);
}

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

.portfolio__header h2 {
    font-family: var(--h-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 8px 0 12px;
}

.portfolio__header p {
    font-family: var(--h-font);
    font-size: 16px;
    color: var(--h-muted);
    margin: 0;
}

/* Split layout: video left, list right */
.portfolio__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

/* Video — left, horizontal format */
.portfolio__video-side {
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #222;
}

.portfolio__video-side video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Category list — right */
.portfolio__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.portfolio__list-item {
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.portfolio__list-item:first-child {
    padding-top: 0;
}

.portfolio__list-name {
    font-family: var(--h-font-display);
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.portfolio__list-desc {
    font-family: var(--h-font);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.55;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 5+6 — CLIENTS (left) + BRANDS (right) combined
   ═══════════════════════════════════════════════════════════ */

.brands-clients {
    background: #ffffff;
}

.brands-clients__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
}

.brands-clients__title {
    font-family: var(--h-font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--h-dark);
    line-height: 1.2;
    margin: 8px 0 32px;
}

/* ── Clients static grid ─────────────────────────────────── */

.clients-static {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.clients-static__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 8px;
    min-height: 100px;
}

.clients-static__slot img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ── Brand rows ──────────────────────────────────────────── */

.brand-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid var(--h-border);
}

.brand-row:first-child {
    padding-top: 0;
}

.brand-row__logo {
    flex: 1;
    max-width: 200px;
    height: 80px;
    display: flex;
    align-items: center;
}

.brand-row__logo img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.brands__link {
    font-family: var(--h-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--h-green);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.18s ease;
}

.brands__link:hover {
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 7 — CTA FINAL
   ═══════════════════════════════════════════════════════════ */

.cta-final {
    background: var(--h-green);
    text-align: center;
}

.cta-final__title {
    font-family: var(--h-font);
    font-size: 28px;
    font-weight: 700;
    color: var(--h-white);
    line-height: 1.2;
    margin: 0 0 16px;
}

.cta-final__subtitle {
    font-family: var(--h-font);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 40px;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   TABLET  ≥ 768px
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

    .home-section { padding-block: 96px; }

    .section-header h2 { font-size: 36px; }

    /* Hero */
    .hero { padding-top: 110px; }
    .hero__title { font-size: 54px; max-width: 860px; }
    .hero__inner {
        grid-template-columns: 45fr 55fr;
        align-items: center;
        gap: 56px;
    }
    .hero__metrics { grid-template-columns: repeat(4, 1fr); }
    .metric { border-right: 1px solid rgba(255, 255, 255, 0.08); }
    .metric:last-child { border-right: none; }
    .metric:nth-child(2) { border-right: 1px solid rgba(255, 255, 255, 0.08); }
    .metric__number { font-size: 32px; }

    /* About */
    .about__inner { grid-template-columns: 45fr 55fr; gap: 72px; }
    .about__title { font-size: 40px; }
    .about__text  { font-size: 20px; }

    /* Services */
    .services__layout {
        grid-template-columns: 5fr 6fr;
        gap: 56px;
    }
    .services__image {
        aspect-ratio: auto;
        height: 100%;
    }
    .services__layout .section-header {
        text-align: left;
        max-width: none;
        margin-inline: 0;
    }
    .services__grid { grid-template-columns: 1fr; }

    /* Portfolio */
    .portfolio__split { grid-template-columns: 58fr 42fr; align-items: center; }
    .portfolio__video-side { aspect-ratio: 16 / 9; }
    .portfolio__header h2 { font-size: 38px; }
    .portfolio__list-name { font-size: 26px; }

    /* Brands + Clients combined */
    .brands-clients__grid { grid-template-columns: 1fr 1fr; gap: 80px; }
    .clients-static { grid-template-columns: repeat(3, 1fr); }
    .brands-clients__title { font-size: 28px; }

    /* CTA */
    .cta-final__title { font-size: 38px; }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP  ≥ 1200px
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {

    .home-section { padding-block: 112px; }

    /* Hero */
    .hero { padding-top: 120px; }
    .hero__title { font-size: 66px; max-width: 960px; }
    .hero__inner {
        grid-template-columns: 42fr 58fr;
        gap: 72px;
    }
    .metric__number { font-size: 38px; }

    /* About */
    .about__title { font-size: 44px; }

    /* Portfolio desktop */
    .portfolio__list-name { font-size: 28px; }

    /* CTA */
    .cta-final__title { font-size: 42px; }
}