/* ============================================================
   Public area — home showcase, help pages, business form
   (owner: public agent). Loaded by the shell after app.css.
   Only theme variables: both themes work without a dark block here.
   ============================================================ */

/* ── Shared bits ─────────────────────────────────────────── */
.pub-eyebrow {
    margin:         0 0 var(--space-3);
    color:          var(--color-primary);
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ── Hero ─────────────────────────────────────────────────── */
.pub-hero {
    position:      relative;
    overflow:      hidden;
    margin-bottom: var(--space-12);
    padding:       var(--space-16) var(--space-10);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 90% at 100% 0%, var(--color-primary-lighter) 0%, transparent 60%),
        radial-gradient(80% 70% at 0% 100%, var(--color-bg-muted) 0%, transparent 70%),
        var(--color-bg-card);
    box-shadow:    var(--shadow-sm);
}
/* A faint grid gives the hero some texture without an image. */
.pub-hero::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background-image:
        linear-gradient(var(--color-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity:        0.35;
    mask-image:     linear-gradient(to left, black, transparent 65%);
    -webkit-mask-image: linear-gradient(to left, black, transparent 65%);
    pointer-events: none;
}
.pub-hero > * { position: relative; z-index: 1; }

.pub-hero__title {
    max-width:      18ch;
    margin:         0 0 var(--space-4);
    font-size:      clamp(2rem, 4.2vw, 3.25rem);
    line-height:    1.08;
    letter-spacing: -0.03em;
}
.pub-hero__lead {
    max-width:   60ch;
    margin:      0 0 var(--space-8);
    color:       var(--color-text-muted);
    font-size:   var(--font-size-lg);
    line-height: 1.6;
}
.pub-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.pub-hero--compact { padding: var(--space-12) var(--space-10); margin-bottom: var(--space-8); }
.pub-hero--compact .pub-hero__title { max-width: 24ch; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }

/* ── Sections ─────────────────────────────────────────────── */
.pub-section { margin-bottom: var(--space-12); }
.pub-section__head { max-width: 640px; margin-bottom: var(--space-6); }
.pub-section__title { margin: 0 0 var(--space-2); font-size: var(--font-size-2xl); letter-spacing: -0.02em; }
.pub-section__lead { margin: 0; color: var(--color-text-muted); }

/* Service cards */
.pub-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap:                   var(--space-4);
}
.pub-cards--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.pub-card {
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-2);
    padding:          var(--space-6);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background-color: var(--color-bg-card);
    box-shadow:       var(--shadow-xs);
    transition:       border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pub-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pub-card__icon {
    display:          grid;
    place-items:      center;
    width:            42px;
    height:           42px;
    margin-bottom:    var(--space-2);
    border-radius:    var(--radius-md);
    background-color: var(--color-primary-lighter);
    color:            var(--color-primary-dark);
    font-size:        22px;
}
.pub-card__title { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.pub-card__text  { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.6; }
.pub-card__link  {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-1);
    margin-top:  auto;
    padding-top: var(--space-2);
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Projects */
.pub-work {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   var(--space-4);
}
.pub-project {
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-2);
    padding:          var(--space-6);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background:       linear-gradient(180deg, var(--color-bg-muted), var(--color-bg-card) 55%);
}
.pub-project__top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   var(--space-2);
}
.pub-project__icon  { color: var(--color-primary); font-size: 28px; }
.pub-project__title { margin: 0; font-size: var(--font-size-lg); letter-spacing: -0.01em; }
.pub-project__text  { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.6; }
.pub-project__tags  { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }
.pub-project__tags li {
    padding:       2px var(--space-2);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-full);
    color:         var(--color-text-muted);
    font-size:     var(--font-size-xs);
}

/* Closing call to action: two wide links */
.pub-cta {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:                   var(--space-4);
    margin-bottom:         var(--space-6);
}
.pub-cta__item {
    display:          flex;
    align-items:      center;
    gap:              var(--space-4);
    padding:          var(--space-5) var(--space-6);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background-color: var(--color-bg-card);
    color:            var(--color-text);
    transition:       border-color var(--transition), background-color var(--transition);
}
.pub-cta__item:hover { border-color: var(--color-primary); color: var(--color-text); background-color: var(--color-primary-lighter); }
.pub-cta__icon  { color: var(--color-primary); font-size: 28px; }
.pub-cta__body  { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pub-cta__title { font-weight: var(--font-weight-semibold); }
.pub-cta__text  { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pub-cta__arrow { color: var(--color-text-muted); transition: transform var(--transition); }
.pub-cta__item:hover .pub-cta__arrow { transform: translateX(3px); color: var(--color-primary); }

/* ── Help pages (about, terms, cookie) ────────────────────── */
.pub-doc { max-width: 760px; }
.pub-doc__head { margin-bottom: var(--space-6); }
.pub-doc__intro { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-lg); }
.pub-doc__meta  { margin: var(--space-2) 0 0; color: var(--color-text-light); font-size: var(--font-size-sm); }
.pub-doc__note  { margin-bottom: var(--space-8); }
.pub-doc__section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.pub-doc__section h2 { margin: 0 0 var(--space-2); font-size: var(--font-size-lg); }
.pub-doc__section p  { margin: 0; color: var(--color-text-muted); line-height: 1.7; }
.pub-doc__links {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--space-4);
    margin-top:  var(--space-6);
    padding-top: var(--space-5);
    border-top:  1px solid var(--color-border);
    font-size:   var(--font-size-sm);
}

/* ── Business form ────────────────────────────────────────── */
.biz-layout {
    display:               grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap:                   var(--space-10);
    align-items:           start;
}
.biz-intro { position: sticky; top: calc(var(--app-topbar-h) + var(--space-6)); }
.biz-intro__title { margin: 0 0 var(--space-3); font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.025em; }
.biz-intro__lead  { margin: 0 0 var(--space-6); color: var(--color-text-muted); font-size: var(--font-size-lg); line-height: 1.6; }

.biz-steps { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.biz-steps li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text); font-size: var(--font-size-sm); }
.biz-steps__n {
    display:          grid;
    place-items:      center;
    flex-shrink:      0;
    width:            24px;
    height:           24px;
    border-radius:    var(--radius-full);
    background-color: var(--color-primary-lighter);
    color:            var(--color-primary-dark);
    font-size:        var(--font-size-xs);
    font-weight:      var(--font-weight-bold);
}
.biz-intro__support {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-2);
    margin:      0;
    color:       var(--color-text-muted);
    font-size:   var(--font-size-sm);
}

.biz-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
/* The framework zeroes the margin of a .form-group:last-of-type; inside a row
   that is the right-hand field, which would stick to the next row on phones. */
.biz-form__row > .form-group { margin-bottom: var(--space-5); }
.biz-optional  { color: var(--color-text-light); font-weight: var(--font-weight-normal); }
.biz-form__privacy { margin: 0 0 var(--space-4); }

.biz-thanks { max-width: 640px; margin: 0 auto; }
.biz-thanks__icon { background-color: var(--color-success-bg); color: var(--color-success-text); }
.biz-thanks__ref { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Business request status pills (staff inbox) */
.biz-status { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.6; white-space: nowrap; }
.biz-status--new         { background-color: var(--color-primary); color: var(--color-text-on-primary); }
.biz-status--in_progress { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.biz-status--answered    { background-color: var(--color-success-bg); color: var(--color-success-text); }
.biz-status--archived    { background-color: var(--color-badge-default-bg); color: var(--color-badge-default-text); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 999.98px) {
    .biz-layout { grid-template-columns: 1fr; gap: var(--space-6); }
    .biz-intro  { position: static; }
}
@media (max-width: 599.98px) {
    .pub-hero, .pub-hero--compact { padding: var(--space-10) var(--space-5); border-radius: var(--radius-lg); }
    .pub-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
    .biz-form__row { grid-template-columns: 1fr; }
    .pub-section { margin-bottom: var(--space-10); }
}
@media (prefers-reduced-motion: reduce) {
    .pub-card, .pub-cta__arrow { transition: none; }
    .pub-card:hover { transform: none; }
}