/* Country pages (country-ireland.html, country-netherlands.html).
   The header, footer, section headings, country cards, university rows, FAQ rows and
   call to action come from site.css — the same ones the landing page uses. This file is
   only what a country page adds: its hero, the sections under it, and the smaller
   country cards at the foot of the page. */

/* ---------- Back to the landing page ---------- */
.crumb { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; opacity: .6; transition: opacity .2s, gap .2s; }
.crumb:hover { opacity: 1; gap: 12px; }

/* ---------- Hero ---------- */
/* Type on the left, cover photo on the right, so the country is named before it is shown. */
.c-hero { padding: 40px 0 90px; }
.c-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-top: 34px; }
.c-hero .mono { color: var(--terracotta); }
.c-hero h1 { font-size: 132px; line-height: .95; letter-spacing: -0.02em; margin: 14px 0 26px; }
.c-hero .lead { font-size: 21px; margin: 0 0 38px; max-width: 480px; opacity: .8; }
.c-hero-photo { position: relative; height: 560px; border-radius: 28px; overflow: hidden; }
.c-hero-photo::after { display: none; }

/* A line of three headline numbers under the lead — the first thing a parent looks for */
.c-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 28px; border-top: 1px solid rgba(42,29,20,.2); }
.c-glance div { min-width: 0; }
.c-glance b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 46px; line-height: 1; color: var(--terracotta); font-variant-numeric: lining-nums; }
.c-glance span { display: block; margin-top: 8px; font-size: 14px; opacity: .7; line-height: 1.35; }

/* ---------- Why this country ---------- */
/* Four numbered cards in a row. The panel used a 2×2 grid; a full page can lay them flat. */
.c-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; counter-reset: w; }
.c-why li { background: var(--cream-2); border-radius: 24px; padding: 30px 28px 34px; counter-increment: w; font-size: 17px; line-height: 1.45; }
.c-why li::before { content: '0' counter(w); display: block; font-family: var(--font-mono); font-size: 12px; color: var(--terracotta); margin-bottom: 44px; }

/* ---------- Key facts ---------- */
/* Two columns of the same label/answer rows the drawer uses, so the two read as one family. */
.c-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 70px; margin: 0; }
.c-facts > div { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(42,29,20,.15); }
.c-facts dt { font-family: var(--font-mono); font-size: 12px; opacity: .6; padding-top: 4px; }
.c-facts dd { margin: 0; font-size: 17px; }
.c-note { margin: 26px 0 0; opacity: .55; }

/* ---------- Universities: the middle of the page ---------- */
/* Cards, not the landing page's thin rows — this is what the visitor came for.
   Clicking one opens the same drawer as everywhere else (panels.js). */
.c-unis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.c-uni { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--cream-2); text-align: left; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.c-uni .ph { height: 230px; flex: none; }
.c-uni .ph::after { display: none; }
.c-uni-text { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.c-uni .mono { color: var(--terracotta); }
.c-uni h3 { font-size: 34px; margin: 10px 0 12px; }
.c-uni p { margin: 0 0 22px; font-size: 16px; opacity: .75; flex: 1; }
.c-uni-more { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; padding-top: 18px; border-top: 1px solid rgba(42,29,20,.15); }
.c-uni-more::after { content: '→'; font-family: var(--font-mono); color: var(--terracotta); transition: transform .25s; }
.anim .c-uni { transition: transform .25s, background .25s; }
.anim .c-uni:hover { transform: translateY(-4px); background: #E6DCC8; }
.anim .c-uni:hover .c-uni-more::after { transform: translateX(6px); }
.c-uni:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }

/* ---------- Life in the country ---------- */
/* Housing, money, getting around, work, community — a 3-column grid of short cards on
   an outlined ground, calmer than the solid cards above so the two sections don't fight. */
.c-life { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.c-life article { border-radius: 24px; padding: 30px 28px; box-shadow: inset 0 0 0 1.5px rgba(42,29,20,.16); }
.c-life h3 { font-size: 30px; margin: 0 0 10px; }
.c-life .mono { color: var(--terracotta); }
.c-life p { margin: 12px 0 0; font-size: 16px; opacity: .78; }

/* ---------- Advice from us ---------- */
/* A dark block: the founders' own voice, set apart from the facts around it. */
.c-advice { background: var(--dark); color: var(--cream); border-radius: 40px; margin: 0 24px; padding: 100px 0; transition: background .3s; }
.c-advice .sec-head h2 .br { color: var(--terracotta); }
.c-advice-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.c-advice-list article { display: flex; flex-direction: column; }
.c-advice-list p { font-family: var(--font-head); font-size: 27px; line-height: 1.25; margin: 0 0 26px; flex: 1; }
.c-advice-who { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid rgba(246,241,232,.22); }
.c-advice-who .ph { width: 48px; height: 48px; border-radius: 999px; flex: none; }
.c-advice-who .ph::after { display: none; }
.c-advice-who b { display: block; font-weight: 600; font-size: 16px; }
.c-advice-who span { display: block; font-family: var(--font-mono); font-size: 11px; opacity: .6; margin-top: 2px; }

/* ---------- Other countries ---------- */
/* Smaller cards, standing still: a way out of a dead end, not a second moving strip. */
.c-others { display: flex; gap: 28px; }
.c-others .country { width: 300px; height: 400px; }
.c-others .country-name { padding: 11px 21px; border-width: 2px; font-size: 17px; }
.c-others .country-name.at-top-left { top: -14px; left: -16px; }
.c-others .country-name.at-bottom-right { bottom: -14px; right: -16px; }