/* ============================================================
   about.css
   Scoped to the About page. Every rule sits behind .AboutPage.
   Loaded from Pages/About.cshtml, not from _Layout.
   ============================================================ */

/* Same family and same URL as home.css, so the browser reuses the
   file it already cached rather than fetching it twice. */
@font-face {
    font-family: 'Keskiyon Lumisade';
    src: url('../fonts/KeskiyonLumisade.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.AboutPage {
    --paper-ink: #17161A;
    --paper-rule: rgba(56, 37, 87, .18);
    --display: 'Keskiyon Lumisade', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    --label: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

/* Matches the homepage: kill the shared wrapper's padding, then
   pull the first section up under the nav by the same 22px. */
.InnerContent:has(.AboutPage) {
    padding: 0 !important;
    gap: 0 !important;
}

.AboutPage .hero {
    padding-inline: clamp(16px, 4vw, 48px);
    padding-block: 0 var(--sectionGap);
}

.AboutPage .hero:first-of-type {
    margin-top: -22px;
}

/* ---------- headings ----------
   h1 and h2 share one rule so every section title on the page is the
   same size and colour. They were 50px ink vs 38px purple before. */
.AboutPage h1,
.AboutPage h2 {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: 50px !important;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left !important;
    margin: 0 0 20px !important;
    color: var(--justicePurple) !important;
}

/* the one deliberate exception: the three-colour split on the
   directory's own name, matching the homepage h1 */
.AboutPage h1 .ptd-a { color: var(--justicePurple); }
.AboutPage h1 .ptd-b { color: var(--tomatoRed); }
.AboutPage h1 .ptd-c { color: var(--paper-ink); }

.AboutPage .eyebrow {
    display: block;
    font-family: var(--label);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tomatoRed);
    margin-bottom: 10px;
}

/* ---------- three-up image row ---------- */
.AboutPage .about-gallery {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px clamp(16px, 4vw, 48px) var(--sectionGap);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.5vw, 18px);
}

.AboutPage .about-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    max-width: 100%;
}

@media (max-width: 700px) {
    .AboutPage .about-gallery {
        grid-template-columns: 1fr;
    }
}

/* ---------- For Professionals ---------- */
.AboutPage .pro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(14px, 2vw, 24px);
    margin-top: var(--space-lg);
}

.AboutPage .pro-card {
    border: 1.5px solid var(--paper-rule);
    background: rgba(255, 255, 255, .45);
    padding: clamp(18px, 2vw, 26px);
}

.AboutPage .pro-card h3 {
    font-family: var(--label);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--justicePurple);
    margin: 0 0 14px;
}

.AboutPage .pro-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

/* numbered steps — the order genuinely matters here:
   profile first, then listings, or you aren't searchable */
.AboutPage .pro-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
    display: grid;
    gap: 14px;
}

.AboutPage .pro-steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: var(--space-sm);
    align-items: start;
    font-size: 15px;
    line-height: 1.6;
}

.AboutPage .pro-steps li::before {
    content: counter(step);
    font-family: var(--label);
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    background: var(--justicePurple);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

/* price rows */
.AboutPage .price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--paper-rule);
    font-size: 15px;
}

.AboutPage .price-row:last-of-type {
    border-bottom: 0;
}

.AboutPage .price-row .amount {
    font-family: var(--label);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--justicePurple);
    white-space: nowrap;
}

.AboutPage .price-row.free .amount {
    color: var(--tomatoRed);
}

.AboutPage .pro-note {
    margin-top: 18px;
    padding-top: var(--space-md);
    border-top: 1.5px solid var(--paper-rule);
    font-size: 14px;
    line-height: 1.65;
}

/* ---------- disclaimer on wrinkled paper ---------- */
.AboutPage .disclaimer {
    position: relative;
    max-width: 1200px;
    margin: -48px auto 0;
    /* top padding still clears the torn edge, just tighter */
    padding: clamp(48px, 6vw, 78px) clamp(24px, 3vw, 44px) clamp(36px, 4.5vw, 56px);
    background-image: url('../images/General/RippedPaper2.png');
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    /* traces the tear instead of boxing it */
    filter: drop-shadow(0 5px 16px rgba(0,0,0,.22));
}

/* purple veil masked to the torn shape — a plain gradient layer
   would paint the full rectangle and fill the transparent notches */
.AboutPage .disclaimer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(165, 142, 216, .7);
    -webkit-mask-image: url('../images/General/RippedPaper2.png');
    mask-image: url('../images/General/RippedPaper2.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
    pointer-events: none;
    z-index: 0;
}

.AboutPage .disclaimer > * {
    position: relative;
    z-index: 1;
}

.AboutPage .disclaimer h4 {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: 26px !important;
    line-height: 1.08;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--tomatoRed) !important;
    margin: 0 0 var(--space-md) !important;
}

.AboutPage .disclaimer p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--paper-ink);
    max-width: 90ch;
}