/* Country pages (country-ireland.html, country-netherlands.html) on a phone. Loaded last, after
mobile-common.css, which already gives them the ☰ menu, spacing, section headings, the FAQ,
the last call to action, the footer and the panels that come up from the bottom. This file
is only what the country pages' own sections need. On a desktop screen none of it shows.
The rules for readers of 45 and over hold here too: text of 16–17px and up, nothing
important in pale grey, anything to tap at least 48px. Rows of cards that would stack into
a long column (the reasons, the life cards, the other countries) are swiped sideways
instead, like the countries on the home page. */
@media (max-width: 760px) {
/* ---------- Hero ---------- */
/* Title, then the photo, then the line and the three numbers. The two columns become one,
and the photo moves up between the title and the text so the first screen has a picture. */
.c-hero { padding: 4px 0 48px; }
.c-hero .crumb { min-height: 48px; }
.n-hero-grid { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.n-hero-side { display: contents; }
.n-title { order: 1; margin-bottom: 26px; }
.c-hero .n-title h1 { margin: 0; font-size: 54px; line-height: 1; }
.n-hero-pic { order: 2; }
.c-hero-photo { height: auto; aspect-ratio: 4 / 3; border-radius: 24px; }
.n-hero-side .lead { order: 3; margin: 26px 0 30px; font-size: 19px; line-height: 1.45; opacity: .85; }
.c-glance { order: 4; gap: 14px; padding-top: 22px; }
.c-glance b { font-size: 40px; }
.c-glance span { font-size: 15px; opacity: .8; }
/* ---------- Why this country + the key facts ---------- */
.n-dark { padding: 16px 0 24px; }
.n-dark--why { padding-top: 16px; }
.n-dark--why .n-dark-head { margin-bottom: 28px; }
.n-dark--why .n-dark-head h2 { font-size: 44px; line-height: 1.02; }
/* The four reasons, swiped: all four open, the next one showing at the edge */
.n-why-grid {
display: flex; gap: 12px; min-height: 0; margin: 0 -20px 56px; padding: 0 20px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
overscroll-behavior-x: contain; scrollbar-width: none;
}
.n-why-grid::-webkit-scrollbar { display: none; }
.n-why-grid article, .n-why-grid article.is-open {
flex: 0 0 78%; min-height: 250px; padding: 24px 22px 26px; border-radius: 24px; scroll-snap-align: start;
}
.n-why-grid .mono { font-size: 15px; opacity: .85; }
.n-why-grid h3, .n-why-grid article.is-open h3 { padding-top: 32px; font-size: 34px; }
.n-why-grid p, .n-why-grid article.is-open p { font-size: 17px; opacity: .95; }
.n-facts-head { font-size: 13px; opacity: .7; }
.n-facts > div { padding: 14px 0; }
.n-facts dt { font-size: 13px; opacity: .7; }
.n-note, .n-dark .n-note { font-size: 13px; opacity: .7; }
/* ---------- Universities ---------- */
.n-unis-sec { padding: 64px 0; }
html[lang="uk"] .n-unis-sec .sec-head h2 { font-size: 44px; }
.n-uni, .n-uni--feature { border-radius: 24px; }
.n-uni--feature { margin-bottom: 16px; }
.n-uni--feature .n-uni-ph { min-height: 0; aspect-ratio: 4 / 3; }
.n-uni--feature .n-uni-body { padding: 24px 22px 22px; }
.n-uni--feature h3 { margin: 10px 0 12px; font-size: 36px; line-height: 1.02; }
.n-uni--feature p { margin-bottom: 22px; font-size: 17px; opacity: .85; }
.n-uni-facts > div { grid-template-columns: 84px 1fr; }
.n-uni-facts dt { font-size: 13px; opacity: .7; }
.n-uni-facts dd { font-size: 16px; }
.n-uni-thumbs .ph { height: 88px; border-radius: 12px; }
.n-uni-more { min-height: 48px; padding-top: 12px; font-size: 16px; }
.n-unis-rest { gap: 16px; }
.n-unis-rest .n-uni-ph, .n-unis-rest .n-uni:nth-child(3n+2) .n-uni-ph { height: auto; aspect-ratio: 16 / 11; }
.n-unis-rest .n-uni-body { padding: 22px 22px 22px; }
.n-unis-rest h3 { margin: 8px 0 10px; font-size: 30px; line-height: 1.05; }
.n-unis-rest p { font-size: 17px; opacity: .85; }
.n-uni .mono { font-size: 13px; }
.c-note { font-size: 13px; opacity: .7; }
/* ---------- Life day to day ---------- */
.n-life-sec { padding: 0 0 64px; }
/* The three drawings, swiped; a tap plays a drawing (country-page-v2.js) */
.n-life-cards {
display: flex; gap: 12px; max-width: none; margin: 0 -20px; padding: 0 20px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
overscroll-behavior-x: contain; scrollbar-width: none;
}
.n-life-cards::-webkit-scrollbar { display: none; }
.n-lc { flex: 0 0 84%; padding: 30px 22px 22px; border-radius: 24px; scroll-snap-align: start; }
.n-lc h3 { font-size: 34px; }
.n-lc p { font-size: 17px; opacity: .85; }
.n-ui { padding-top: 22px; }
.n-life-say { padding: 56px 0; }
.n-life-say p { font-size: 27px; }
.n-life-cards + .n-life-cols { margin-top: 48px; }
.n-col, .n-col:first-child, .n-col:last-child { padding: 28px 0 30px; }
.n-col h3 { font-size: 36px; }
.n-col-meta { margin: 12px 0 18px; font-size: 13px; }
.n-col li { padding: 6px 0; opacity: .88; }
.n-col li:last-child { opacity: .62; }
/* ---------- Protection or a visa ---------- */
/* Too narrow for a label column beside two columns of text. Each topic becomes its own row:
the topic on top, the two answers side by side under it. The terracotta column of the
desktop turns into a key: a solid terracotta box heads the left column, and the answers
under it are tinted the same colour. */
.n-paths-sec { padding: 0 0 64px; }
.n-cmp::before { display: none; }
.n-cmp-row { grid-template-columns: 1fr 1fr; gap: 10px 8px; align-items: stretch; }
.n-cmp-row > :not(:first-child) { padding: 0; }
.n-cmp-head { height: auto; padding: 0; margin-bottom: 4px; }
.n-cmp-head > :first-child { display: none; }
.n-cmp-head .tp, .n-cmp-head .sp {
display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px;
align-self: stretch; padding: 14px 14px 16px; border-radius: 16px;
}
.n-cmp-head .tp { background: var(--terracotta); }
.n-cmp-head .sp { background: var(--cream-2); }
.n-cmp-head h3, .n-cmp-head .sp h3 { font-size: 23px; line-height: 1.05; }
.n-cmp-head .badge { padding: 3px 9px; font-size: 11px; }
.n-cmp-body { padding: 0; border-radius: 0; background: none; }
.n-cmp-body .n-cmp-row { min-height: 0; padding: 18px 0; font-size: 16px; line-height: 1.4; }
.n-cmp-body [role="rowheader"] { grid-column: 1 / -1; font-family: var(--font-head); font-size: 24px; line-height: 1.1; }
.n-cmp-body .tp, .n-cmp-body .sp { padding: 12px 13px 14px; border-radius: 14px; }
.n-cmp-body .tp { background: rgba(200, 82, 40, .13); color: var(--ink); }
.n-cmp-body .sp { background: var(--cream-2); opacity: 1; }
.n-cmp .price { font-size: 22px; line-height: 1.1; }
.n-paths-sec .c-note { margin-top: 18px; }
/* ---------- Advice on a photo ---------- */
.n-advice { padding: 16px 0 56px; }
.n-advice--photo .n-advice-card { padding: 76px 22px 60px; border-radius: 24px; }
.n-advice--photo .country-name { top: -16px; left: -6px; padding: 11px 20px; font-size: 17px; }
.n-advice--photo .n-quote-text, .n-advice--photo .n-life-say p { font-size: 28px; line-height: 1.15; }
.n-advice--photo .n-life-say { padding: 0; }
.n-sign { font-size: 26px; }
/* ---------- Other countries, swiped ---------- */
section:has(> .wrap > .c-others) { padding-top: 24px !important; } /* 110px inline for the desktop */
.c-others {
gap: 22px; margin: -14px -20px 0; padding: 36px 20px 20px; /* room above for the tilted labels */
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
overscroll-behavior-x: contain; scrollbar-width: none;
}
.c-others::-webkit-scrollbar { display: none; }
.c-others .country { flex: none; width: 66vw; height: calc(66vw * 4 / 3); scroll-snap-align: start; }
.c-others .country-name { padding: 11px 20px; font-size: 17px; }
.c-others .country-name.at-top-left { top: -14px; left: -8px; }
.c-others .country-name.at-bottom-right { bottom: -14px; right: -8px; }
}