/* ========================================
   Mobile-Only Styles
   Loaded only on screens <= 768px via media attribute in HTML.
   Overrides without touching desktop CSS.
   ======================================== */

/* ---- Gallery images ---- */
/* Containers need explicit heights so object-fit: cover works on mobile */
.ork-gallery-item,
.sh-gallery-item,
.tlc-gallery-item {
    height: 240px;
}

.ork-gallery-item.wide,
.sh-gallery-item.wide,
.tlc-gallery-item.wide {
    height: 200px;
}

.ork-gallery-item img,
.sh-gallery-item img,
.tlc-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Inner page heroes ---- */
.ork-hero,
.sh-hero,
.tlc-hero {
    padding: 7rem 5% 2rem;
}

/* ---- Inner page content ---- */
.ork-content,
.sh-content,
.tlc-content {
    padding: 2rem 5%;
}

.ork-areas,
.sh-gallery,
.tlc-gallery,
.ork-gallery {
    padding: 1rem 5% 3rem;
}

/* ---- Homepage experience logos — horizontal row on mobile ---- */
.experience-bar {
    padding: 3rem 5%;
}

.experience-logos {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.experience-item {
    justify-self: unset !important;
}

.experience-logo {
    height: 60px !important;
    transform: none !important;
    width: auto;
}

.experience-logo.sion-hill {
    height: 90px !important;
    transform: none !important;
}

.experience-logo.orrick {
    height: 50px !important;
}

/* ---- Testimonials — 2-column compact grid ---- */
.testimonial-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.testimonial-card {
    padding: 1rem;
}

.testimonial-card p {
    font-size: 0.8rem;
    line-height: 1.6;
}

/* ---- Expertise — 2x2 grid on mobile ---- */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.service-card {
    flex-basis: auto !important;
    width: 100%;
    margin: 0 !important;
}

/* ---- Reduce large section padding ---- */
.services,
.about,
.testimonials,
.cta {
    padding: 4rem 5%;
}

/* ---- Hide about stats on mobile ---- */
.about-stats {
    display: none;
}

/* ---- Hero title — smaller on phone ---- */
.hero-title {
    font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
    min-height: 1.4em;
}

/* ---- Fix "I'm exploring opportunities" overflow ---- */
.hero-title #intro,
.hero-title #greeting,
.hero-title #finalName {
    white-space: normal !important;
    width: 90vw !important;
    text-align: center;
}

.hero-title #intro .im-text {
    white-space: normal !important;
    display: block;
    text-align: center;
}

/* ---- Hero tagline ---- */
.hero-tagline {
    font-size: 0.95rem;
}

/* ---- Nav logo smaller ---- */
.logo {
    font-size: 1.1rem;
}

/* ---- Nav CTA — hide on mobile to save space, menu has contact ---- */
.nav-cta {
    display: none;
}