.apo-city-guide {
    --cg-ink: #193b33;
    --cg-muted: #52635b;
    --cg-line: #d4d8cd;
    --cg-serif: "Cormorant Garamond", Georgia, serif;
    margin: 0;
    padding: 0;
    color: var(--cg-ink);
    background: #faf9f3;
    font: 400 16px/1.55 "DM Sans", "Segoe UI", Arial, sans-serif;
}
.apo-city-guide *, .apo-city-guide *::before, .apo-city-guide *::after { box-sizing: border-box; }
.apo-city-guide .cg-wrap {
    /* 1148px: the homepage's content width (its 1180px column less 16px gutters), so guides line up with the header and footer. */
    width: min(1148px, calc(100% - clamp(32px, 8vw, 96px)));
    margin-inline: auto;
    padding-bottom: clamp(28px, 4vw, 54px);
}
.apo-city-guide p, .apo-city-guide h1, .apo-city-guide h2,
.apo-city-guide h3, .apo-city-guide figure { margin: 0; }
.apo-city-guide h1, .apo-city-guide h2 {
    font-family: var(--cg-serif);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.04;
}
.apo-city-guide h2 { margin: 6px 0 12px; font-size: clamp(34px, 3.6vw, 51px); }
.apo-city-guide img { display: block; max-width: 100%; }
.apo-city-guide a { color: inherit; text-underline-offset: .2em; }
.apo-city-guide a:focus-visible, .apo-city-guide summary:focus-visible {
    outline: 3px solid #927120;
    outline-offset: 4px;
}
.apo-city-guide .cg-breadcrumb {
    display: flex;
    align-items: center;
    gap: .75em;
    padding: 14px 0;
    font-size: .84rem;
    color: var(--cg-muted);
}
.apo-city-guide .cg-hero {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    overflow: hidden;
    border-radius: 18px;
    color: #fff9eb;
    background: #803d2f;
}
.apo-city-guide .cg-hero-copy {
    align-self: center;
    min-width: 0;
    container-type: inline-size;
    padding: clamp(26px, 4.5vw, 66px);
}
.apo-city-guide .cg-eyebrow, .apo-city-guide .cg-offer-type {
    color: #755334;
    font-size: .69rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.apo-city-guide .cg-hero .cg-eyebrow { color: #fff1bd; }
.apo-city-guide .cg-hero .cg-eyebrow span { margin: 0 .5em; }
.apo-city-guide .cg-hero h1 {
    margin: 21px 0 13px;
    font-size: clamp(37px, 5.2vw, 72px);
    font-size: clamp(37px, 17cqi, 82px);
    /* Long names (Blue Mountains, Phillip Island, Southern Highlands) were cut off at the edge (found 10 Nov 2026). The
       name now wraps between words, and the size follows its longest word (--cg-word, set by destination-guide.php),
       so a single long word such as Charlottesville is scaled down to fit instead. */
    font-size: clamp(28px, min(17cqi, calc(165cqi / var(--cg-word, 1))), 82px);
    line-height: .98;
    color: inherit;
    text-wrap: balance;
}
.apo-city-guide .cg-hero h1 span { color: #f6d76b; }
.apo-city-guide .cg-deck {
    max-width: 32ch;
    color: #fff4e5;
    font-size: clamp(1rem, 1.45vw, 1.2rem);
}
.apo-city-guide .cg-button {
    display: inline-flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 24px;
    padding: 10px 17px;
    border-radius: 9px;
    background: #f6dd75;
    color: var(--cg-ink);
    font-weight: 700;
    text-decoration: none;
}
.apo-city-guide .cg-button:hover { background: #ffeb97; }
.apo-city-guide .cg-hero-photo { position: relative; min-height: clamp(310px, 30vw, 405px); }
.apo-city-guide .cg-hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.apo-city-guide .cg-hero-photo figcaption {
    position: absolute;
    bottom: 15px;
    left: 16px;
    padding: 6px 12px;
    border-radius: 20px;
    color: #fff;
    background: #112c25e8;
    font-size: .74rem;
    font-weight: 600;
}
.apo-city-guide .cg-hero-photo figcaption::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #ffe280;
}
.apo-city-guide .cg-directory {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    /* Top-aligned: centred, a short intro beside a long list left a large blank area above it. */
    align-items: start;
    gap: clamp(25px, 5vw, 80px);
    padding: clamp(32px, 4.5vw, 62px) 0;
}
.apo-city-guide .cg-editorial h2 { text-wrap: balance; }
.apo-city-guide .cg-editorial h2 em { color: #6e5630; }
.apo-city-guide .cg-editorial > p:not(.cg-eyebrow),
.apo-city-guide .cg-upcoming div > p:not(.cg-eyebrow),
.apo-city-guide .cg-planning div > p:not(.cg-eyebrow) { max-width: 52ch; color: var(--cg-muted); }
.apo-city-guide .cg-link { display: inline-block; padding-block: 8px; font-weight: 700; }
.apo-city-guide .cg-editorial .cg-link { margin-top: 7px; }
.apo-city-guide .cg-offer {
    display: grid;
    grid-template-columns: clamp(65px, 7vw, 96px) 1fr auto;
    align-items: center;
    gap: clamp(12px, 1.4vw, 21px);
    padding: 13px 0;
    border-top: 1px solid var(--cg-line);
    text-decoration: none;
}
.apo-city-guide .cg-offer:last-child { border-bottom: 1px solid var(--cg-line); }
.apo-city-guide .cg-offer img {
    width: 100%;
    height: clamp(62px, 6.4vw, 81px);
    object-fit: cover;
    border-radius: 7px;
}
.apo-city-guide .cg-offer h3 { margin: 2px 0; font: 700 clamp(1.05rem, 1.45vw, 1.35rem)/1.2 "DM Sans", Arial, sans-serif; }
.apo-city-guide .cg-offer:hover h3 { text-decoration: underline; }
.apo-city-guide .cg-offer-copy > span:last-child, .apo-city-guide .cg-price small {
    display: block;
    color: var(--cg-muted);
    font-size: .8rem;
}
.apo-city-guide .cg-offer-type { font-size: .65rem; letter-spacing: .09em; }
.apo-city-guide .cg-price { text-align: right; }
.apo-city-guide .cg-price strong { font-size: 1.29rem; }
.apo-city-guide .cg-upcoming {
    display: grid;
    grid-template-columns: clamp(115px, 21vw, 250px) 1fr;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--cg-line);
    border-radius: 14px;
    background: #f2eee3;
}
/* "Also in …" cards follow one another: keep a gap so their borders don't touch. */
.apo-city-guide .cg-upcoming + .cg-upcoming { margin-top: clamp(10px, 1.2vw, 16px); }
.apo-city-guide .cg-upcoming img { width: 100%; height: 100%; min-height: 145px; max-height: 205px; object-fit: cover; }
.apo-city-guide .cg-upcoming > div { padding: 20px clamp(17px, 3vw, 42px); }
.apo-city-guide .cg-upcoming h2, .apo-city-guide .cg-planning h2 { font-size: clamp(26px, 2.8vw, 38px); }
.apo-city-guide .cg-planning {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: clamp(24px, 3.4vw, 46px) 0 16px;
    padding: 22px 0;
    border-block: 1px solid var(--cg-line);
}
.apo-city-guide .cg-planning nav { display: grid; justify-items: start; }
.apo-city-guide .cg-credits { color: var(--cg-muted); font-size: .85rem; }
.apo-city-guide .cg-credits summary { width: fit-content; padding-block: 9px; cursor: pointer; }
.apo-city-guide .cg-credits ul { padding-left: 20px; }
/* Country and city guides: each destination's hero colour, in the same layout. */
.apo-city-guide.cg-tone-tangier .cg-hero { background: #1d5457; }
.apo-city-guide.cg-tone-brasov .cg-hero { background: #2f4636; }
.apo-city-guide.cg-tone-verona .cg-hero { background: #6b2537; }
.apo-city-guide.cg-tone-paris .cg-hero { background: #243150; }
.apo-city-guide.cg-tone-granada .cg-hero { background: #87452a; }
.apo-city-guide.cg-tone-istanbul .cg-hero { background: #1e4a69; }
.apo-city-guide.cg-tone-chefchaouen .cg-hero { background: #2b5680; }
.apo-city-guide.cg-tone-essaouira .cg-hero { background: #1f566a; }
.apo-city-guide.cg-tone-meknes .cg-hero { background: #6e4a26; }
.apo-city-guide.cg-tone-tetouan .cg-hero { background: #2f5a4c; }
.apo-city-guide.cg-tone-sale .cg-hero { background: #5e3b2b; }
.apo-city-guide.cg-tone-larache .cg-hero { background: #4b5a2f; }
.apo-city-guide.cg-tone-beni-mellal .cg-hero { background: #3c5b3a; }
.apo-city-guide .cg-price small:first-child { font-size: .72rem; }
.apo-city-guide .cg-directory + .cg-directory { border-top: 1px solid var(--cg-line); }
/* Visitor guide ("Know before you go"): facts, getting around, safety and places to eat. */
.apo-city-guide .cg-visitor { padding: clamp(30px, 4vw, 54px) 0 8px; border-top: 1px solid var(--cg-line); }
.apo-city-guide .cg-visitor-head { max-width: 62ch; margin-bottom: clamp(18px, 2.4vw, 28px); }
.apo-city-guide .cg-visitor-head h2 em { color: #6e5630; }
.apo-city-guide .cg-visitor-head > p:not(.cg-eyebrow) { color: var(--cg-muted); }
.apo-city-guide .cg-visitor-checked { margin-top: 6px; font-size: .84rem; }
.apo-city-guide .cg-visitor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.apo-city-guide .cg-visitor-card { padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--cg-line); border-radius: 14px; background: #fffdf7; }
.apo-city-guide .cg-visitor-card h3 { margin: 0 0 12px; font: 600 clamp(25px, 2.4vw, 32px)/1.1 var(--cg-serif); letter-spacing: -.03em; }
.apo-city-guide .cg-visitor-card h4 { margin: 16px 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #755334; }
.apo-city-guide .cg-visitor-card p, .apo-city-guide .cg-visitor-card li { color: #34463f; font-size: .95rem; }
.apo-city-guide .cg-visitor-card ul { margin: 0; padding-left: 19px; }
.apo-city-guide .cg-visitor-card li + li { margin-top: 5px; }
.apo-city-guide .cg-facts { display: grid; margin: 0; }
.apo-city-guide .cg-facts > div { display: grid; grid-template-columns: minmax(92px, 32%) 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--cg-line); }
.apo-city-guide .cg-facts > div:last-child { border-bottom: 1px solid var(--cg-line); }
.apo-city-guide .cg-facts dt { font-weight: 700; font-size: .88rem; }
.apo-city-guide .cg-facts dd { margin: 0; color: #34463f; font-size: .93rem; }
/* Emergency numbers are call links: a padded pill with a phone mark, easy to tap (they were 19–29 × 22 px). */
.apo-city-guide .cg-emergency > div { align-items: center; }
.apo-city-guide .cg-emergency dd a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 4px 14px 4px 11px;
    border: 1px solid #c3cabd;
    border-radius: 999px;
    background: #fff;
    color: var(--cg-ink);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    text-decoration: none;
}
.apo-city-guide .cg-emergency dd a::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.apo-city-guide .cg-emergency dd a:hover { border-color: currentColor; background: #fbf6e3; }
.apo-city-guide .cg-visitor-source, .apo-city-guide .cg-visitor-note { margin-top: 12px; color: var(--cg-muted); font-size: .84rem; }
.apo-city-guide .cg-eat { list-style: none; padding: 0 !important; }
.apo-city-guide .cg-eat li { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 9px 0; border-top: 1px solid var(--cg-line); }
.apo-city-guide .cg-eat li + li { margin-top: 0; }
.apo-city-guide .cg-eat li:last-child { border-bottom: 1px solid var(--cg-line); }
.apo-city-guide .cg-eat strong { grid-column: 1; }
/* A restaurant name that links to its own website is underlined and carries an arrow, so it no longer looks the same as
   a plain (unlinked) name. Padding gives it a 32px tap height without moving the text. */
.apo-city-guide .cg-eat strong a {
    display: inline-block;
    padding-block: 4px;
    margin-block: -4px;
    color: #1d4d3f;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(29, 77, 63, .5);
    text-underline-offset: .22em;
}
.apo-city-guide .cg-eat strong a::after {
    content: "\2197";
    content: "\2197" / "";
    display: inline-block;
    margin-left: .3em;
    font-size: .85em;
    font-weight: 400;
}
.apo-city-guide .cg-eat strong a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.apo-city-guide .cg-eat span:not(.cg-eat-price) { grid-column: 1; color: var(--cg-muted); font-size: .86rem; }
.apo-city-guide .cg-eat-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; color: #6e5630; }
.apo-city-guide .cg-visitor-sources { margin-top: 14px; }
@media (max-width: 750px) {
    .apo-city-guide .cg-visitor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 750px) {
    .apo-city-guide .cg-hero, .apo-city-guide .cg-directory { grid-template-columns: 1fr; }
    .apo-city-guide .cg-hero-copy { padding: 26px 23px; }
    .apo-city-guide .cg-hero h1 { margin-top: 14px; }
    .apo-city-guide .cg-button { margin-top: 17px; }
    .apo-city-guide .cg-deck { max-width: 48ch; }
    .apo-city-guide .cg-hero-photo { min-height: 0; height: clamp(160px, 46vw, 250px); }
    .apo-city-guide .cg-directory { gap: 17px; }
    .apo-city-guide .cg-upcoming { grid-template-columns: 96px 1fr; }
    .apo-city-guide .cg-upcoming img { max-height: none; }
    .apo-city-guide .cg-planning { display: grid; gap: 10px; padding-block: 18px; }
}
@media (max-width: 420px) {
    .apo-city-guide .cg-offer { grid-template-columns: 49px minmax(0, 1fr) auto; gap: 9px; }
    .apo-city-guide .cg-upcoming { grid-template-columns: 76px minmax(0, 1fr); }
    .apo-city-guide .cg-upcoming > div { padding: 14px; }
}