/* ============================================================
About
============================================================ */

/*
Controls the custom layout and presentation of the About content page.
Defines the side-by-side desktop layout, circular profile image,
text column, and enlarged introductory text.

Tablet rules are grouped at the bottom of this section and convert
the layout to a stacked format, center and resize the profile image,
and reduce the introductory text size for smaller screens.
*/

#about .about-layout {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
}

#about .about-image {
    display: block;
    flex: 0 0 38%;
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}

#about .about-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#about .about-image:before {
    border-radius: 50%;
}

#about .about-text {
    flex: 1;
    min-width: 0;
}

#about .about-intro {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

/* Showcase image inside the bio panel: sits below the intro with
   panel padding around it, so no border of its own. */

#about .about-showcase {
    margin: 2.5rem 0 0 0;
}

#about .about-showcase img {
    display: block;
    width: 100%;
    height: auto;

    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

/* About - Tablet */

@media screen and (max-width: 736px) {

    #about .about-layout {
        display: block;
    }

    #about .about-image {
        width: 75%;
        max-width: 300px;
        margin: 0 auto 2rem auto;
    }

    #about .about-intro {
        font-size: 2rem;
    }

}

/* ============================================================
Gallery
============================================================ */

/*
Gallery page styles. The main gallery page lists albums as
full-width cards (cover image left, title + description right).
.gallery-grid is the media grid shared by the sub-gallery pages.
*/

/* Album cards */

.album-list {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 26px;
}

.album-card {
    display: flex;
    align-items: center;
    gap: 1.75rem;

    background: rgba(27, 31, 37, 0.85);
    border: 1px solid #3b414c;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;

    transition: border-color 0.3s ease;
}

.album-card img {
    flex: 0 0 300px;
    width: 300px;
    height: 200px;
    object-fit: cover;
    display: block;

    transition: filter 0.3s ease;
}

.album-card-content {
    flex: 1;
    min-width: 0;
    padding-right: 2rem;
}

.album-card-content h3 {
    margin: 0 0 0.5rem 0;
    color: #fff;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
}

.album-card-content p {
    margin: 0;
}

.album-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.album-card:hover img {
    filter: brightness(1.15);
}

/* Sub-gallery media grid: uniform square mosaic of clickable
   thumbnails (grid markup untouched per album; the shared
   gallery-lightbox.js adds the carousel). Thumbs are center-cropped
   squares; the lightbox always shows the full uncropped media. */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.gallery-grid > img,
.gallery-grid > video {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;

    border-radius: 8px;
    cursor: zoom-in;

    transition: filter 0.3s ease;
}

.gallery-grid > img:hover {
    filter: brightness(1.15);
}

/* Gallery lightbox: full-screen carousel that shows one album media
   item at a time. Built entirely by gallery-lightbox.js. */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(10, 12, 15, 0.94);
    padding: 4.5rem 6rem;

    animation: lightbox-in 0.2s ease;
}

@keyframes lightbox-in {
    from { opacity: 0; }
}

.lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.lightbox-stage img,
.lightbox-stage video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;

    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-stage video {
    background: #000;
}

.lightbox button {
    position: absolute;
    width: 3rem;
    height: 3rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(27, 31, 37, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;

    transition: background-color 0.2s ease;
}

.lightbox button:hover {
    background: rgba(27, 31, 37, 0.95);
}

.lightbox-close {
    top: 1.25rem;
    right: 1.25rem;
}

.lightbox-prev {
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);

    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    letter-spacing: 0.15rem;
}

/* Lightbox - Mobile */

@media screen and (max-width: 736px) {

    .lightbox {
        padding: 4rem 3.75rem;
    }

    .lightbox button {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.2rem;
    }

}

/* Album cards - Mobile */

@media screen and (max-width: 736px) {

    .album-card {
        display: block;
    }

    .album-card img {
        width: 100%;
        height: 220px;
    }

    .album-card-content {
        padding: 1.25rem 1.5rem 0.25rem 1.5rem;
    }

}

/* Gallery Grid - Tablet */

/* ============================================================
Services Overview
============================================================ */

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.service-item {
    display: block;
    background: rgba(27, 31, 37, 0.85);
    border-radius: 12px;
    overflow: hidden;
    padding: 1.5rem;
}

.service-item img,
.service-item video {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Full-width info card (no image) at the end of the grid */

.service-item-coming-soon {
    grid-column: 1 / -1;
    text-align: center;
}

.service-item-coming-soon h3 {
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    margin-bottom: 0.75rem;
}

.service-item-coming-soon p {
    margin-bottom: 0;
}

/* Services - Tablet */

@media screen and (max-width: 736px) {

    .services-grid {
        grid-template-columns: 1fr;
    }

}

/* Photography service page — the CTA lives in its own content-box
under the floating-boxes layout. */

.photography-page .photography-intro {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 2.5rem;
    align-items: center;

    max-width: none;
    margin: 0 auto 3rem auto;
    text-align: left;
}

.photography-intro-image img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center right;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.photography-page .photography-label {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.photography-page .photography-intro h1 {
    margin-bottom: 1rem;
}

.photography-page .photography-tagline {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.photography-services {
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.photography-intro-content > p {
    margin-bottom: 1.25rem;
}

.photography-intro-content ul {
    columns: 2;
    column-gap: 3rem;
    margin-top: 0.5rem;
}

.photography-cta {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media screen and (max-width: 480px) {

    .photography-page .photography-intro {
        display: block;
        margin-bottom: 2rem;
    }

    .photography-page .photography-intro h1 {
        font-size: 1.5rem;
        letter-spacing: 0.2rem;
    }

    .photography-page .photography-tagline {
        font-size: 1.1rem;
    }

    .photography-intro-content ul {
        columns: 2;
        column-gap: 2rem;
    }

    .photography-intro-image {
        margin-top: 2rem;
    }

    .photography-intro-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .photography-cta {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ============================================================
Service Packages (graduation + portraits + real estate)
============================================================ */

/*
SHARED PAGE FAMILY: the .packages-page class family is used by
services/graduation, services/realestate, and services/portraits (which
reuse the full template: intro, tagline, package card tiles,
information, CTA).
Some members (.packages-showcase, .packages-info-image) currently
render only on graduation and portraits. Do not rename or trim members
without checking all three pages.
*/

.packages-page .packages-intro {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 2.5rem;
    align-items: center;
    max-width: none;
    margin: 0 auto 1.5rem auto;
    text-align: left;
}

.packages-intro-image img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

/* Real estate: the intro copy is shorter than the default 420px image,
   so the image is matched to the text instead of stretching the panel
   and leaving dead space above and below the copy. */
#service-realestate .packages-intro-image img {
    height: 380px;
}

.packages-page .packages-label {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.packages-page .packages-intro h1 {
    margin-bottom: 1rem;
}

.packages-page .packages-tagline {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.packages-local-note {
    text-align: center;
    font-weight: 600;
    font-size: 0.9em;
    letter-spacing: 0.03em;
}

/* Package Section */

.packages-packages {
    margin: 0 0 3rem 0;
    padding-top: 3rem;
    border-top: solid 1px rgba(255, 255, 255, 0.25);
}

.packages-section-heading {
    text-align: center;
    margin-bottom: 2rem;
}

.packages-section-heading p {
    margin-bottom: 0;
}

/* Package Cards */

.packages-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Two-card variant (services/portraits): centers the pair instead of
   leaving an empty third column. The tablet rule below still stacks it. */
.packages-package-grid-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 46rem;
    margin: 0 auto;
}

.packages-package {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.75rem;

    background: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

.packages-package-header {
    text-align: center;
    margin-bottom: 1rem;
}

.packages-package-header h3 {
    margin-bottom: 0.5rem;
}

.packages-price {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.packages-package-description {
    text-align: center;
    min-height: 5rem;
    margin-bottom: 1.25rem;
}

.packages-package ul {
    margin-bottom: 1.5rem;
}

.packages-package ul:last-child {
    margin-bottom: 0;
}

.packages-package li {
    margin-bottom: 0.45rem;
}

/* Featured Package */
.packages-package-featured {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.55);
}

.packages-package-badge {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);

    padding: 0.25rem 0.8rem;
    margin: 0;

    background: #ffffff;
    border-radius: 4px;

    color: #1b1f22;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Information */
.packages-info {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 3rem;
    align-items: start;

    padding-top: 3rem;
    border-top: solid 1px rgba(255, 255, 255, 0.25);
}

.packages-info-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.packages-info-content h2 {
    margin-top: 0;
    margin-bottom: 2rem;
}

.packages-info-content h3 {
    margin-bottom: 0.75rem;
}

.packages-info-content p {
    margin-bottom: 1.5rem;
}

/* Showcase */
.packages-showcase {
    margin-top: 3rem;
    width: 100%;
}

.packages-showcase img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center 8%;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

/* Call to Action */
.packages-cta {
    margin-top: 3rem;
    padding: 2rem;
    text-align: center;

    background: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

.packages-cta p {
    margin-bottom: 1.5rem;
}

/* Service Packages - Tablet */

@media screen and (max-width: 980px) {

    .packages-package {
        display: flex;
        width: 100%;
        min-height: 0;
        margin-right: 0;
    }

    .packages-package-grid {
        grid-template-columns: 1fr;
        max-width: 40rem;
        margin: 0 auto;
    }

    .packages-package-description {
        min-height: 0;
    }

}

/* Service Packages - Mobile */

@media screen and (max-width: 480px) {

    .packages-page .packages-intro {
        display: block;
        margin-bottom: 2rem;
    }

    .packages-page .packages-intro h1 {
        font-size: 1.5rem;
        letter-spacing: 0.2rem;
    }

    .packages-page .packages-tagline {
        font-size: 1.1rem;
    }

    .packages-page .packages-intro-image {
        width: 100%;
        margin-top: 2rem;
    }

    .packages-page .packages-intro-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    #service-realestate .packages-intro-image img {
        height: auto;
    }

/* Swipeable Package Cards */

    .packages-packages {
        min-width: 0;
        overflow: visible;
    }

    .packages-package-grid {
        display: flex;
        overflow-x: auto;
        gap: 1rem;
        padding-bottom: 1rem;
        scroll-snap-type: x mandatory;
    }

    .packages-package {
        flex: 0 0 88%;
        width: auto;
        min-width: 0;
        padding: 1.5rem;
        scroll-snap-align: start;
    }

    .packages-package-grid::-webkit-scrollbar {
        display: none;
    }

    .packages-price {
        font-size: 1.75rem;
    }

/* What to Expect */
    .packages-info {
        display: block;
    }

    .packages-info-image {
        width: 100%;
        margin: 0 0 2rem 0;
    }

    .packages-info-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .packages-info-content {
        width: 100%;
    }

/* Bottom Showcase Image */
    .packages-showcase {
        margin-top: 2rem;
    }

    .packages-showcase img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

/* Call to Action */
    .packages-cta {
        margin-top: 2rem;
        padding: 1.5rem 1.5rem;
    }

    .packages-cta h2 {
        margin-bottom: 1rem;
    }

    .packages-cta p {
        margin-bottom: 1.25rem;
    }

    .packages-cta .button {
        width: 100%;
        box-sizing: border-box;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        letter-spacing: 0.2rem;
        white-space: nowrap;
    }
    #main article.packages-page {
        padding-bottom: 1.5rem;
    }
}

/* ============================================================
Videography
============================================================ */

.videography-page .videography-intro {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 2.5rem;
    align-items: center;

    max-width: none;
    margin: 0 auto 3rem auto;
    text-align: left;
}

.videography-intro-image img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.videography-page .videography-label {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.videography-page .videography-intro h1 {
    margin-bottom: 1rem;
}

.videography-page .videography-tagline {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.videography-intro-content > p {
    margin-bottom: 1.25rem;
}

.videography-intro-content ul {
    columns: 2;
    column-gap: 3rem;
}

.videography-cta {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Videography Services - Mobile */
@media screen and (max-width: 480px) {

    .videography-page .videography-intro {
        display: block;
        margin-bottom: 2rem;
    }

    .videography-page .videography-intro h1 {
        font-size: 1.5rem;
        letter-spacing: 0.2rem;
    }

    .videography-page .videography-tagline {
        font-size: 1.1rem;
    }

    .videography-intro-content ul {
        column-gap: 2rem;
    }

    .videography-intro-content li {
        break-inside: avoid;
    }

    .videography-intro-image {
        margin-top: 2rem;
    }

    .videography-intro-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .videography-cta {
        margin-top: 2rem;
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
}

/* ============================================================
Drone
============================================================ */

.drone-page .drone-intro {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 2.5rem;
    align-items: center;

    max-width: none;
    margin: 0 auto 3rem auto;
    text-align: left;
}

.drone-intro-image img,
.drone-intro-image video {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.drone-page .drone-label {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.drone-page .drone-intro h1 {
    margin-bottom: 1rem;
}

.drone-page .drone-tagline {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.drone-intro-content > p {
    margin-bottom: 1.25rem;
}

.drone-intro-content ul {
/* Match the photography/videography service pages: the service
    list fills two newspaper columns so the text box runs
    shorter. column-gap without `columns` is inert. */
    columns: 2;
    column-gap: 3rem;
}

.drone-cta {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Drone Services - Mobile */
@media screen and (max-width: 480px) {

    .drone-page .drone-intro {
        display: block;
        margin-bottom: 2rem;
    }

    .drone-page .drone-intro h1 {
        font-size: 1.5rem;
        letter-spacing: 0.2rem;
    }

    .drone-page .drone-tagline {
        font-size: 1.1rem;
    }

    .drone-intro-content ul {
        column-gap: 2rem;
    }

    .drone-intro-content li {
        break-inside: avoid;
    }

    .drone-intro-image {
        margin-top: 2rem;
    }

.drone-intro-image img,
    .drone-intro-image video {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .drone-cta {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

}

/* Site footer: company name and general-contact link on every page */
#footer .site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

#footer .site-footer-brand {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
}

/* Links row: flex gap spaces the dot separators evenly between links. */

#footer .site-footer-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

#footer .site-footer a {
    color: inherit;
    text-underline-offset: 5px;
}

#footer .site-footer a:hover {
    color: #ffffff;
}

@media (max-width: 736px) {
    #footer .site-footer {
        flex-direction: column;
        text-align: center;
    }
}


/* Privacy policy: the "What the site collects" items are presented as
   a row of small cards. They reuse the content-box palette at reduced
   scale and collapse to two columns, then one, as space runs out. */

.privacy-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 1.5rem 0;
}

.privacy-card {
    background: rgba(27, 31, 37, 0.6);
    border: 1px solid #3b414c;
    border-radius: 12px;
    padding: 1.25rem 1.25rem;
    margin: 0;
}

.privacy-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.privacy-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .privacy-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .privacy-cards {
        grid-template-columns: 1fr;
    }
}