/*
 * Styling for the consultant_profile single template
 * (template-consultant-public-profile.php). Data-driven layout — one
 * stylesheet serves every consultant, not a per-consultant Elementor export.
 *
 * Section set/order/layout was matched against a screenshot of the live
 * reference page (sustainability-consultant-yash): a single stacked column
 * (name, subtitle, small square photo, one CTA button, then plain
 * label/value fields), not a two-column hero — an earlier version of this
 * file guessed a side-by-side layout from raw CSS source alone, which was
 * wrong. Color/spacing/font tokens still come from the site's real design
 * tokens in themes/blocksy-child/assets/css/global.css (--gfi-color-*,
 * --gfi-font-*, --gfi-space-*), which is enqueued globally and already
 * force-applies fonts/colors to h1-h6/p/etc via !important, so headings and
 * body text automatically match the reference page without being restated
 * here (this file only overrides sizing for the small inline field labels,
 * using a class-based selector specific enough to beat those !important
 * rules on specificity).
 */

.gfi-consultant-public-profile {
    max-width: 900px;
    margin: 0 auto;
    /* Blocksy renders its sticky/transparent header as an overlay on top of
       page content rather than reserving space for it in normal flow (see
       the --header-height/--admin-bar custom properties it sets and
       consumes in themes/blocksy/static/bundle/main.min.css). Hand-built
       pages like the Yash reference compensate for this with manually-added
       top spacing in their first Elementor section; this template needs the
       same compensation since nothing here is Elementor-built. Using the
       theme's own --header-height/--admin-bar variables (rather than a
       guessed pixel value) keeps this correct across breakpoints and
       logged-in-vs-anonymous view, and self-adjusts if the header height
       ever changes site-wide. */
    padding-top: calc(var(--header-height, 100px) + var(--admin-bar, 0px) + var(--gfi-space-4, 2rem));
    padding-right: var(--gfi-space-3, 1.5rem);
    padding-bottom: var(--gfi-space-10, 5rem);
    padding-left: var(--gfi-space-3, 1.5rem);
}

.gfi-cpp-name {
    margin: 0 0 4px;
}

.gfi-cpp-title {
    font-size: var(--gfi-font-body-m, 16px);
    color: var(--gfi-color-text-muted, #4d4d4d);
    margin: 0 0 var(--gfi-space-3, 1.5rem);
}

.gfi-cpp-photo-wrap {
    margin-bottom: var(--gfi-space-2, 1rem);
}

.gfi-cpp-photo,
.gfi-cpp-photo-fallback {
    width: 160px;
    aspect-ratio: 1 / 1;
    border-radius: 18px; /* matches .elementor-image-box-img img on the reference page — a rounded rectangle, not a circle */
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gfi-cpp-photo-fallback {
    background: var(--gfi-color-primary-50, #e0f4f0);
    border: 1px solid var(--gfi-color-primary-200, #a8e5d7);
    color: var(--gfi-color-brand-accent, #2f8f7b);
    font-size: 40px;
    font-weight: var(--gfi-fw-bold, 700);
}

.gfi-cpp-current-role {
    font-size: var(--gfi-font-body-s, 14px);
    color: var(--gfi-color-mid-03, #666666);
    margin: 0 0 var(--gfi-space-2, 1rem);
}

.gfi-cpp-cta-row {
    display: flex;
    align-items: center;
    gap: var(--gfi-space-3, 1.5rem);
    margin-bottom: var(--gfi-space-6, 3rem);
    flex-wrap: wrap;
}

/* Background/text color, radius, and the underline all read directly from
   the reference page's own CTA button rule; font-family/size/weight are
   left unset since the sitewide global.css already forces those on
   button/.elementor-button/.wp-element-button via !important. */
.gfi-cpp-btn {
    display: inline-block;
    text-decoration: underline;
    border-radius: 10px;
    padding: 6px 16px;
    transition: opacity 0.15s ease;
}

.gfi-cpp-btn:hover {
    opacity: 0.85;
}

.gfi-cpp-btn-primary {
    background: #4ecca3;
    color: #111518;
}

.gfi-cpp-portfolio-link {
    font-size: var(--gfi-font-body-s, 14px);
    color: var(--gfi-color-brand-accent, #2f8f7b);
}

.gfi-cpp-field {
    margin-bottom: var(--gfi-space-4, 2rem);
}

/* h2 tag (correct heading hierarchy/SEO), styled down from the forced
   global h2 size (40px) to a small bold label to match the reference
   page's plain "Prominent organizations" / "Service Specialization" /
   "Focus Areas" / "About {name}" field labels. The class selector here
   (specificity 0-1-1) beats the bare `h2` rule in global.css (0-0-1) even
   though both use !important, so this wins without depending on stylesheet
   load order. */
.gfi-cpp-field-label {
    font-family: var(--gfi-font-body, 'Inter', sans-serif) !important;
    font-size: var(--gfi-font-body-l, 18px) !important;
    font-weight: var(--gfi-fw-bold, 700) !important;
    line-height: var(--gfi-lh-body-l, 1.4) !important;
    margin: 0 0 6px !important;
}

.gfi-cpp-field-value {
    font-size: var(--gfi-font-body-m, 16px);
    line-height: var(--gfi-lh-body-m, 1.55);
    margin: 0;
}

.gfi-cpp-field-value a {
    color: inherit;
    text-decoration: underline;
}

.gfi-cpp-prose {
    font-size: var(--gfi-font-body-m, 16px);
    line-height: var(--gfi-lh-body-m, 1.55);
}

.gfi-cpp-prose p {
    margin: 0 0 var(--gfi-space-2, 1rem);
}

.gfi-cpp-see-more {
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    color: var(--gfi-color-brand-accent, #2f8f7b);
    font-weight: var(--gfi-fw-medium, 500);
    text-decoration: underline;
    cursor: pointer;
}

.gfi-cpp-section {
    margin-top: var(--gfi-space-8, 4rem);
}

.gfi-cpp-section-title {
    margin: 0 0 var(--gfi-space-4, 2rem);
}

.gfi-cpp-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gfi-space-5, 2.5rem);
}

.gfi-cpp-card {
    display: flex;
    flex-direction: column;
}

.gfi-cpp-card-image {
    width: 70%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    margin-bottom: var(--gfi-space-2, 1rem);
}

.gfi-cpp-card-text {
    font-size: var(--gfi-font-body-m, 16px);
    line-height: var(--gfi-lh-body-m, 1.55);
    margin: 0 0 var(--gfi-space-1, 0.5rem);
}

.gfi-cpp-card-link {
    font-size: var(--gfi-font-body-s, 14px);
    font-weight: var(--gfi-fw-medium, 500);
    color: var(--gfi-color-brand-accent, #2f8f7b);
    text-decoration: none;
}

.gfi-cpp-card-link:hover {
    text-decoration: underline;
}

.gfi-cpp-testimonial {
    margin: 0;
    padding: 0;
    border: none; /* resets Blocksy/browser default <blockquote> left border, absent on the reference page */
    text-align: center;
}

.gfi-cpp-testimonial-quote {
    font-size: var(--gfi-font-body-m, 16px);
    line-height: var(--gfi-lh-body-m, 1.55);
    margin: 0 0 var(--gfi-space-2, 1rem);
}

.gfi-cpp-testimonial-attribution {
    font-size: var(--gfi-font-body-s, 14px);
    color: var(--gfi-color-text-muted, #4d4d4d);
    font-style: normal;
}

@media (max-width: 640px) {
    .gfi-cpp-photo,
    .gfi-cpp-photo-fallback {
        width: 120px;
    }
}