/* Hub pages on the landing-page design (2026-10-01): homepage EN + DE, NAATI, city pages, Locations,
   Services and the four specialist service pages (Business, Legal, Marketing, Technical).
   ADDITIVE to /lp.css and loaded after it, ONLY by those hub pages (index.php, deu/index.php, NAATI/,
   Location/, Locations/, Services/ and Services/{Business,Legal,Marketing,Technical}Translation/).
   Never restyle an lp.css rule from here: the country/guide landing pages depend on lp.css. */

/* Eyebrow pill with an icon instead of a country flag */
.lp-eyebrow .material-icons { font-size: 18px; color: var(--accent) !important; }

/* Four-card variant of .lp-facts (selling points) */
.lp-facts.is-4 { grid-template-columns: repeat(4, 1fr); }
.lp-fact .lp-ic { margin-bottom: 14px; }
@media (max-width: 900px) { .lp-facts.is-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lp-facts.is-4 { grid-template-columns: 1fr; } }

/* Link-chip groups (guides, document types, cities) keep their own section headings */
.lp .lp-bycountry h2 { font-size: 1.2rem; margin: 0 0 4px; }
.lp .lp-bycountry p { margin: 0; color: #4a5664; font-size: .95rem; }
.lp-bycountry + .lp-bycountry { margin-top: 0; }

/* Running text (NAATI explanation, city introduction) */
.lp-prose { max-width: 780px; }
.lp-prose p { color: #4a5664; font-size: 1.02rem; margin: 0 0 16px; }
.lp-prose h3 { font-family: Futura, 'Futura Std', Arial, sans-serif; font-size: 1.3rem; color: #0d1b2a; margin: 26px 0 8px; }

/* Side card beside running text (NAATI page) */
.lp-side { background: var(--light); border: 1px solid #e3e9ef; border-radius: 16px; padding: 28px; }
.lp-side h3 { font-family: Futura, 'Futura Std', Arial, sans-serif; font-size: 1.3rem; color: #0d1b2a; margin: 0 0 12px; }
.lp-side > p { color: #4a5664; margin: 0 0 18px; }

/* City page: introduction beside the video */
.lp-about { display: grid; grid-template-columns: 1fr 320px; gap: 44px; align-items: start; }
.lp-about video { float: none; display: block; margin: 0; width: 100%; max-width: 320px; border-radius: 12px; box-shadow: 0 14px 30px rgba(0,30,60,.14); }
@media (max-width: 900px) { .lp-about { grid-template-columns: 1fr; gap: 24px; } }

/* Trust bar sits on white between sections */
.lp .trust-bar { border-top: 0; }

/* Homepage document grid (lp_doc_grid): 3 feature cards with country links, then compact guide cards */
.lp-dg-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 26px 0 18px; }
.lp-dg-card { background: #fff; border: 1px solid #e3e9ef; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.lp-dg-head, .lp-dg-item { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: #0d1b2a; }
.lp-dg-head b, .lp-dg-item b { display: block; font-family: Futura, 'Futura Std', Arial, sans-serif; font-size: 1.12rem; line-height: 1.25; color: #0d1b2a; }
.lp-dg-head small, .lp-dg-item small { display: block; color: #5b6774; font-size: .88rem; line-height: 1.45; margin-top: 4px; }
.lp-dg-head:hover b, .lp-dg-item:hover b { color: #174177; text-decoration: underline; }
.lp-dg-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #edf2f8; display: flex; align-items: center; justify-content: center; }
.lp-dg-ic .material-icons { color: #174177; font-size: 22px; }
.lp-dg-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding-top: 14px; border-top: 1px solid #eef2f6; }
.lp-dg-flags a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: #24313f; text-decoration: none; font-size: .9rem; font-weight: 600; }
.lp-dg-flags a:hover { background: #f2f6fa; color: #174177; }
.lp-dg-flags svg { width: 22px; height: 15px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.lp-dg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-dg-item { background: #fff; border: 1px solid #e3e9ef; border-radius: 14px; padding: 16px 16px 16px 16px; align-items: center; transition: border-color .15s, box-shadow .15s; }
.lp-dg-item:hover { border-color: #b9c9db; box-shadow: 0 6px 18px rgba(0,30,60,.07); }
.lp-dg-item > span:nth-child(2) { flex: 1; min-width: 0; }
.lp-dg-go { color: #9aaabb; font-size: 22px; }
@media (max-width: 900px) { .lp-dg-feat { grid-template-columns: 1fr; } .lp-dg-flags { grid-template-columns: repeat(3, 1fr); } .lp-dg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lp-dg-flags { grid-template-columns: 1fr 1fr; } .lp-dg-grid { grid-template-columns: 1fr; } }

/* Hero "Most requested" card (lp_hero_popular) - fills the left column beside the tall form */
.lp-pop { margin: 26px 0 0; max-width: 482px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 8px 6px; }
.lp-pop-h { display: block; color: rgba(255,255,255,.75); font-size: .74rem; text-transform: uppercase; letter-spacing: 1.2px; padding: 8px 14px 6px; }
.lp-pop a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: #fff !important; text-decoration: none; }
.lp-pop a + a { border-top: 1px solid rgba(255,255,255,.1); }
.lp-pop a:hover { background: rgba(255,255,255,.1); }
.lp-pop .material-icons { font-size: 20px; color: var(--accent, #e8a317); }
.lp-pop span { flex: 1; font-weight: 600; font-size: .98rem; }
.lp-pop em { font-style: normal; font-weight: 700; font-family: Futura, 'Futura Std', Arial, sans-serif; font-size: 1.05rem; }
.lp-pop a::after { content: "chevron_right"; font-family: 'Material Icons'; font-feature-settings: 'liga'; font-size: 20px; color: rgba(255,255,255,.5); }
@media (max-width: 900px) { .lp-pop { display: none; } }   /* phones: no empty column to fill, keep the form close */

/* ---- gtranslation hub additions (2026-10-01, v1.1) ---- */
/* Service chip that has no page of its own (inc/hub-lists.php hub_service_chips): looks like a chip, not a link */
.lp-chip.is-plain { background: #f6f8fa; color: #4a5664 !important; font-weight: 500; cursor: default; }
.lp-chip.is-plain i.material-icons { color: #8a97a5; }
/* Contact line in a side card (German homepage) */
.lp-contact { list-style: none; margin: 0 0 18px; padding: 0; color: #4a5664; }
.lp-contact li { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.lp-contact .material-icons { font-size: 20px; color: var(--primary); }
/* City page: image beside the introduction (replaces the video slot) */
.lp-about img { display: block; width: 100%; max-width: 320px; height: auto; border-radius: 12px; box-shadow: 0 14px 30px rgba(0,30,60,.14); }
/* Hero breadcrumb on hub pages */
.lp-crumb { margin: 16px 0 0; font-size: 14px; }