/* =========================================================
   CONCEPTO INK — SHARED PAGE STYLES
========================================================= */

main { display: block; }

/* =========================================================
   HOME HERO
========================================================= */

.home-hero {
    position: relative;
    min-height: 100vh;
    padding: 150px 5% 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0a0c0e;
}

.home-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url("../images/home.jpeg");
    background-size: cover;
    background-position: center;
}

.home-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(201, 162, 74, 0.12), transparent 45%),
        linear-gradient(180deg, rgba(8,10,12,0.55) 0%, rgba(8,10,12,0.88) 75%, rgba(8,10,12,1) 100%);
}

.home-hero-content {
    position: relative;
    z-index: 2;
    width: min(1150px, 100%);
    text-align: center;
}

.home-hero-content .shine-label { text-align: center;
    display: inline-block;
    font-size: clamp(18px, 2.8vw, 32px);
    font-weight: 700;
    letter-spacing: 5px;
    line-height: 1.2;
    text-align: center; }

.home-hero-content h1 {
    font-size: clamp(34px, 4.6vw, 58px);
    line-height: 1.05;
    letter-spacing: -1px;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.65);
    margin: 0;
}

.home-hero-text {
    max-width: 600px;
    margin: 25px auto 50px;
    color: rgba(245, 242, 234, 0.8);
    font-size: 15px;
    line-height: 1.7;
}

.home-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: min(1150px, 100%);
    margin: 0 auto;
}

.home-card {
    position: relative;
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-align: left;
    border: 1px solid rgba(201, 162, 74, 0.4);
    background: var(--dark-black);
    text-decoration: none;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.home-card.beauty-card { border-color: rgba(216, 142, 163, 0.4); }

.home-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold-light);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45), 0 0 25px rgba(201, 162, 74, 0.12);
}

.home-card.beauty-card:hover {
    border-color: var(--pink-light);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45), 0 0 25px rgba(216, 142, 163, 0.16);
}

.card-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s ease, filter 0.7s ease;
}

.home-card:hover .card-image { transform: scale(1.1); filter: brightness(1.08) contrast(1.05); }

.card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,10,12,0.05) 20%, rgba(8,10,12,0.92) 100%);
}

.card-content { position: relative; z-index: 2; width: 100%; padding: 34px; }

.card-content > span:first-child {
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.home-card.beauty-card .card-content > span:first-child { color: var(--pink-light); }

.card-content h2 { margin: 10px 0; font-size: 32px; }

.card-content p {
    max-width: 340px;
    margin-bottom: 18px;
    color: rgba(245, 242, 234, 0.75);
    font-size: 13px;
    line-height: 1.6;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 5px;
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}

.home-card.beauty-card .card-link { color: var(--pink-light); border-color: var(--pink); }
.home-card:hover .card-link { gap: 12px; }

.home-quicklinks {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 55px;
}

.home-quicklinks a {
    padding: 12px 22px;
    border: 1px solid rgba(245, 242, 234, 0.2);
    color: rgba(245, 242, 234, 0.75);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.home-quicklinks a:hover {
    border-color: var(--gold-light);
    color: var(--gold-light);
    transform: translateY(-3px);
}

/* Trust strip under hero */
.home-trust {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 45px;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: rgba(245, 242, 234, 0.55);
}

.home-trust span { display: inline-flex; align-items: center; gap: 8px; }
.home-trust i { color: var(--gold-light); }

@media (max-width: 980px) {
    .home-cards { grid-template-columns: repeat(2, 1fr); }
    .home-cards .home-card:last-child { grid-column: 1 / -1; max-width: 460px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .home-hero { padding: 125px 5% 60px; }
    .home-hero-content h1 { font-size: clamp(32px, 9vw, 46px); letter-spacing: -0.5px; }
    .home-cards { grid-template-columns: 1fr; gap: 26px; }
    .home-cards .home-card:last-child { grid-column: auto; max-width: none; margin: 0; }
    .home-card { min-height: 320px; }
}

/* =========================================================
   SERVICE PAGE HERO (Tattoos / Beauty)
========================================================= */

.service-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 150px 5% 80px;
    overflow: hidden;
}

.service-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.service-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 75% 25%, rgba(201, 162, 74, 0.14), transparent 45%),
        linear-gradient(100deg, rgba(8,10,12,0.94) 30%, rgba(8,10,12,0.55) 100%);
}

body.theme-beauty .service-hero-overlay {
    background:
        radial-gradient(circle at 75% 25%, rgba(216, 142, 163, 0.16), transparent 45%),
        linear-gradient(100deg, rgba(8,10,12,0.94) 30%, rgba(8,10,12,0.55) 100%);
}

.service-hero-content { position: relative; z-index: 2; max-width: 640px; }

.service-hero-content h1 {
    font-size: clamp(46px, 6vw, 78px);
    line-height: 1;
    letter-spacing: -1.5px;
    margin: 0 0 22px;
}

.service-hero-content h1 span { color: var(--accent-light); }

/* Beauty page gets a softer, more feminine display face at a
   more restrained size — Tattoo/Piercing pages keep the bold
   serif untouched. */
body.theme-beauty .service-hero-content h1 {
    font-family: 'Alex Brush', cursive;
    font-weight: 400;
    font-size: clamp(40px, 6.5vw, 64px);
    line-height: 1.15;
    letter-spacing: 0;
}

.service-hero-content p {
    color: rgba(245, 242, 234, 0.75);
    font-size: 15px;
    line-height: 1.8;
    max-width: 50ch;
    margin-bottom: 36px;
}

.service-hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

.service-hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(245, 242, 234, 0.5);
    font-size: 10px;
    letter-spacing: 2px;
}

.service-hero-scroll div {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, var(--accent), transparent);
    animation: floatSlow 2.4s ease-in-out infinite;
}

@media (max-width: 640px) {
    .service-hero { min-height: auto; padding: 130px 6% 70px; }
    .service-hero-content { max-width: 100%; }
}

/* =========================================================
   INTRO STRIP (used on tattoo/beauty pages above the
   service-trigger grid)
========================================================= */

.page-section { padding: 110px 5%; }

.section-heading {
    max-width: 680px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-heading h2 {
    font-size: clamp(36px, 5vw, 54px);
    line-height: 1.05;
    margin: 0 0 16px;
}

.section-heading h2 span { color: var(--accent-light); }

.section-heading p {
    color: rgba(245, 242, 234, 0.65);
    font-size: 14px;
    line-height: 1.8;
    max-width: 56ch;
    margin: auto;
}

/* =========================================================
   ABOUT PAGE
========================================================= */

.about-page { padding: 150px 5% 130px; }

.about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
    width: min(1150px, 100%);
    margin: auto;
}

.about-image { position: relative; height: 600px; padding: 8px; }
.about-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease, filter 0.8s ease; }
.about-image:hover img { transform: scale(1.04); filter: brightness(1.08) contrast(1.05); }

.about-content { max-width: 600px; }

.about-content h1 {
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -1px;
    margin: 0 0 26px;
}

.about-content h1 span { color: var(--gold-light); }

.about-content p {
    margin-bottom: 20px;
    color: rgba(245, 242, 234, 0.72);
    font-size: 15px;
    line-height: 1.9;
}

.about-buttons { display: flex; gap: 15px; margin-top: 30px; flex-wrap: wrap; }

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(201, 162, 74, 0.2);
}

.about-stats div h3 { font-size: 30px; color: var(--gold-light); margin-bottom: 4px; }
.about-stats div p { font-size: 11px; letter-spacing: 1px; color: rgba(245, 242, 234, 0.55); margin: 0; text-transform: uppercase; }

@media (max-width: 850px) {
    .about-page { padding: 110px 5% 100px; }
    .about-grid { grid-template-columns: 1fr; gap: 55px; }
    .about-image { height: 460px; max-width: 600px; margin: auto; }
    .about-content { max-width: 700px; margin: auto; text-align: center; }
    .about-buttons, .about-stats { justify-content: center; }
    .about-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .about-content h1 { font-size: 38px; }
    .about-buttons { flex-direction: column; }
    .about-buttons .btn { width: 100%; }
}

/* =========================================================
   ALTERNATING SECTION BACKGROUNDS — Tattoos / Piercings / Beauty
   ---------------------------------------------------------
   Same idea as the hero: every other content section reuses
   that page's own hero photo as its background (fixed, dark
   overlay for legibility) instead of the plain dark panel.
   Counting the hero itself as "section 1", this puts the
   photo on sections 3, 5 (and 7 on Piercings, which has one
   extra section) and leaves 2, 4, 6 on the plain background.

   Because :nth-of-type() counts position among ALL sibling
   <section> elements regardless of class — not just elements
   carrying .page-section — the hero (also a <section>) occupies
   position 1 automatically. So nth-of-type(N) on a .page-section
   element already equals "overall section N" with no offset
   needed: nth-of-type(odd) below correctly lands on overall
   sections 3, 5 (7 on Piercings) — the hero itself (section 1)
   already has its own background photo regardless.
========================================================= */

body[data-service-type="tattoo"] .page-section:nth-of-type(odd),
body[data-service-type="piercing"] .page-section:nth-of-type(odd),
body.theme-beauty .page-section:nth-of-type(odd) {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body[data-service-type="tattoo"] .page-section:nth-of-type(odd) {
    background-image:
        linear-gradient(rgba(8, 10, 12, 0.55), rgba(8, 10, 12, 0.8)),
        url('../images/tattoo-hero.jpeg');
}

body[data-service-type="piercing"] .page-section:nth-of-type(odd) {
    background-image:
        linear-gradient(rgba(8, 10, 12, 0.55), rgba(8, 10, 12, 0.8)),
        url('../images/piercing-hero.jpeg');
}

body.theme-beauty .page-section:nth-of-type(odd) {
    background-image:
        linear-gradient(rgba(8, 10, 12, 0.55), rgba(18, 10, 14, 0.8)),
        url('../images/beauty-hero.jpeg');
}

/* Fixed backgrounds can jitter/detach on mobile Safari — fall
   back to scroll attachment below tablet width, same approach
   already used for the hero sections elsewhere in the site. */
@media (max-width: 768px) {
    body[data-service-type="tattoo"] .page-section:nth-of-type(odd),
    body[data-service-type="piercing"] .page-section:nth-of-type(odd),
    body.theme-beauty .page-section:nth-of-type(odd) {
        background-attachment: scroll;
    }
}

/* =========================================================
   SAME TREATMENT ON THE REMAINING PAGES
   ---------------------------------------------------------
   About, Contact, Gallery, Booking and Booking-Success each
   only have ONE content section (no repeating .page-section
   blocks to alternate), so instead of odd/even, that single
   section gets the same fixed hero-photo + dark-overlay
   background directly. Home is untouched — its one section
   (.home-hero) already carries its own background photo.
========================================================= */

.about-page,
.contact-page,
.gallery-page,
.success-page {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.about-page {
    background-image:
        linear-gradient(rgba(8, 10, 12, 0.55), rgba(8, 10, 12, 0.8)),
        url('../images/home.jpeg');
}

.contact-page,
.gallery-page,
.success-page {
    background-image:
        linear-gradient(rgba(8, 10, 12, 0.55), rgba(8, 10, 12, 0.8)),
        url('../images/home.jpeg');
}

/* Booking page: default tattoo-hero, switches to beauty-hero
   when booking.js adds theme-beauty (arrived via a beauty
   category popup, ?type=beauty). */
.booking-page {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-image:
        linear-gradient(rgba(8, 10, 12, 0.55), rgba(8, 10, 12, 0.8)),
        url('../images/tattoo-hero.jpeg');
}

body.theme-beauty .booking-page {
    background-image:
        linear-gradient(rgba(8, 10, 12, 0.55), rgba(18, 10, 14, 0.8)),
        url('../images/beauty-hero.jpeg');
}

@media (max-width: 768px) {
    .about-page,
    .contact-page,
    .gallery-page,
    .success-page,
    .booking-page {
        background-attachment: scroll;
    }
}