/*
 * ============================================================
 * FEARANN ALBA — drone.css
 * ============================================================
 * Styles specific to the Drone Services page (page-drone.php).
 *
 * This file covers:
 *   1. Section intro blocks (label + heading + subheading)
 *   2. Benefits section — three-column card grid
 *   3. Benefit card styles — icon, title, body
 *   4. Services section — responsive card grid
 *   5. Service card styles — image, title, description
 *   6. Scroll animation classes (initial hidden states)
 *
 * All colours reference variables from main.css.
 * The hero section re-uses hero.css — no overrides needed.
 * ============================================================
 */


/*
 * ============================================================
 * 1. SECTION INTRO BLOCKS
 * ============================================================
 * Shared styles for the centred label + heading + subheading
 * pattern used at the top of both Benefits and Services sections.
 */

.drone-section-intro {
    /* Breathing room below the intro before the cards begin */
    margin-bottom: 4rem;
}

.drone-section-intro .label {
    /* Monospace gold label — inherits from main.css .label */
    display: inline-block;
    margin-bottom: 1.25rem;

    /* Subtle gold border to frame the label tag */
    border: 1px solid rgba(184, 150, 12, 0.3);
    padding: 0.3rem 0.9rem;
}

.drone-benefits__heading,
.drone-services__heading {
    /* Extralight weight, large display size — matches brand style */
    font-weight: 100;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    margin: 0.5rem 0 1.25rem;
    line-height: 1.2;
}

.drone-benefits__subheading,
.drone-services__subheading {
    /* Muted supporting copy — centred, comfortable reading width */
    font-size: 1rem;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.8;
}


/*
 * ============================================================
 * 2. BENEFITS SECTION
 * ============================================================
 */

.drone-benefits {
    /* Extra top padding to give separation from the hero */
    padding-top: 7rem;
    padding-bottom: 7rem;
}


/*
 * ============================================================
 * 3. BENEFIT CARD GRID & CARDS
 * ============================================================
 * Three equal columns on desktop, stacking to one on mobile.
 */

.drone-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.drone-benefit-card {
    /* Dark panel — slightly elevated from pure black background */
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);

    /* Comfortable internal spacing */
    padding: 2rem 2rem 2.5rem;

    /* Flex column so content stacks cleanly */
    display: flex;
    flex-direction: column;
    gap: 1rem;

    /* Square corners — core to brand identity */
    border-radius: 0;

    /* Subtle lift effect on hover */
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.drone-benefit-card:hover {
    border-color: rgba(184, 150, 12, 0.3);
    background-color: #0f0f0f;
}

/* Icon container — sits at the top of each card */
.drone-benefit-card__icon {
    /* The SVG is 40×40. This wrapper provides consistent spacing. */
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.drone-benefit-card__icon svg {
    /* Allow the icon to exceed the global max-width: 100% rule */
    max-width: none;
    flex-shrink: 0;
}

.drone-benefit-card__title {
    /* H3 inherits from main.css — override weight and size here */
    font-size: 1.15rem;
    font-weight: 400;
    margin: 0;
    color: var(--color-text);
}

.drone-benefit-card__body {
    /* Muted supporting copy — inherits .text-muted colour */
    font-size: 0.9rem;
    line-height: 1.75;
    margin: 0;

    /* Override the global p max-width: 65ch so card body fills its column */
    max-width: none;
}

/* Stack to single column on tablet and mobile */
@media (max-width: 900px) {
    .drone-benefits__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}


/*
 * ============================================================
 * 4. SERVICES SECTION
 * ============================================================
 */

.drone-services {
    /* Slightly different background from benefits for visual rhythm */
    background-color: var(--color-surface);
}


/*
 * ============================================================
 * 5. SERVICE CARD GRID & CARDS
 * ============================================================
 * Desktop: 3 cards in the first row, 2 in the second.
 * This is achieved with a 3-column grid — the last two cards
 * naturally fall into the second row. On mobile, 1 column.
 */

.drone-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/*
 * The fourth and fifth cards sit in a second row that only
 * has two items. To centre-align them (matching the design),
 * we use the :nth-child approach to span them and offset.
 *
 * Cards 4 and 5 naturally span the first two columns in the
 * second row. This leaves the third column empty — which looks
 * intentional and mirrors the PNG reference.
 */

.drone-service-card {
    /* Dark card — same surface treatment as benefit cards */
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0;

    /* Flex column: image stacks above the text body */
    display: flex;
    flex-direction: column;
    overflow: hidden;

    transition: border-color 0.25s ease;
}

.drone-service-card:hover {
    border-color: rgba(184, 150, 12, 0.25);
}

/* Image wrapper — fixed aspect ratio so all images align */
.drone-service-card__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.drone-service-card__img {
    width: 100%;
    height: 100%;

    /* Cover fill — handles any image dimensions gracefully */
    object-fit: cover;

    /* Subtle zoom on hover for engagement */
    transition: transform 0.4s ease;

    /* Allow image to exceed box-model constraint from main.css */
    max-width: none;
}

.drone-service-card:hover .drone-service-card__img {
    transform: scale(1.03);
}

/* Text body below the image */
.drone-service-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-grow: 1;
}

.drone-service-card__title {
    font-size: 1.05rem;
    font-weight: 400;
    margin: 0;
    color: var(--color-text);
}

.drone-service-card__desc {
    font-size: 0.875rem;
    line-height: 1.7;
    margin: 0;

    /* Override global p max-width so text fills the card */
    max-width: none;
}

/* Tablet: 2 columns */
@media (max-width: 960px) {
    .drone-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 column */
@media (max-width: 600px) {
    .drone-services__grid {
        grid-template-columns: 1fr;
    }
}


/*
 * ============================================================
 * 6. SCROLL ANIMATION — INITIAL HIDDEN STATES
 * ============================================================
 * Elements start in their "hidden" state. drone.js uses
 * IntersectionObserver to add the --visible modifier class
 * when each element enters the viewport, triggering the
 * CSS transition.
 *
 * Two animation types:
 *   .drone-reveal-up      — slides up from below (Benefits cards)
 *   .drone-reveal-left    — slides in from the left (Service cards)
 *
 * The transitions are defined here. The --visible class
 * simply resets transform and opacity to their natural values.
 * ============================================================
 */

/*
 * Slide-up animation — Benefits cards
 * Cards begin 60px below their final position and invisible.
 */
.drone-reveal-up {
    opacity: 0;
    transform: translateY(60px);

    /*
     * Transition: opacity and vertical position animate together.
     * Duration: 0.65s — long enough to feel smooth, short enough
     * to feel snappy. Easing: cubic-bezier matching the rest of
     * the site's motion language.
     *
     * The transition-delay is applied inline by drone.js to
     * stagger each card: 0ms, 120ms, 240ms.
     */
    transition:
        opacity   0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.drone-reveal-up--visible {
    opacity: 1;
    transform: translateY(0);
}

/*
 * Slide-left animation — Services cards
 * Cards begin 80px to the left and invisible.
 * A slightly longer travel distance creates more visual drama.
 */
.drone-reveal-left {
    opacity: 0;
    transform: translateX(-80px);

    /*
     * Same easing — consistent motion feel across the page.
     * Stagger delays applied by drone.js per card index.
     */
    transition:
        opacity   0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.drone-reveal-left--visible {
    opacity: 1;
    transform: translateX(0);
}

/*
 * Accessibility: honour the user's motion preference.
 * If they have "reduce motion" enabled in their OS, we skip
 * the transforms and just fade elements in instead.
 */
@media (prefers-reduced-motion: reduce) {
    .drone-reveal-up,
    .drone-reveal-left {
        transform: none;
        transition: opacity 0.4s ease;
    }
}