/* ============================================================
   SITE POLISH
   Loaded after each public page's own styles. Keeps spacing and
   layout consistent from page to page.
   ============================================================ */

/* Headings break into even lines instead of leaving one word alone */
h1, h2, h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* ---------- Page heroes: same height and centred content on every page ---------- */
/* About keeps a full-screen hero like Home */
.about-hero {
    min-height: 100vh;
    padding: 100px 0 60px;
}

/* Every other page: one comfortable height, content centred below the 75px header */
.packages-hero,
.products-hero,
.projects-hero,
.support-hero,
.contact-hero,
.careers-hero,
.faq-hero,
.investors-hero,
.partners-hero,
.vm-hero,
.tutorials-hero,
.policy-hero,
.terms-hero,
.cart-hero,
.start-hero,
.booking-hero,
.product-details-hero,
.project-details-hero {
    min-height: clamp(420px, 54vh, 520px);
    padding-top: 115px;
    padding-bottom: 50px;
    display: flex;
    align-items: center;
}

.packages-hero > .container,
.products-hero > .container,
.projects-hero > .container,
.support-hero > .container,
.contact-hero > .container,
.careers-hero > .container,
.faq-hero > .container,
.investors-hero > .container,
.partners-hero > .container,
.vm-hero > .container,
.tutorials-hero > .container,
.policy-hero > .container,
.terms-hero > .container,
.cart-hero > .container,
.start-hero > .container,
.booking-hero > .container,
.product-details-hero > .container,
.project-details-hero > .container {
    width: 100%;
}

/* No stray margin under the last line of a hero */
[class$="-hero"] .container > :last-child,
[class$="-hero"] .container > :last-child > :last-child {
    margin-bottom: 0;
}

/* Heroes stay simple: title and text only. No breadcrumb, label pill, number counters or hints.
   (Service pages show their prices in the Pricing section further down.) */
section[class*="-hero"] span.tag,
section[class*="-hero"] .breadcrumb,
.products-hero .card-status,
.packages-hero .hero-stats,
.projects-hero .hero-stats,
.tutorials-hero .hero-stats,
.service-hero .hero-stats,
.about-hero .hero-image .floating-badge {
    /* !important: several pages style these with more specific rules */
    display: none !important;
}

/* The text above the removed counters no longer needs its bottom margin */
.packages-hero .container p:last-of-type,
.projects-hero .container p:last-of-type,
.tutorials-hero .container p:last-of-type {
    margin-bottom: 0;
}

/* Services and each service page: full-screen hero like Home, content centred */
.services-hero,
.service-hero {
    min-height: 100vh;
    padding: 80px 0 40px;
    display: flex;
    align-items: center;
}

.services-hero > .container,
.service-hero > .container {
    width: 100%;
}

/* Products: full-screen hero like Home, content centred */
.products-hero {
    min-height: 100vh;
    padding-top: 90px;
    padding-bottom: 50px;
}

/* Products: same 1200px centred content width as the Home hero */
.products-hero .hero-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Keep the moving code names to the edges so they never sit on the text */
.code-names-container {
    -webkit-mask-image: radial-gradient(ellipse 45% 60% at 50% 58%, transparent 62%, #000 100%);
    mask-image: radial-gradient(ellipse 45% 60% at 50% 58%, transparent 62%, #000 100%);
}

/* ---------- Service cards: show the whole poster ---------- */
.service-card .service-image {
    height: 250px;
    isolation: isolate;
}

/* Blurred copy of the poster fills the sides behind the full poster */
.service-card .service-image::before {
    content: '';
    position: absolute;
    inset: -24px;
    background: var(--img) center / cover no-repeat;
    filter: blur(20px) brightness(0.8);
    z-index: -1;
}

.service-card .service-image img {
    object-fit: contain;
}

/* The poster already shows the service, so the extra icon only adds height */
.service-card:has(.service-image img) .service-icon {
    display: none;
}

.service-card .service-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Product and project cards: even heights ---------- */
.project-card .project-description,
.product-card .product-description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The description keeps its 4 lines; the tags and footer sit at the bottom of the card */
.project-card .project-description {
    flex: none;
}

.project-card .project-description + .project-technologies,
.project-card .project-description + .project-footer {
    margin-top: auto;
}

/* Branded backdrop behind card images: what shows if an image is missing */
.project-card .project-image,
.product-card .product-image {
    background: url('../images/logo.png') center / 120px auto no-repeat,
        linear-gradient(135deg, #1a3c34, #2a5c50);
}

/* ---------- Projects filter: tighter pills, no big gap under them ---------- */
.projects-filter {
    padding-top: 28px;
}

.projects-filter .filter-wrapper {
    gap: 8px;
    padding-bottom: 16px;
}

.projects-filter .filter-btn {
    padding: 6px 18px;
    border-width: 1.5px;
    font-size: 0.8rem;
}

.projects-section {
    padding-top: 36px;
}

/* While an image loads (or if it is missing) show the card colour, not alt text */
.service-card .service-image img,
.project-card .project-image img,
.product-card .product-image img {
    color: transparent;
}

/* ---------- Support: opening one question no longer stretches its neighbour ---------- */
.faq-grid {
    align-items: start;
}

/* ---------- Contact: info cards centre their content instead of leaving a gap below ---------- */
.contact-info .info-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ---------- Investors: room between the blocks ---------- */
.investors-content .section-title {
    margin-top: 64px;
}

/* ---------- Vision and Mission ---------- */
.vm-section .section-title span {
    color: var(--secondary-dark, #d4a900);
}

/* ---------- Packages: features a plan does not include ---------- */
.plan-card .plan-features li .feature-muted {
    font-style: normal;
    color: var(--gray);
    opacity: 0.75;
}

@media (max-width: 768px) {
    .services-hero,
    .packages-hero,
    .products-hero,
    .projects-hero,
    .support-hero,
    .contact-hero,
    .careers-hero,
    .faq-hero,
    .investors-hero,
    .partners-hero,
    .vm-hero,
    .tutorials-hero,
    .policy-hero,
    .terms-hero,
    .cart-hero,
    .start-hero,
    .booking-hero,
    .service-hero,
    .product-details-hero,
    .project-details-hero {
        padding-top: 100px;
        padding-bottom: 44px;
    }

    .service-card .service-image {
        height: 220px;
    }

    .investors-content .section-title {
        margin-top: 44px;
    }
}

/* ---------- Service pages: show the whole square poster in the hero ---------- */
.service-hero .hero-image {
    max-width: 460px;
}

.service-hero .hero-image img {
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .service-hero .hero-image {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- Price cards: features a plan does not include (includes/plan-features.php) ---------- */
li.is-missing i.fa-times,
.pricing-card .features li .fa-times {
    color: #ff6b6b !important;
}

li.is-missing .feature-muted,
.pricing-card .features li .feature-muted {
    color: var(--gray, #64748b);
    opacity: 0.75;
    font-style: normal;
}