/**
 * assets/css/pages.css — All Services, All Services Explained, FAQ and Privacy pages (step 8).
 * Loaded together with location.css (intro split, quotes, location links) on those pages.
 */

/* ── All Services: 6 category cards ── */
.all-quote { margin-bottom: 4rem; }
.all-quote--end { margin: 4.5rem auto 0; }
.all-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.all-card { padding: 2.6rem 2.3rem 2.4rem; scroll-margin-top: calc(var(--header-h, 84px) + 24px); }
.all-card__title { margin: 0 0 1.1rem; font-family: var(--font-script); font-weight: 400; font-size: clamp(2rem, 2.6vw, 2.35rem); line-height: 1.15; text-shadow: 0 0 2px rgba(0,0,0,0.5); }
.all-card__title a { color: var(--gold-light); text-decoration: none; transition: color 0.35s ease; }
.all-card:hover .all-card__title a, .all-card.is-lit .all-card__title a { color: #f6e3ae; }
.all-card__note { font-style: italic; color: var(--text); margin-bottom: 1rem; }
.all-card__list { list-style: none; margin: 0; padding: 0; }
.all-card__list li { border-bottom: 1px solid rgba(201,168,76,0.1); }
.all-card__list li:last-child { border-bottom: 0; }
.all-card__list a {
    display: flex; align-items: baseline; gap: 0.7rem; padding: 0.55rem 0.2rem; text-decoration: none;
    font-family: var(--font-serif); font-size: 1.12rem; color: var(--text); transition: color var(--transition), padding var(--transition);
}
.all-card__list a::before { content: '\2726'; font-size: 0.62rem; color: var(--gold-dim); flex-shrink: 0; }
.all-card__list a:hover { color: #f6e3ae; padding-left: 0.6rem; }

/* ── All Services: one section per category (round 31) ── */
.all-split { align-items: center; }
.all-split--flip > .all-img { order: -1; }
.all-img { max-width: 460px; }
.all-title a { color: inherit; text-decoration: none; -webkit-text-fill-color: inherit; }
.all-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.all-list--two { columns: 2; column-gap: 2rem; }
.all-list li { break-inside: avoid; border-bottom: 1px solid rgba(201,168,76,0.1); }
.all-list a {
    display: flex; align-items: baseline; gap: 0.7rem; padding: 0.5rem 0.2rem; text-decoration: none;
    font-family: var(--font-serif); font-size: 1.12rem; color: var(--text); transition: color var(--transition), padding var(--transition);
}
.all-list a::before { content: '\2726'; font-size: 0.62rem; color: var(--gold-dim); flex-shrink: 0; }
.all-list a:hover { color: #f6e3ae; padding-left: 0.6rem; }
@media (max-width: 968px) { .all-split--flip > .all-img { order: -1; } }
@media (max-width: 560px) { .all-list--two { columns: 1; } }

/* ── All Services Explained ── */
.services-nav--six .services-nav__btn { font-size: 1rem; }
.explained-panel { scroll-margin-top: calc(var(--header-h, 84px) + 70px); }
.explained-intro { max-width: 760px; margin: 1.2rem auto 0; text-align: center; }
.explained-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }   /* desktop: 3 columns (round 31) */

/* ── Photo carousel (layout/carousel.php + js/carousel.js) ── */
.carousel { position: relative; margin: 4.5rem 0 5rem; }          /* more space above + below the photos */
.carousel__track {
    display: flex; gap: 0; overflow-x: auto; scroll-behavior: auto;               /* no gaps, endless glide (round 32) */
    padding: 10px 0 14px; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging { cursor: grabbing; }
.carousel--single .carousel__track { justify-content: center; cursor: default; }
.carousel__item { flex: 0 0 auto; height: 380px; margin: 0; position: relative; }
/* round 39: thin gold line between the photos; gold lines above + below that fade out to the sides */
.carousel__item::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; z-index: 2;
    background: linear-gradient(to bottom, #f3dc9a, var(--gold-light) 50%, #f3dc9a); box-shadow: 0 0 6px rgba(228,201,123,0.45);
}
.carousel::before, .carousel::after {
    content: ''; position: absolute; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none;
    background: linear-gradient(to right, transparent 0%, rgba(201,168,76,0.6) 12%, #f3dc9a 50%, rgba(201,168,76,0.6) 88%, transparent 100%);
    box-shadow: 0 0 12px rgba(228,201,123,0.45);
}
.carousel::before { top: 9px; }
.carousel::after { bottom: 13px; }
.carousel--single::before, .carousel--single::after { left: 25%; right: 25%; }
.carousel__item img { height: 100%; width: auto; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.explained-card { padding: 2.3rem 2.2rem 2.1rem; scroll-margin-top: calc(var(--header-h, 84px) + 90px); }
.explained-card__title { margin: 0 0 0.7rem; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.45rem; color: var(--gold-light); line-height: 1.3; transition: color 0.35s ease; }
.explained-card:hover .explained-card__title, .explained-card.is-lit .explained-card__title { color: #f6e3ae; }
.explained-card p { margin: 0; }
.explained-card:target { border-color: #f3dc9a; box-shadow: 0 0 30px rgba(201,168,76,0.45), 0 0 10px rgba(74,158,224,0.22); }
.anchor-alias { position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: calc(var(--header-h, 84px) + 90px); }

/* ── FAQ page: all questions by topic (round 31) ── */
.faq-all { padding-top: 5.5rem; }
.faq-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 3.5rem; }
.faq-topics a {
    padding: 0.5rem 1rem; border: 1px solid rgba(201,168,76,0.45); color: var(--gold-light); text-decoration: none;
    font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; background: rgba(20,26,38,0.9);
    transition: border-color var(--transition), color var(--transition);
}
.faq-topics a:hover { border-color: #f3dc9a; color: #f6e3ae; }
.faq-group { scroll-margin-top: calc(var(--header-h, 84px) + 24px); }
.faq-group + .faq-group { margin-top: 6.5rem; }        /* round 41: more space above each topic */
.faq-group__title {
    display: flex; align-items: center; justify-content: center; gap: 1.4rem;
    margin: 0 0 1.8rem; text-align: center; font-family: var(--font-script); font-weight: 400; font-style: normal;
    font-size: clamp(2.1rem, 3vw, 2.6rem); color: var(--gold-light); text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.faq-h { margin: 0; font: inherit; }
.faq-from { display: inline-block; margin-left: 0.5rem; font-family: var(--font-sans); font-style: normal; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); vertical-align: middle; }

/* ── FAQ page story ── */
.faq-story__tagline { margin: 0 auto 2.2rem; }
.faq-story__split { margin-top: 4rem; grid-template-columns: 0.85fr 1.15fr; align-items: start; }
.faq-story__split .img-frame { max-width: 460px; }
.faq-story__title { margin: 0 0 1rem; font-family: var(--font-script); font-weight: 400; font-size: clamp(2.1rem, 3vw, 2.6rem); color: var(--gold-light); text-shadow: 0 0 2px rgba(0,0,0,0.5); }
.faq-story__quote {
    margin: 1.4rem 0; padding: 0.4rem 0 0.4rem 1.5rem; border-left: 2px solid var(--gold-dim);
    font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.4rem); color: var(--gold-light); line-height: 1.6;
}
.faq-story__end { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--gold-light); }

/* ── Privacy / legal ── */
.legal__sub { font-family: var(--font-serif); font-style: italic; color: var(--gold-light); }
.legal__box {
    position: relative; max-width: 900px; margin: 3.5rem auto 0; padding: 3rem 3.2rem 2.6rem;
    background: rgba(30,38,54,0.98); border: 1px solid rgba(201,168,76,0.4);
    box-shadow: 0 0 14px rgba(201,168,76,0.15), inset 0 1px 0 rgba(201,168,76,0.1);
}
.legal__part + .legal__part { margin-top: 2.2rem; padding-top: 2.2rem; border-top: 1px solid rgba(201,168,76,0.12); }
.legal__title { margin: 0 0 0.9rem; font-style: normal; font-family: var(--font-sans); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); }
.legal__part p { margin-bottom: 0.7rem; }
.legal__part p:last-child { margin-bottom: 0; }

/* ── Responsive ── */
@media (max-width: 1080px) { .all-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1080px) { .explained-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 968px) {
    .explained-grid { grid-template-columns: 1fr; }
    .faq-story__split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .all-grid { grid-template-columns: 1fr; }
    .all-card, .explained-card { padding: 2.1rem 1.6rem 1.9rem; }
    .legal__box { padding: 2.2rem 1.3rem 2rem; }
    .carousel { margin: 3.5rem 0 3.8rem; }
    .carousel__item { height: 260px; }
}

/* ── Full-width photo carousel section (About Me + homepage, round 37) ── */
.photo-gallery, .about-gallery { padding: 0; }
.photo-gallery .carousel, .about-gallery .carousel { margin: 0; }
.carousel--wide .carousel__item { height: 480px; }
@media (max-width: 768px) { .carousel--wide .carousel__item { height: 300px; } }

/* FAQ topic titles: fading gold lines from the title outwards (round 41) */
.faq-group__title::before, .faq-group__title::after { content: ''; flex: 1 1 0; max-width: 220px; height: 1px; }
.faq-group__title::before { background: linear-gradient(to left, rgba(228,201,123,0.75), transparent); }
.faq-group__title::after  { background: linear-gradient(to right, rgba(228,201,123,0.75), transparent); }
@media (max-width: 560px) { .faq-group__title { gap: 0.9rem; } .faq-group__title::before, .faq-group__title::after { max-width: 60px; } }