/* /english/ielts/: the IELTS guide and the hub of the IELTS tools. Built on
   /english/tools.css and /english/ielts/ielts.css. Hero: copy and the two
   entry buttons left, "IELTS at a glance" right. One solid colour per skill. */

.ig-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px!important;padding:6px 14px 6px 6px;border-radius:999px;background:var(--exam-bg);color:var(--exam-ink);font:600 14px/1.2 var(--font-body)}
.ig-kicker .tt-ico{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--exam-ink)}
.ig-kicker .tt-ico .tt-i{width:16px;height:16px}
.ig-actions{flex-wrap:wrap}
.ig-hero .tt-facts-row{margin-top:36px!important}
.ig-head{max-width:780px;margin-bottom:36px}

/* At a glance: the four skills as solid tiles, then the overall band sum */
.ig-glance{padding:clamp(20px,3vw,32px);border-radius:28px;background:var(--exam-bg)}
.ig-glance-title{margin-bottom:16px!important;font:700 20px/1.2 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.ig-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ig-skill{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico name" "ico time" "small small";gap:2px 14px;align-items:center;height:100%;padding:18px;border-radius:20px;background:var(--skill-bg);color:var(--skill-ink);text-decoration:none;transition:transform .16s var(--ease-out)}
.ig-skill .ig-skill-ico{grid-area:ico}
.ig-skill b{grid-area:name;font:700 19px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.ig-skill-time{grid-area:time;font-weight:600;font-size:14.5px}
.ig-skill small{grid-area:small;margin-top:10px;font-size:14px;color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){.ig-skill:hover{transform:translateY(-2px)}}
.ig-skill-ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:#fff;color:var(--skill-ink)}
.ig-skill-ico .tt-i{width:26px;height:26px}
.ig-formula{display:grid;gap:8px;margin-top:16px;padding:16px 18px;border-radius:18px;background:#fff}
.ig-formula>span:first-child{font:600 13px/1.2 var(--font-body);color:var(--exam-ink)}
.ig-formula-eq{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ig-formula-eq b{padding:6px 10px;border-radius:10px;background:var(--skill-bg);color:var(--skill-ink);font:700 16px/1 var(--font-display);font-variant-numeric:tabular-nums}
.ig-formula-eq i{font-style:normal;color:var(--muted);font-weight:600}
.ig-formula-eq strong{padding:6px 12px;border-radius:10px;background:var(--exam-ink);color:#fff;font:700 18px/1 var(--font-display)}
.ig-formula small{font-size:13.5px;color:var(--muted)}
@media (max-width:479px){.ig-skills{gap:10px}.ig-skill{grid-template-columns:1fr;grid-template-areas:"ico" "name" "time" "small";padding:16px}.ig-skill-ico{width:40px;height:40px;margin-bottom:8px}}

/* Two ways in: test yourself, practise every day */
.ig-ways{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media (max-width:899px){.ig-ways{grid-template-columns:1fr}}
.ig-way{display:flex;flex-direction:column;gap:20px;padding:clamp(20px,3vw,32px);border-radius:var(--r-panel);background:#fff}
.ig-way-head{display:flex;gap:16px;align-items:flex-start}
.ig-way-n{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--exam-ink);color:#fff;font:700 18px/1 var(--font-display)}
.ig-way-head h3{font:700 22px/1.2 var(--font-display);letter-spacing:-.03em}
.ig-way-head p{margin-top:4px!important;color:var(--ink-soft)}
.ig-way-list{display:grid;gap:10px}
.ig-way-sub{margin-top:8px;padding-top:24px;border-top:1px solid var(--line)}
.ig-tool{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none;transition:border-color .2s}
.ig-tool b{display:block;font:700 16px/1.3 var(--font-display);letter-spacing:-.01em}
.ig-tool small{display:block;margin-top:2px;font-size:14px;color:var(--ink-soft)}
.ig-tool-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--skill-bg);color:var(--skill-ink)}
.ig-tool-ico .tt-i{width:24px;height:24px}
.ig-go{color:var(--purple)}
@media (hover:hover) and (pointer:fine){.ig-tool:hover{border-color:var(--line-strong)}}
.ig-way-practise{background:var(--purple);color:#fff}
.ig-way-practise .ig-way-n{background:#fff;color:var(--purple)}
.ig-way-practise .ig-way-head p,.ig-way-practise p{color:rgba(255,255,255,.9)}
.ig-practise{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start}
.ig-practise img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border:4px solid #fff;border-radius:20px;rotate:-3deg}
.ig-checks{display:grid;gap:8px;margin:16px 0 22px!important}
.ig-checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.ig-checks .tt-i{flex:none;width:20px;height:20px;margin-top:1px;padding:3px;border-radius:50%;background:#fff;color:var(--purple)}
.ig-way-practise .tt-pill{background:#fff;color:var(--purple)!important}
.ig-way-practise :focus-visible{outline-color:#fff}
@media (max-width:479px){.ig-practise{grid-template-columns:96px minmax(0,1fr);gap:16px}}

/* The four skills, one solid colour each */
.ig-skill-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:767px){.ig-skill-cards{grid-template-columns:1fr}}
.ig-card{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,3vw,28px);border-radius:var(--r-panel);background:var(--skill-bg);color:var(--ink);scroll-margin-top:96px}
.ig-card header{display:flex;gap:14px;align-items:center}
.ig-card h3{font:700 22px/1.2 var(--font-display);letter-spacing:-.03em}
.ig-card header p{margin-top:2px!important;font-weight:600;font-size:14.5px;color:var(--skill-ink)}
.ig-card>p{color:var(--ink-soft)}
.ig-card-go{display:grid;gap:8px;margin-top:auto;padding:16px 18px;border-radius:16px;background:#fff}
.ig-card-k{font:600 13px/1.2 var(--font-body);color:var(--skill-ink)}
.ig-card-go .ie-out{justify-content:space-between;color:var(--ink);text-decoration:none;font-size:15px}
.ig-card-go .ie-out .tt-i{flex:none;color:var(--skill-ink)}
.ig-card-go .ig-own{color:var(--skill-ink)}
@media (hover:hover) and (pointer:fine){.ig-card-go .ie-out:hover{text-decoration:underline}}

/* Academic or General Training */
.ig-version{padding:clamp(20px,3vw,28px);border:1px solid var(--line);border-radius:var(--r-panel);background:#fff}
.ig-version-k{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--exam-bg);color:var(--exam-ink);font:600 14px/1.2 var(--font-body)}
.ig-version h3{margin-top:14px;font:700 20px/1.25 var(--font-display);letter-spacing:-.02em}
.ig-version ul{display:grid;gap:8px;margin-top:14px!important}
.ig-version li{position:relative;padding-left:20px;color:var(--ink-soft)}
.ig-version li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--exam-ink)}

/* Format table */
.ig-total th,.ig-total td{background:var(--exam-bg);color:var(--ink);font-weight:600}

/* Scoring */
.ig-label{margin-bottom:12px!important;font-weight:600;color:var(--ink)}
.ig-rounding{display:grid;gap:12px}
.ig-rounding li{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;font-variant-numeric:tabular-nums}
.ig-bands{display:flex;flex-wrap:wrap;gap:6px}
.ig-bands span{padding:6px 10px;border-radius:10px;background:var(--skill-bg);color:var(--skill-ink);font-weight:700}
.ig-avg{font-size:14px;color:var(--muted)}
.ig-rounding strong{justify-self:end;display:grid;place-items:center;width:64px;height:48px;border-radius:14px;background:var(--exam-ink);color:#fff;font:700 22px/1 var(--font-display)}
@media (max-width:520px){.ig-rounding li{grid-template-columns:1fr auto}.ig-avg{grid-column:1;grid-row:2}.ig-rounding strong{grid-row:1/3;grid-column:2}}
.ig-source{margin-top:14px!important;font-size:14.5px;color:var(--muted)}

/* CEFR */
.ig-cefr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:760px){.ig-cefr{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ig-cefr li{display:grid;gap:4px;padding:22px 20px;border-radius:20px;background:var(--exam-bg)}
.ig-cefr li:nth-child(1){background:var(--exam-ink)}
.ig-cefr li:nth-child(1) strong,.ig-cefr li:nth-child(1) span,.ig-cefr li:nth-child(1) em{color:#fff}
.ig-cefr strong{font:700 32px/1 var(--font-display);letter-spacing:-.03em;color:var(--exam-ink)}
.ig-cefr span{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ig-cefr em{font-style:normal;font-size:13.5px;color:var(--ink-soft)}
.ig-cefr-note{margin-top:24px!important;color:var(--ink)}
.ig-cefr-note a{color:var(--exam-ink);font-weight:600}

/* Compare */
.ig-compare thead th{color:var(--ink);font-size:15px}
.ig-compare tbody th{width:120px}
.ig-compare-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
@media (max-width:767px){.ig-compare-links{grid-template-columns:1fr}}

/* How to prepare */
.ig-plan{display:grid;gap:14px}
.ig-plan li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;padding:clamp(18px,2.6vw,24px);border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.ig-plan-n{align-self:start;justify-self:start;padding:8px 12px;border-radius:12px;background:var(--speaking-bg);color:var(--speaking-ink);font:700 15px/1 var(--font-display)}
.ig-plan h3{font:700 18px/1.25 var(--font-display);letter-spacing:-.02em}
.ig-plan p{margin-top:6px!important;color:var(--ink-soft)}
.ig-plan a{color:var(--purple);font-weight:600}
@media (max-width:479px){.ig-plan li{grid-template-columns:1fr;gap:10px}}

.ig-faq{margin-top:0}
.ig-faq-reads{margin-top:24px}

/* Hero: the heading across the page, IELTS at a glance under it in one row */
.ig-hero-grid{grid-template-columns:1fr;gap:40px}
.ig-hero .tt-title{max-width:none}
.ig-hero .tt-hero2-copy .tt-lede{max-width:72ch}
.ig-hero .tt-hero2-copy .tt-facts-row{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.ig-hero .ig-actions .tt-pill{flex:0 0 auto}
.ig-skills{grid-template-columns:repeat(4,minmax(0,1fr))}
.ig-glance{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (max-width:1023px){.ig-skills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.ig-hero .tt-hero2-copy .tt-facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}.ig-hero-grid{gap:28px}}
@media (max-width:639px){
  .ig-practise{grid-template-columns:88px minmax(0,1fr)}
  .ig-practise>div{display:contents}
  .ig-practise>div>p{grid-column:2;grid-row:1}
  .ig-checks,.ig-practise .tt-pill{grid-column:1/-1}
  .ig-practise .tt-pill{white-space:normal;width:100%}
}
@media (max-width:639px){.ig-total{background:var(--exam-bg)!important;border-color:transparent!important}.ig-total th,.ig-total td{background:none}}