/* =====================================================================
   country.css — dynamic Study-in-<Country> page (country.php)
   Reuses tokens.css + components.css (header, footer, buttons, .licence,
   .sgrid/.scard, .tgrid/.tcard, .faq, .sec__head). Hero, facts, layout,
   universities and the lead form live here.
   ===================================================================== */
.c-section { padding-block: clamp(40px, 6vw, 80px); }
.c-section--tint { background: var(--bg-2); }

/* ---------- HERO ---------- */
.c-hero { position: relative; color: #fff; overflow: clip; isolation: isolate;
  background: linear-gradient(120deg, #0f1733, #1a2350 55%, #243069); }
.c-hero__img { position: absolute; inset: 0; z-index: -2; object-fit: cover; width: 100%; height: 100%; opacity: .32; }
.c-hero__veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,23,51,.55), rgba(15,23,51,.82)), radial-gradient(700px 360px at 85% 0%, rgba(91,91,245,.5), transparent 60%); }
.c-hero__in { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding-block: clamp(40px, 6vw, 76px); }
.c-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #cfd6ff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 7px 14px; border-radius: var(--r-pill); }
.c-hero__flag { width: 30px; height: 22px; border-radius: 5px; overflow: hidden; display: inline-grid; place-items: center; font-size: 1.2rem; }
.c-hero h1 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); line-height: 1.05; letter-spacing: -.03em; margin: 16px 0 0; }
.c-hero h1 .grad { background: linear-gradient(110deg, #8fa2ff, #FBBC24); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-hero__sub { color: #c4cbe6; font-size: clamp(1rem, .95rem + .4vw, 1.18rem); margin-top: 16px; max-width: 560px; line-height: 1.6; }
.c-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.c-hero .btn--glass { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.28); }
.c-hero .btn--glass:hover { background: rgba(255,255,255,.2); }
.c-hero__stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; }
.c-hero__stat strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #fff; letter-spacing: -.02em; }
.c-hero__stat span { font-size: var(--t-xs); color: #aab2d8; }

/* lead form (also reused in sidebar) */
.leadcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 22px; color: var(--ink-2); }
.c-hero .leadcard { box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
.leadcard__h { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.2rem; letter-spacing: -.01em; }
.leadcard__p { font-size: var(--t-sm); color: var(--ink-3); margin-top: 4px; }
.leadform { display: grid; gap: 10px; margin-top: 16px; }
.leadform input, .leadform select { width: 100%; font-family: inherit; font-size: .95rem; font-weight: 500; color: var(--ink);
  background: var(--surface-2); border: 1.5px solid var(--line-2); border-radius: 12px; padding: .72rem .85rem; transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.leadform select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237b84a5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.leadform input:focus, .leadform select:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: var(--ring); }
.leadform__consent { display: flex; align-items: flex-start; gap: 9px; font-size: .78rem; color: var(--ink-3); line-height: 1.45; cursor: pointer; }
.leadform__consent input { width: 17px; height: 17px; flex: none; margin-top: 1px; accent-color: var(--primary); }
.leadform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.leadform__btn { margin-top: 4px; }
.leadform__msg { font-size: var(--t-sm); font-weight: 600; padding: 10px 12px; border-radius: 12px; display: none; }
.leadform__msg.ok { display: block; background: var(--safe-tint); color: var(--safe-700); border: 1px solid #bdeede; }
.leadform__msg.err { display: block; background: var(--warn-tint); color: var(--warn); border: 1px solid #f3c7c4; }
.leadcard__trust { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--t-xs); color: var(--ink-3); }
.leadcard__trust .star { color: #E68A17; }

/* ---------- QUICK FACTS ---------- */
.c-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -42px; position: relative; z-index: 5; }
.c-fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-md); }
.c-fact__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); margin-bottom: 12px; }
.c-fact__ic svg { width: 21px; height: 21px; }
.c-fact b { display: block; font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.15rem; letter-spacing: -.01em; }
.c-fact span { font-size: var(--t-xs); color: var(--ink-3); }

/* ---------- MAIN LAYOUT (article + sticky sidebar) ---------- */
.c-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 50px); align-items: start; }
.c-aside { position: sticky; top: 84px; display: grid; gap: 16px; }
.c-aside__mini { background: var(--ink); color: #cdd3ea; border-radius: var(--r-lg); padding: 18px; }
.c-aside__mini b { color: #fff; font-family: var(--font-display); }
.c-aside__mini .wa { margin-top: 12px; }

/* why cards */
.c-why { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: var(--s-6); }
.c-why__item { display: flex; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow-xs); }
.c-why__ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--safe-tint); color: var(--safe); }
.c-why__ic svg { width: 21px; height: 21px; }
.c-why__item h4 { font-size: 1rem; color: var(--ink); }
.c-why__item p { font-size: var(--t-sm); color: var(--ink-2); margin-top: 4px; line-height: 1.5; }

/* universities */
.c-unis { display: grid; gap: 12px; margin-top: var(--s-6); }
.c-uni { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-xs); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2); }
.c-uni:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.c-uni__logo { width: 48px; height: 48px; flex: none; border-radius: 12px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); padding: 4px; }
.c-uni__mono { width: 48px; height: 48px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.c-uni__meta { min-width: 0; flex: 1; }
.c-uni__meta b { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
.c-uni__meta span { font-size: var(--t-xs); color: var(--ink-3); }
.c-uni__n { font-weight: 700; font-size: .8rem; color: var(--primary); background: var(--primary-tint); padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.c-uni__rating { color: #E68A17; font-weight: 700; font-size: .82rem; white-space: nowrap; }

/* admin guide prose */
.c-prose { margin-top: var(--s-6); color: var(--ink-2); font-size: 1rem; line-height: 1.7; max-width: 72ch; }
.c-prose h2 { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem); color: var(--ink); margin: 1.6em 0 .5em; }
.c-prose h3 { font-size: 1.2rem; color: var(--ink); margin: 1.3em 0 .4em; }
.c-prose h4 { font-size: 1.05rem; color: var(--ink); margin: 1.1em 0 .3em; }
.c-prose p { margin: .7em 0; }
.c-prose ul, .c-prose ol { margin: .7em 0; padding-left: 1.3em; }
.c-prose li { margin: .35em 0; }
.c-prose a { color: var(--primary); font-weight: 600; }
.c-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0; }
.c-prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: var(--t-sm); display: block; overflow-x: auto; }
.c-prose th, .c-prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.c-prose th { background: var(--surface-2); font-weight: 700; color: var(--ink); }
.c-prose__fade { position: relative; max-height: 760px; overflow: hidden; }
.c-prose__fade::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.c-prose__more { display: inline-flex; margin-top: 16px; }
.c-prose__fade.open { max-height: none; }
.c-prose__fade.open::after { display: none; }

@media (max-width: 980px) {
  .c-hero__in { grid-template-columns: 1fr; }
  /* minmax(0,1fr) — NOT plain 1fr — so a wide child can't blow the column past the viewport */
  .c-main { grid-template-columns: minmax(0, 1fr); }
  .c-aside { position: static; }
  .c-facts { grid-template-columns: 1fr 1fr; margin-top: var(--s-6); }
  /* let flex children shrink + wrap long words/links so nothing overflows on mobile */
  .c-why__item > * { min-width: 0; }
  .c-content, .c-prose, .c-why__item p, .c-why__item h4 { overflow-wrap: break-word; word-break: break-word; }
}
@media (max-width: 560px) {
  .c-why { grid-template-columns: 1fr; }
  .c-facts { grid-template-columns: 1fr 1fr; }
  .c-hero__stats { gap: 10px 18px; }
}

/* ---------- FAQ (premium, self-contained — country page does not load home.css) ---------- */
.c-faq { max-width: 880px; margin: var(--s-6) auto 0; display: grid; gap: 14px; }
.c-faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-2), box-shadow var(--dur-2); overflow: hidden; }
.c-faq__item[open] { border-color: var(--primary); box-shadow: var(--shadow-md); }
.c-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.c-faq__item summary::-webkit-details-marker { display: none; }
.c-faq__q { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--primary-tint); color: var(--primary); font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  transition: background var(--dur-2), color var(--dur-2); }
.c-faq__item[open] .c-faq__q { background: var(--primary); color: #fff; }
.c-faq__qt { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.06rem; line-height: 1.35; }
.c-faq__plus { width: 24px; height: 24px; flex: none; position: relative; transition: transform var(--dur-2) var(--ease); }
.c-faq__plus::before, .c-faq__plus::after { content: ""; position: absolute; background: var(--ink-4); border-radius: 2px; transition: background var(--dur-2); }
.c-faq__plus::before { left: 50%; top: 4px; width: 2px; height: 16px; transform: translateX(-50%); }
.c-faq__plus::after { top: 50%; left: 4px; height: 2px; width: 16px; transform: translateY(-50%); }
.c-faq__item[open] .c-faq__plus { transform: rotate(135deg); }
.c-faq__item[open] .c-faq__plus::before, .c-faq__item[open] .c-faq__plus::after { background: var(--primary); }
.c-faq__a { padding: 0 22px 20px 68px; color: var(--ink-2); font-size: .97rem; line-height: 1.7; }
.c-faq__cta { max-width: 880px; margin: 22px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 16px 22px; }
.c-faq__cta span { font-weight: 600; color: var(--ink-2); }
@media (max-width: 560px) { .c-faq__a { padding-left: 22px; } .c-faq__item summary { padding: 16px 16px; } }