/* City photos: the owner's photos of a city on its page (includes/city-photos.php); palette tokens only (the caption scrim on the photos is the one literal). */

/* --- The top: the SEO heading over a rule, the line under it between two rules, the opening paragraphs full width (reference pages, 22 Oct 2026) --- */
.site-long-content__title { margin: 0 0 14px; padding-bottom: 14px; text-align: center; background: url("/assets/images/icons-group/fade-line.png") center bottom / 100% 8px no-repeat; }   /* owner's fade-line under the heading (icons-group) */
.site-long-content__title h2 { margin: 0; font-family: 'PT Sans', Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; color: var(--c-accent); }   /* main heading: PT Sans 24/700, theme gold (owner 22 Oct) */
.site-long-content__sub { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; }
.site-long-content__sub::before, .site-long-content__sub::after { content: ""; flex: 1 1 24px; min-width: 24px; height: 1px; background: rgba(var(--c-accent-rgb), .45); }   /* a floor, so a long line wraps instead of eating the rules */
.site-long-content__sub p, .site-long-content__sub h3 { margin: 0; font-family: 'PT Sans', Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.4; text-align: center; color: var(--text-color); }   /* sub heading: PT Sans 20/700 */
.site-long-content__intro { margin-bottom: 4px; }
/* bands instead of dividers (owner, 22 Oct 2026, reference pages): every photo | card section on a full-width band of a slightly lighter
   colour, top to bottom like the reference; the top of the copy and the photo groups on the page's own ground */
.site-band { padding: 40px 0; }
.site-band--alt { background: linear-gradient(180deg, var(--c-surface-light) 0%, var(--c-surface) 100%); }
.site-band > .site-long-content, .site-band > .site-city-photos { margin-top: 0; margin-bottom: 0; }
.site-band .site-copy-block:last-child, .site-band .site-copy-backdrop:last-child, .site-band .site-copy-float:last-child { margin-bottom: 0; }
.site-band .site-city-photos__head { margin-top: 0; }

/* --- A copy section as a block (reference pages): its heading centred above (the line under it between rules), then the photo — half the width and
       TALL, 2:3, a full figure "as if standing before a mirror" (owner 22 Oct) — beside the card, the other half, exactly as tall, the button at its foot;
       a longer card makes the photo taller still (cover) --- */
.site-copy-block__title { margin: 0 0 12px; text-align: center; }
.site-copy-block__title h2 { margin: 0; font-family: 'PT Sans', Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--c-accent); }   /* main heading */
.site-copy-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: stretch; margin: 14px 0 44px; }   /* owner: card and photo 50 / 50 */
.site-copy-block--text { grid-template-columns: minmax(0, 1fr); }   /* photos used up: the card alone, full width */
.site-copy-block__photo { min-width: 0; display: flex; flex-direction: column; }
.site-copy-block__fig { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 420px; margin: 0; color: inherit; text-decoration: none; }
/* the card sets the row's height and the photo fills it (owner: "card complete content se fill karo"): flex-basis 0 keeps the photo out of the row's height; with ~450 words in the card the photo comes out about 2:3 */
.site-copy-block__fig img { flex: 1 1 0; display: block; width: 100%; min-height: 0; object-fit: cover; object-position: 50% 12%; border: 10px solid var(--c-text); border-radius: 4px; background: var(--c-text); box-sizing: border-box; }   /* the reference's white photo frame */
/* the card: 1px gold, the text, the button at the foot */
.site-copy-block__card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 26px 28px 34px; background-color: var(--c-dark); background-image: var(--c-texture); border: 1px solid rgba(var(--c-text-rgb), .10); border-radius: 6px; }   /* owner 22 Oct: the site's own ground — the dark dotted texture of the body — on the card */
.site-copy-block__body { margin-bottom: 18px; font-size: 14px; line-height: 1.75; }
.site-copy-block__body h3, .site-copy-block__body h4 { margin: 22px 0 10px; font-family: 'PT Sans', Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--c-accent); text-align: left; }   /* SEO headings in the text: theme gold, left (owner 22 Oct) */   /* headings inside the text, in the accent like the reference */
.site-copy-block__body > h3:first-child { margin: 0 0 16px; padding-bottom: 14px; background: url("/assets/images/icons-group/fade-line.png") center bottom / 100% 8px no-repeat; font-size: 24px; text-align: center; color: var(--c-accent); }   /* the card's own heading, centred over a rule: a section's first heading, PT Sans 24/700 in the theme gold (owner 22 Oct) */
.site-copy-block--text .site-copy-block__body > h3:first-child { margin-top: 0; margin-bottom: 10px; padding-bottom: 0; background: none; font-size: var(--fs-20); text-align: left; color: var(--c-accent); }   /* the middle card: its SEO heading sits above the text, so the text's first <h3> is an ordinary gold heading */
/* the middle section (owner 22 Oct: "3 parts with photo, each in a different style"): its in-text headings gold and left like the cards' */
.site-copy-float h3, .site-copy-backdrop h3 { margin: 20px 0 10px; font-family: 'PT Sans', Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--c-accent); text-align: left; }
.site-copy-float p, .site-copy-backdrop p { margin: 0 0 14px; }
.site-copy-float, .site-copy-backdrop__text { font-size: 14px; line-height: 1.75; }
/* part 1: an arched photo with a gold rim on the left, the text flowing around it and on under it — no card */
.site-copy-float { display: flow-root; margin: 10px 0 44px; }
.site-copy-float__fig { position: relative; float: left; width: 30%; margin: 4px 32px 14px 0; padding: 6px; border: 2px solid var(--c-accent); border-radius: 999px 999px 14px 14px; }
/* the frame, corners and shadow of the round photo and of part 2's box below are chosen in the admin (includes/copy-block-style.php,
   Look of this city: "Round photo …" and "Photo-behind-text box …", 23 Oct 2026); the rules here are their defaults */
.site-copy-float__fig::after { content: ""; position: absolute; left: 0; right: 0; bottom: -30px; height: 30px; background: center top / 100% 100% no-repeat; pointer-events: none; display: none; }
.site-copy-float__fig > img[width][height] { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 15%; border-radius: 999px 999px 10px 10px; }
.site-copy-float > :last-child { margin-bottom: 0; }
/* part 2: the photo as a backdrop on the right, fading into the dark side where the text sits */
.site-copy-backdrop { position: relative; margin: 0 0 48px; border-radius: 14px; border: 1px solid rgba(var(--c-accent-rgb), .35); background: var(--c-dark); }   /* no overflow:hidden: it hid the shadow below the box — the photo takes the inner corners itself */
.site-copy-backdrop > img.site-copy-backdrop__img[width][height] { position: absolute; top: 0; right: 0; width: 46%; height: 100%; object-fit: cover; object-position: 50% 15%; border-radius: 0 13px 13px 0; }
.site-copy-backdrop::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -29px; height: 28px; background: center top / 100% 100% no-repeat; pointer-events: none; display: none; }
.site-copy-backdrop::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 46%; background: linear-gradient(90deg, var(--c-dark) 0%, rgba(var(--c-dark-rgb), .55) 22%, rgba(var(--c-dark-rgb), 0) 55%); z-index: 1; pointer-events: none; }
.site-copy-backdrop__text { position: relative; z-index: 2; width: 58%; padding: 30px 34px; }
.site-copy-backdrop__text > :first-child { margin-top: 0; }
.site-copy-backdrop__text > h3:first-child { font-size: 24px; }   /* the panel's first heading: 24px like every section's first heading (owner 22 Oct) */
.site-copy-backdrop__text > :last-child { margin-bottom: 0; }
.site-copy-backdrop--plain .site-copy-backdrop__text { width: auto; }
/* part 3: the dark card with a wide photo across its top */
.site-copy-banner { margin: -26px -28px 22px; height: 440px; overflow: hidden; border-radius: 6px 6px 0 0; }
.site-copy-banner > img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.site-copy-block__body * + h3 { margin-top: 18px; }
.site-copy-block__body ul, .site-copy-block__body ol { margin: 0 0 14px; padding-left: 22px; }
.site-copy-block__body li { margin-bottom: 4px; }
.site-copy-block__body > :last-child { margin-bottom: 0; }
/* the card button IS the site's service button (.site-service-card, main.css: surface, 1px gold border, gold icon + text, shadow-1 curl);
   owner 22 Oct 2026: one design for both, only the icon follows the card's content. Here only its place: centred at the card's foot */
.site-copy-block__card .site-copy-block__btn { margin: auto auto 0; }
/* shadows (owner, 22 Oct 2026): every content card = shadow-1, the paper curl the buttons use; every photo = shadow-8, the soft straight one —
   on this dark ground shadow-8 carries the most ink, shadow-6 only darkens its middle. Offsets count from the padding box (the card has a 1px border) */
.site-copy-block__card::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -29px; height: 28px; background: url("/assets/images/icons-group/shadows/shadow-1.png") center top / 100% 100% no-repeat; pointer-events: none; }
.site-copy-block__fig::after { content: ""; position: absolute; left: 0; right: 0; bottom: -30px; height: 30px; background: url("/assets/images/icons-group/shadows/shadow-8.png") center top / 100% 100% no-repeat; pointer-events: none; }

/* --- The photo groups (40 each, every one visible: nothing folded, so every picture is in the page for Google) --- */
/* top/bottom margins only: a left/right value here would cancel .container's auto margins and push the section to the page edge */
.site-city-photos { margin-top: 12px; margin-bottom: 8px; padding-left: 12px; padding-right: 12px; }   /* the ad cards' side padding (the site's .container), so the grid, the photo | card blocks and the cards all line up (owner 24 Oct: they sat 12px narrower) */
.site-long-content.site-long-content--photos { padding-left: 12px; padding-right: 12px; }   /* the photo | card blocks: as wide as the ad cards (the plain text keeps .site-long-content's 24px / 16px) */
/* heading centred like the area-links block it replaces; the count sits under it */
.site-city-photos__head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 16px; text-align: center; }
.site-city-photos__head::after { content: ""; display: block; width: min(100%, 420px); height: 8px; margin-top: 10px; background: url("/assets/images/icons-group/fade-dotted.png") center / 100% 8px no-repeat; }   /* owner's fade-dotted under every photo group heading (icons-group) */
.site-city-photos__head .site-seo-section__title { margin-bottom: 0; font-family: 'PT Sans', Arial, sans-serif; font-size: 24px; font-weight: 700; color: var(--c-accent); }   /* main heading of each photo group */
.site-city-photos__head .site-seo-section__title i { color: var(--c-accent); }   /* its icon in the gold too (owner 22 Oct) */
.site-city-photos__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 16px; }   /* owner 22 Oct: 4 on desktop, 2 on phones; a clear gap between the photos */
.site-city-photos__item { position: relative; display: block; aspect-ratio: 3 / 4; margin: 0; border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; background: var(--c-surface); text-decoration: none; }
.site-city-photos__item > img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }   /* written against the attributes: main.css's img[width][height] { height: auto } outranks a plain class rule and left the photos at their own heights */
.site-city-photos__item:has(.site-city-photos__btn:hover) { border-color: rgba(var(--c-accent-rgb), .6); }
/* The place's name is a button on a black scrim at the foot of the photo; only the button is a link, the photo is not (owner, 23 Oct 2026) */
.site-city-photos__bar { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 26px 8px 10px; display: flex; justify-content: center; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .72)); pointer-events: none; }
.site-city-photos__btn { pointer-events: auto; display: inline-block; max-width: 100%; padding: 7px 14px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-size: var(--fs-12); font-weight: var(--fw-bold, 700); line-height: 1.2; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); transition: background .15s, transform .15s; }
.site-city-photos__btn:hover, .site-city-photos__btn:focus-visible { background: var(--c-accent-light); color: var(--c-on-accent); transform: translateY(-1px); }
/* "Load more" under a photo group (owner, 24 Oct 2026: 12 photos, then a stylish button): the owner's primary button between two gold
   rules, with the number of photos still hidden; it fills gold on hover. The hidden tiles rise in as they are shown. */
.site-city-photos__item.is-more { display: none; }
.site-city-photos__item.is-in { animation: cpMoreIn .45s ease both; }
@keyframes cpMoreIn { from { opacity: 0; transform: translateY(12px); } }
.site-city-photos__more { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.site-city-photos__more::before, .site-city-photos__more::after { content: ""; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgba(var(--c-accent-rgb), 0), rgba(var(--c-accent-rgb), .6)); }
.site-city-photos__more::after { background: linear-gradient(90deg, rgba(var(--c-accent-rgb), .6), rgba(var(--c-accent-rgb), 0)); }
.site-city-photos__morebtn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.site-city-photos__morebtn:hover, .site-city-photos__morebtn:focus-visible { background: var(--c-accent); color: var(--c-on-accent); transform: translateY(-1px); }
.site-city-photos__morecount { min-width: 36px; padding: 3px 8px; border-radius: 999px; background: rgba(var(--c-accent-rgb), .16); font-size: 12px; font-weight: 800; line-height: 1.2; text-align: center; transition: background .2s; }
.site-city-photos__morebtn:hover .site-city-photos__morecount, .site-city-photos__morebtn:focus-visible .site-city-photos__morecount { background: rgba(0, 0, 0, .18); }
.site-city-photos__morechev { font-size: 12px; transition: transform .2s; }
.site-city-photos__morebtn:hover .site-city-photos__morechev { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) {
  .site-city-photos__item.is-in { animation: none; }
  .site-city-photos__morebtn, .site-city-photos__morechev, .site-city-photos__morecount { transition: none; }
}

/* --- widths: the block stacks under 992px (the card is too narrow beside a photo there); the grid is 4 columns from 768px, 2 below --- */
/* 992–1199px (23 Oct 2026, audit): the 50/50 split made the photo a tall thin strip beside a long card. The photo takes 40%, keeps its
   2:3 shape and stays in view while the card scrolls past; 600–991px: the stacked photo is capped so it fits one screen */
@media (min-width: 992px) and (max-width: 1199px) {
  .site-copy-block { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: 26px; }
  .site-copy-block__photo { position: sticky; top: 84px; }
  .site-copy-block__fig { min-height: 0; }
  .site-copy-block__fig img { flex: none; height: auto; aspect-ratio: 2 / 3; }
}
@media (min-width: 600px) and (max-width: 991px) {
  .site-copy-block__photo { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 991px) {
  .site-copy-block { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 48px; }
  .site-copy-block__fig { min-height: 0; }
  .site-copy-block__fig img { flex: none; height: auto; aspect-ratio: 2 / 3; }   /* stacked: the photo keeps 2:3, the card its own height */
  .site-copy-block__photo { margin-bottom: 14px; }   /* room for the shadow before the card */
  .site-copy-block--alt .site-copy-block__card { margin-bottom: 14px; }
}
/* small phones: the same 12px as the ad cards (was 16px, owner 24 Oct) */
@media (max-width: 767px) {
  .site-copy-float__fig { float: none; width: auto; max-width: 340px; margin: 0 auto 18px; }
  .site-copy-backdrop > img.site-copy-backdrop__img[width][height] { position: static; display: block; width: 100%; height: 360px; border-radius: 13px 13px 0 0; }
  .site-copy-backdrop::before { top: 0; bottom: auto; left: 0; width: auto; height: 360px; background: linear-gradient(180deg, rgba(var(--c-dark-rgb), 0) 55%, var(--c-dark) 100%); }
  .site-copy-backdrop__text { width: auto; padding: 18px 16px 22px; }
  .site-copy-banner { margin: -18px -16px 18px; height: auto; }
  .site-copy-banner > img[width][height] { height: auto; }   /* phones: the whole banner, at its own shape */
  .site-band { padding: 28px 0; }
  .site-long-content__sub { gap: 12px; }
  .site-copy-block__card { padding: 18px 16px 34px; }   /* bottom = the button's 20px shadow curl + 14px, as on desktop (the curl touched the card's edge at 20px) */
  .site-copy-block__fig img { border-width: 6px; }
  .site-city-photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .site-city-photos__item { border-radius: 8px; }
  .site-city-photos__bar { padding: 18px 6px 8px; }
  .site-city-photos__btn { font-size: var(--fs-11); padding: 6px 11px; }
  .site-city-photos__more { gap: 10px; margin-top: 20px; }
  .site-city-photos__morebtn { padding: 10px 16px; font-size: 14px; gap: 8px; }
}