/* =========================================================
   WTFE - about.css
   Page-specific grid modifiers for the About Us page, layered
   on top of the shared .offices-grid / .vm-grid components
   (defined in style.css, loaded globally by _Layout.cshtml).
   Linked via @section Styles in Views/Home/AboutUs.cshtml,
   same pattern as packages.css for the Packages pages.
   ========================================================= */

.offices-grid.cols-3{grid-template-columns:repeat(3,1fr);max-width:1100px;}

/* Hero banner image (map with pins/routes). Reverted from the stacked
   full-width treatment (text on top, then a big standalone 800x560 image
   below) back to side-by-side, same shared .cta-banner flex-row the page's
   closing CTA banner also uses - stacking made the image read as "content,
   then a big photo dumped underneath" rather than a designed unit, and
   forcing a fixed 800x560 aspect-ratio with object-fit:cover was cropping
   an external image of unknown proportions, which likely explains the odd
   framing. Now: natural intrinsic ratio (no forced crop), a moderate size
   bump over the old 620px card (not the aggressive 800x560 jump), and a
   thin hairline border (no shadow) so a light-background map graphic
   doesn't visually bleed into the section's off-white background - short of
   the heavier bordered/shadowed "card" look that was deliberately dropped
   last round. .hero-banner is kept as a hook in case this needs its own
   rules again later. TODO: img src is still hotlinked to kindpng.com - swap
   for a local ~/images/ file once downloaded. */
.hero-map{flex:0 0 auto;}
.hero-map-img{
  width:100%;max-width:680px;display:block;
  border-radius:var(--radius);border:1px solid var(--line);
}

/* Hero heading hierarchy: "Partner with WWTFE" is the main line, the
   longer descriptor after it should read as a subheading, not a second
   line of the same size/weight. style.css's .cta-banner h2{font-size:
   clamp(1.6rem,3vw,2.2rem)} sets the base size for the whole h2 (both
   spans inherit it), so .hero-subhead needs its own smaller size here.
   Selector is .hero-banner h2 .hero-subhead (two classes) rather than
   plain .hero-subhead, specifically to out-specificity style.css's
   .cta-banner h2 span{color:var(--red)} rule - a bare single-class
   selector would lose that specificity fight and the subhead would
   render red like the "WWTFE" span instead of its own muted tone. */
.hero-banner h2 .hero-subhead{
  display:block;margin-top:10px;
  font-size:clamp(1.05rem,1.8vw,1.3rem);font-weight:600;
  color:var(--charcoal);letter-spacing:0;
}

/* Vision & Mission background world map. IMPORTANT: .vm is a generic section
   wrapper reused four times on this page (Vision & Mission, logo showcase,
   founder story, tour gallery) plus once on the home page, so this can't
   target bare .vm - it's scoped to #vision-mission, the id unique to this
   one section. Image goes on a ::after (::before is already the existing
   red corner-blob decoration in style.css), kept behind the cards via
   z-index:0 + an explicit z-index:1 on .container, same layering trick
   .vm-card already uses for its own ::after grid-pattern vs. its text.
   background-size:contain (not cover) so a map graphic of unknown aspect
   ratio never stretches/distorts or gets cropped; opacity lives on the
   pseudo-element itself (not the section) so it fades only the image, not
   the vm-card text/readability above it. Hidden under 600px, same as this
   site's other decorative shapes (e.g. style.css .shape4), since the
   stacked single-column mobile layout gives it an awkward tall/narrow box
   to sit in. */
#vision-mission::after{
  content:"";position:absolute;inset:0;
  background-image:url('https://www.silveradoceramics.com/includes/europe.png');
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.18;pointer-events:none;z-index:0;
}
#vision-mission>.container{position:relative;z-index:1;}

/* Founder section: reuses .about/.about-visual/.about-body from style.css (same
   image+text two-column pattern as the home page About section), just with the
   text column first/wider and the photo column second/narrower. */
.about.founder-about .container{grid-template-columns:1.1fr .9fr;}

/* .about-body p has no default spacing (variables.css resets *{margin:0}), so
   the founder section's 3 paragraphs (WWTFE intro / "At the helm..." / "That
   hands-on approach...") stack with zero gap between them. Scoped to
   .founder-about only, not the shared .about-body class site-wide, so the
   home page's About section (which also reuses .about-body) is unaffected. */
.founder-about .about-body p{margin-bottom:18px;}
.founder-about .about-body p:last-of-type{margin-bottom:0;}

/* Mr. Jay Virani's photo, cropped into a circle. (Originally a text-initials
   placeholder div - now an <img>, so object-fit:cover keeps the headshot from
   stretching inside the fixed circle.) */
.founder-avatar {
    /*  width:220px;height:220px;*/
  border-radius:50%;object-fit:cover;
  background:linear-gradient(135deg,#e5e3df,#cfccc6);
  box-shadow:0 0 0 8px rgba(255,255,255,.7),0 20px 40px -14px rgba(20,20,20,.3);
  position:relative;z-index:1;
}

/* Founder story: continuous flowing content (Our Inspiration / Global Exposure /
   Food / Philosophy / Promise) with sub-headings, no card boxes - same
   typographic rhythm as the Package Details page's long-form .pkg-main content.
   Each item gets an icon marker (same circular "tick" badge language as
   .about-body ul li .tick / .pkg-highlights ul li .tick - rgba(228,33,41,.1)
   circle, red stroke icon) plus a neutral left rule (var(--line), the same
   divider tone used by .pkg-card .meta / .pkg-side-card .cinfo-item) and a
   border-top divider between items instead of card backgrounds/shadows. */
    .founder-story {
        max-width: 820px;
        margin: 0 auto;
    }

    .story-item {
        display: flex;
        gap: 22px;
        align-items: flex-start;
        padding: 34px 0;
        border-top: 1px solid var(--line);
    }

        .story-item:first-child {
            padding-top: 0;
            border-top: none;
        }

    .story-marker {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(228,33,41,.1);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 4px;
    }

        .story-marker svg {
            width: 20px;
            height: 20px;
            stroke: var(--red);
        }

    .story-body {
        border-left: 2px solid var(--line);
        padding-left: 24px;
    }

        .story-body h3 {
            font-size: 1.3rem;
            letter-spacing: -.01em;
            margin-bottom: 10px;
        }

        .story-body p {
            color: var(--charcoal);
            font-size: 1rem;
            line-height: 1.8;
        }
    /* Trade fair logo showcase. No existing image-logo strip to reuse on this
   site - the home page's .trust-strip (Index.cshtml) is the only "partner
   strip" precedent and it's text-only (venue names as pill chips), not
   logo images. So this follows the general card-grid convention already
   used for .offices-grid/.office-card, just sized down for small logo tiles,
   with a grayscale-to-color hover borrowed from the site's existing
   icon-fill-on-hover treatment (e.g. .s-icon svg / .why-ic svg swapping to
   white on hover). */
    .logo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
        gap: 22px;
        max-width: 1000px;
        margin: 0 auto;
    }

    .logo-tile {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        transition: .35s cubic-bezier(.2,.8,.2,1);
    }

        .logo-tile:hover {
            box-shadow: var(--shadow-sm);
            border-color: transparent;
            transform: translateY(-4px);
        }

        .logo-tile img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: grayscale(100%);
            opacity: .65;
            transition: .35s;
        }

        .logo-tile:hover img {
            filter: grayscale(0%);
            opacity: 1;
        }
    /* Tour gallery ("Highlights of Few Tours"). Same 4-column card-grid rhythm as
   the home page's .expo-grid (Global Expos), just swapping the decorative
   gradient/skyline card content for real photos in a fixed aspect-ratio
   frame, with the same hover-lift + image zoom already used by .pkg-card /
   .expo-card elsewhere instead of a new lightbox script. */
    .tour-gallery {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 20px;
    }

        .tour-gallery figure {
            margin: 0;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-sm);
            aspect-ratio: 4/3;
            position: relative;
            transition: .4s cubic-bezier(.2,.8,.2,1);
        }

            .tour-gallery figure:hover {
                box-shadow: var(--shadow-lg);
                transform: translateY(-6px);
            }

        .tour-gallery img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: .5s cubic-bezier(.2,.8,.2,1);
        }

        .tour-gallery figure:hover img {
            transform: scale(1.08);
        }
    /* General contact strip below the offices grid (website / email / customer
   care) - redesigned as a bold "get in touch" highlight rather than a plain
   bordered pill. Pulls together three visual techniques already established
   elsewhere on this page/site instead of inventing new ones:
     - the red gradient + glow shadow used for .vm-ic / .foot-cta-ic / the
       WhatsApp float button (variables.css / footer.css)
     - the white-icon-in-a-translucent-circle badge + pulse animation the
       footer already uses for its own "Customer Care" highlight pill
       (.foot-cta-ic, @keyframes pulse - both defined in footer.css, which
       loads globally, so the same animation is reused here, not redefined)
     - thin vertical dividers between segments, echoing the divider rhythm
       used elsewhere (.founder-story items, .pkg-card .meta borders)
   so it reads as one deliberately elevated banner-style card, not a footnote. */
    .contact-strip {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 40px;
        padding: 28px 40px;
        background: linear-gradient(135deg,var(--red),var(--red-dark));
        border-radius: 28px;
        box-shadow: 0 26px 50px -18px var(--red-glow);
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
    }

        .contact-strip::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
            background-size: 32px 32px;
            mask-image: radial-gradient(ellipse at 30% 0%,black 10%,transparent 70%);
        }

        .contact-strip a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 20px;
            position: relative;
            z-index: 1;
            font-size: .92rem;
            font-weight: 700;
            color: #fff;
            transition: .3s cubic-bezier(.2,.8,.2,1);
        }

            .contact-strip a:hover {
                transform: translateY(-3px);
            }

    .contact-strip-ic {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,.2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: .3s;
    }

    .contact-strip a:hover .contact-strip-ic {
        background: #fff;
    }

    .contact-strip-ic svg {
        width: 18px;
        height: 18px;
        stroke: #fff;
        flex-shrink: 0;
        transition: .3s;
    }

    .contact-strip a:hover .contact-strip-ic svg {
        stroke: var(--red);
    }

    .contact-strip-ic-pulse {
        animation: pulse 2.4s infinite;
    }

    .contact-strip-divider {
        width: 1px;
        align-self: stretch;
        margin: 6px 2px;
        background: rgba(255,255,255,.28);
        position: relative;
        z-index: 1;
    }
    /* ===== RESPONSIVE (same 1024 / 600 breakpoints as packages.css) ===== */
    @media (max-width:1024px) {
        .offices-grid.cols-3 {
            grid-template-columns: repeat(2,1fr);
        }

        .about.founder-about .container {
            grid-template-columns: 1fr;
        }

        .tour-gallery {
            grid-template-columns: repeat(2,1fr);
        }
    }

    @media (max-width:600px) {
        #vision-mission::after {
            display: none;
        }

        .offices-grid.cols-3 {
            grid-template-columns: 1fr;
        }

        .founder-avatar {
            width: 170px;
            height: 170px;
        }

        .story-item {
            gap: 14px;
            padding: 26px 0;
        }

        .story-body {
            padding-left: 16px;
        }

        .logo-grid {
            grid-template-columns: repeat(2,1fr);
        }

        .logo-tile {
            height: 110px;
            padding: 16px;
        }

        .tour-gallery {
            grid-template-columns: 1fr;
        }

        .contact-strip {
            flex-direction: column;
            align-items: stretch;
            border-radius: 22px;
            padding: 26px;
            gap: 6px;
        }

            .contact-strip a {
                justify-content: center;
            }

        .contact-strip-divider {
            display: none;
        }
    }