/* =====================================================================
IWASC Green — theme stylesheet.
Converted from reference/prototype/css/global.css.
The colours, fonts and spacing are NOT in this file. They live in
public/cache/theme.css, which the CMS generates from the theme tokens,
so changing a colour in the admin needs no change here.
Classes keep the iw- prefix from the prototype so the markup matches.
The homepage section styles (slider, cards, stats and so on) are kept
ready for Phase 3, when those become widgets.
===================================================================== */
/* The space inside a card, between its edge and its words.
Here and not among the theme tokens because it is not a thing to set: it
is what makes a card a card, and the one number that plain text sharing a
row with a card has to match so their buttons stop on the same line.
Written once, read in both places. */
:root{--iw-card-pad:22px}
/* Skip link: the first thing a keyboard reaches on every page. */
.iw-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--iw-green);color:#fff;padding:12px 20px;border-radius:0 0 8px 0}
.iw-skip:focus{left:0}
/* The page body, between the menu and the footer. */
.iw-main{padding:22px 0 30px}
.iw-page-title{font-size:30px;color:var(--iw-green-d);margin-bottom:14px}
.iw-main--sidebar .iw-wrap{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:860px){.iw-main--sidebar .iw-wrap{grid-template-columns:minmax(0,1fr)}}
/* =========================================================
IWASC Homepage — global.css
Prefix: iw- (avoids clashes with CMS styles)
Sections are marked "WIDGET:" to match CMS boxes
========================================================= */
/* ---------- 2. Base ---------- */
:where(.iw) *,:where(.iw) *::before,:where(.iw) *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.iw{margin:0;font-family:var(--iw-body);font-size:15px;line-height:1.55;color:var(--iw-ink);background:#FAFAF6;-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(.iw) img{max-width:100%;display:block}
:where(.iw) a{color:inherit;text-decoration:none}
:where(.iw) button{font:inherit;cursor:pointer}
:where(.iw) :is(h1,h2,h3,h4){font-family:var(--iw-head);margin:0;line-height:1.2;font-weight:700}
:where(.iw) ul{list-style:none;margin:0;padding:0}
:where(.iw) :focus-visible{outline:3px solid var(--iw-gold);outline-offset:2px}
.iw-wrap{max-width:var(--iw-wrap);margin:0 auto;padding:0 20px}
.iw-sec{margin-top:var(--iw-gap)}
.iw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.iw-ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.iw-ic.f{fill:currentColor;stroke:none}
/* buttons */
.iw-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--iw-head);font-weight:600;font-size:14px;border-radius:999px;padding:9px 20px;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s}
.iw-btn .iw-ic{font-size:17px;transition:transform .2s}
.iw-btn:hover .iw-ic{transform:translateX(3px)}
.iw-btn-gold{background:var(--iw-gold-l);color:var(--iw-green-d)}
.iw-btn-gold:hover{background:var(--iw-gold)}
.iw-btn-line{border-color:var(--iw-green);color:var(--iw-green)}
.iw-btn-line:hover{background:var(--iw-green);color:#fff}
.iw-btn-ghost{border-color:var(--iw-gold);color:var(--iw-gold-l)}
.iw-btn-ghost:hover{background:var(--iw-gold);color:var(--iw-green-d)}
/* card base */
.iw-card{background:#fff;border:1px solid var(--iw-line);border-radius:var(--iw-r);box-shadow:var(--iw-shadow)}
.iw-head-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.iw-head-row h2{font-size:21px;color:var(--iw-green-d)}
.iw-viewall{display:inline-flex;align-items:center;gap:6px;font-family:var(--iw-head);font-weight:600;font-size:14px;color:var(--iw-green)}
.iw-viewall:hover{color:var(--iw-olive)}
/* ---------- 3. WIDGET: Header brand row ---------- */
.iw-hdr{background:#fff}
.iw-hdr .iw-wrap{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px}
.iw-brand{display:flex;align-items:center;gap:14px;flex:none}
.iw-brand img{height:68px;width:auto}
.iw-brand-t b{display:block;font-family:var(--iw-head);font-weight:800;font-size:21px;line-height:1.08;color:var(--iw-green-d);text-transform:uppercase;letter-spacing:.2px}
.iw-brand-t b span{font-weight:600;font-size:.8em}
.iw-brand-t small{display:block;font-size:12px;color:var(--iw-muted);margin-top:4px}
.iw-years{display:flex;align-items:center;gap:8px;padding:0 18px;border-left:1px solid var(--iw-line);border-right:1px solid var(--iw-line);flex:0 1 auto;min-width:0}
.iw-years b{font-family:var(--iw-head);font-size:52px;font-weight:800;line-height:1;color:var(--iw-green);position:relative}
.iw-years b::before{content:"";position:absolute;inset:-4px -8px;border:3px solid var(--iw-gold);border-radius:50%;border-right-color:transparent;transform:rotate(-30deg)}
.iw-years span{font-family:var(--iw-head);font-weight:600;font-size:14px;line-height:1.15;color:var(--iw-green-d)}
.iw-acc{display:flex;flex:0 0 auto;justify-content:flex-end;gap:4px}
.iw-acc li{display:flex;flex-direction:column;align-items:center;text-align:center;width:78px;font-size:10.5px;line-height:1.2;color:var(--iw-muted);padding:0 4px;border-right:1px solid var(--iw-line)}
.iw-acc li:last-child{border-right:0}
.iw-seal{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin-bottom:5px;font-family:var(--iw-head);font-weight:800;font-size:11px;color:#fff;background:var(--iw-green)}
.iw-seal img{width:100%;height:100%;object-fit:contain}
.iw-seal.s2{background:#C88A12}.iw-seal.s3{background:#C8102E}.iw-seal.s4{background:var(--iw-green-m)}.iw-seal.s5{background:#3B6FA8}
.iw-connect{flex:none;text-align:left}
.iw-connect p{margin:0 0 8px;font-size:13px;color:var(--iw-ink)}
.iw-soc{display:flex;gap:6px;align-items:center}
.iw-soc a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;transition:transform .2s}
.iw-soc a:hover{transform:translateY(-2px)}
.iw-soc .fb{background:#1877F2}.iw-soc .x{background:#111}.iw-soc .ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}.iw-soc .yt{background:#FF0000}.iw-soc .li{background:#0A66C2}
.iw-search-btn{width:30px;height:30px;border-radius:50%;border:0;background:var(--iw-green-l);color:var(--iw-green);display:grid;place-items:center;font-size:15px}
.iw-burger{display:none;width:44px;height:44px;border:0;border-radius:10px;background:var(--iw-green);color:#fff;place-items:center;font-size:22px;margin-left:auto}
.iw-search{display:none;background:var(--iw-green-l);padding:10px 0}
.iw-search.open{display:block}
.iw-search form{display:flex;gap:8px}
.iw-search input{flex:1;border:1px solid var(--iw-line);border-radius:999px;padding:10px 18px;font:inherit}
/* ---------- 4. WIDGET: Menu bar ---------- */
.iw-nav{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,var(--iw-green) 0%,var(--iw-green-d) 100%);box-shadow:0 4px 14px rgba(6,42,22,.2)}
/* The menu asks for the room its own items need (flex-basis auto, not 0), so
that when a college has more of them than will fit, the phone button drops
to a second line instead of hanging off the side of the screen. */
.iw-nav .iw-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:50px}
/* Only the open drawer has a way out of it. Hidden by default, or the
closed drawer -- which is nothing but a strip of no height -- leaves its
cross floating over the page with nothing to close. */
.iw-nav-close{display:none}
.iw-menu{display:flex;align-items:center;flex:1 1 auto;gap:2px}
.iw-menu>li{position:relative}
.iw-menu>li>a{display:flex;align-items:center;gap:5px;color:#fff;font-family:var(--iw-head);font-weight:500;font-size:13.5px;padding:8px 11px;border-radius:8px;white-space:nowrap;transition:background .2s}
.iw-menu>li>a .iw-ic{font-size:13px;opacity:.85}
.iw-menu>li>a:hover,.iw-menu>li:focus-within>a{background:rgba(255,255,255,.1)}
.iw-menu>li.active>a{background:var(--iw-green-m);border:1px solid var(--iw-gold);padding:7px 16px}
.iw-menu>li.active>a .iw-ic{font-size:17px}
.iw-sub{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border-radius:0 0 12px 12px;padding:8px;box-shadow:0 18px 40px rgba(6,42,22,.18);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:70;border-top:3px solid var(--iw-gold)}
.iw-menu>li:hover>.iw-sub,.iw-menu>li:focus-within>.iw-sub{opacity:1;visibility:visible;transform:none}
.iw-sub a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--iw-ink)}
.iw-sub a:hover{background:var(--iw-green-l);color:var(--iw-green)}
.iw-menu>li:nth-last-child(-n+2) .iw-sub{left:auto;right:0}
.iw-contact{flex:none;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--iw-gold);color:var(--iw-gold-l);border-radius:999px;padding:7px 18px;font-family:var(--iw-head);font-weight:600;font-size:14px;transition:.2s}
.iw-contact:hover{background:var(--iw-gold);color:var(--iw-green-d)}
/* ---------- 5. Row: Hero (slider + news + quick cards) ---------- */
/* How many things share the row decides the columns, so the client can put
one, two or three in it and the page stays right either way. One on its
own fills the width; three take the proportions of the approved design.
A browser without :has() gets the single column, which stacks and reads
perfectly well. */
.iw-hero{display:grid;gap:var(--iw-gap);grid-template-columns:minmax(0,1fr)}
.iw-hero:has(>:nth-child(2)){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.iw-hero:has(>:nth-child(3)){grid-template-columns:minmax(0,2.25fr) minmax(0,1fr) minmax(0,.72fr)}
/* Each section in a row is wrapped by the widget engine, so the wrapper is
the grid item and the widget inside it has to be told to fill it. Without
this the columns come out at three different heights. Every row that puts
its sections side by side needs it, not only the top one. */
.iw-hero>*,.iw-logos-row>*,.iw-about-row>*,.iw-bottom-row>*{min-width:0}
.iw-hero>*>*,.iw-logos-row>*>*,.iw-about-row>*>*,.iw-bottom-row>*>*{height:100%}
/* ...and nothing stretched to that height may also carry the margin that
separates stacked sections. .iw-sec is a gap above and it is for the
section above; side by side there is no section above, the grid's own gap
does that job, and height:100% plus a top margin is a box hanging its own
gap below the row it was told to fit.
This is why Management's Read more ended up outside its column once it
was sent to the floor of it. */
.iw-hero>*>.iw-sec,.iw-logos-row>*>.iw-sec,
.iw-about-row>*>.iw-sec,.iw-bottom-row>*>.iw-sec{margin-top:0;margin-bottom:0}
/* A section that is stretched has to use the height it was given. A feature
card does: it is a flex column with margin-top:auto on its button, so
Read more sits on the floor of the card however short the words above it
are. Rich text did not, so beside a card the same button stopped wherever
the text happened to end -- two Read more buttons on one row at two
different heights, which is what the owner saw on the home page under
About the college and Management.
Only in the rows that stretch. Rich text on an ordinary page is a block
of words with a link after it, and a link pinned to the bottom of the
page is not what anybody meant. */
.iw-hero .iw-rt,.iw-logos-row .iw-rt,.iw-about-row .iw-rt,.iw-bottom-row .iw-rt{
display:flex;flex-direction:column}
.iw-hero .iw-rt>.iw-btn,.iw-logos-row .iw-rt>.iw-btn,
.iw-about-row .iw-rt>.iw-btn,.iw-bottom-row .iw-rt>.iw-btn{
margin-top:auto;align-self:flex-start}
/* And it stops where a card's button stops. Plain text has no inside, so
left alone its button sits flat on the bottom edge of the column while
the card beside it holds its own a card's padding higher -- the two
buttons a finger's width apart, which is worse to look at than the
honest mess it replaced. One token, used by both, so they cannot drift.
A rich text card has that padding already and is left alone. */
.iw-hero .iw-rt:not(.iw-rt--card)>.iw-btn,.iw-logos-row .iw-rt:not(.iw-rt--card)>.iw-btn,
.iw-about-row .iw-rt:not(.iw-rt--card)>.iw-btn,.iw-bottom-row .iw-rt:not(.iw-rt--card)>.iw-btn{
margin-bottom:var(--iw-card-pad)}
/* Sharing the row, the slider is a panel rather than a band, so it takes the
shape the design gives it instead of the wide one it uses alone. */
.iw-hero:has(>:nth-child(2)) .iw-slider{aspect-ratio:7/5}
/* WIDGET: Slider */
/* The band the slider occupies is a design decision, not something the
first photograph decides. Letting a picture set it meant the page
changed shape when slides were reordered, and a portrait photograph
made a strange band - neither of which anybody uploading a picture
should have to think about.
So the shape is fixed here, per screen size, and every picture is made
to cover it. A small picture is enlarged and goes soft rather than
leaving a gap; the admin says so when one is chosen. */
.iw-slider{position:relative;border-radius:var(--iw-r);overflow:hidden;background:var(--iw-green-dd);color:#fff;width:100%;aspect-ratio:12/5;min-height:260px}
.iw-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.iw-slide.on{opacity:1;visibility:visible}
/* Between a phone and a desktop, a shape between the two. */
@media (min-width:601px) and (max-width:1023px){.iw-slider{aspect-ratio:16/9}}
/* cover fills the band whatever the picture is, and centre is where a
photograph's subject nearly always sits. */
.iw-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.06);transition:transform 7s linear}
.iw-slide.on>img{transform:scale(1)}
.iw-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,42,22,.85) 0%,rgba(6,42,22,.55) 45%,rgba(6,42,22,.05) 80%)}
.iw-cap{position:absolute;left:52px;right:40%;bottom:46px;z-index:2}
.iw-cap>*{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.iw-slide.on .iw-cap>*{opacity:1;transform:none}
.iw-slide.on .iw-cap>*:nth-child(2){transition-delay:.1s}.iw-slide.on .iw-cap>*:nth-child(3){transition-delay:.2s}.iw-slide.on .iw-cap>*:nth-child(4){transition-delay:.3s}
.iw-tag{display:block;font-family:var(--iw-head);font-weight:600;font-size:11.5px;letter-spacing:.5px;color:var(--iw-gold);text-transform:uppercase;margin-bottom:8px}
.iw-cap h1,.iw-cap h2{font-size:clamp(26px,2.8vw,40px);font-weight:700;line-height:1.1;color:#fff}
.iw-cap p{margin:10px 0 16px;font-size:15.5px;color:#E5EEE4;max-width:380px}
.iw-sl-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:var(--iw-green-d);display:grid;place-items:center;font-size:16px;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:.2s}
.iw-sl-arrow:hover{background:var(--iw-gold)}
.iw-sl-prev{left:12px}.iw-sl-next{right:12px}
.iw-dots{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:flex;justify-content:center;gap:8px}
.iw-dots button{width:11px;height:11px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.7);transition:.2s}
.iw-dots button.on{background:var(--iw-gold);width:11px}
/* WIDGET: News & Events */
.iw-news{padding:14px 16px}
.iw-news li+li{border-top:1px solid var(--iw-line)}
.iw-news li a{display:grid;grid-template-columns:44px 1fr 14px;gap:12px;align-items:center;padding:8px 2px}
.iw-date{background:var(--iw-green);color:#fff;border-radius:8px;text-align:center;padding:4px 5px;line-height:1.1}
.iw-date small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.iw-date b{display:block;font-family:var(--iw-head);font-size:19px}
.iw-news h3{font-size:13.5px;font-weight:600;color:var(--iw-ink);margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.iw-news p{margin:0;font-size:12px;color:var(--iw-muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.iw-news li a .iw-ic{color:var(--iw-muted);font-size:14px;transition:transform .2s}
.iw-news li a:hover h3{color:var(--iw-green)}
.iw-news li a:hover .iw-ic{transform:translateX(3px);color:var(--iw-green)}
/* WIDGET: Quick cards */
.iw-qcards{display:grid;grid-template-rows:repeat(3,1fr);gap:var(--iw-gap)}
.iw-qc{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--iw-r);transition:transform .2s,box-shadow .2s}
.iw-qc:hover{transform:translateY(-2px);box-shadow:var(--iw-shadow)}
.iw-qc .iw-qi{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-size:24px;flex:none}
.iw-qc b{display:block;font-family:var(--iw-head);font-size:14.5px;font-weight:600}
.iw-qc small{display:inline-flex;align-items:center;gap:4px;font-size:12.5px}
.iw-qc.dark{background:linear-gradient(135deg,var(--iw-green),var(--iw-green-d));color:#fff}
.iw-qc.dark .iw-qi{background:rgba(255,255,255,.15);color:var(--iw-gold-l)}
.iw-qc.cream{background:var(--iw-cream);color:var(--iw-green-d)}
.iw-qc.cream .iw-qi{background:var(--iw-olive);color:#fff}
.iw-qc.mint{background:var(--iw-green-l);color:var(--iw-green-d)}
.iw-qc.mint .iw-qi{background:var(--iw-green-m);color:#fff}
/* ---------- 6. Row: Logo carousels ---------- */
/* A row holds what is published in it, which is not always what the design
drew. An empty column is a hole in the page, so the columns follow the
children rather than a fixed count. */
.iw-logos-row{display:grid;gap:var(--iw-gap);grid-template-columns:minmax(0,1fr)}
.iw-logos-row:has(>:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
.iw-logos-row:has(>:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
.iw-lc{padding:12px 14px}
.iw-lc h2{font-size:16px;color:var(--iw-green-d);margin-bottom:8px}
.iw-lc-body{display:flex;align-items:center;gap:8px}
.iw-lc-arrow{width:28px;height:28px;flex:none;border-radius:6px;border:1px solid var(--iw-line);background:#fff;color:var(--iw-ink);display:grid;place-items:center;font-size:14px}
.iw-lc-arrow:hover{background:var(--iw-green);color:#fff;border-color:var(--iw-green)}
.iw-lc-track{flex:1;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.iw-lc-track::-webkit-scrollbar{display:none}
.iw-lc-track>*{flex:0 0 calc(25% - 8px);height:52px;display:grid;place-items:center;scroll-snap-align:start}
.iw-lc-track img{max-height:44px;width:auto;object-fit:contain}
.iw-lc-track .iw-seal{width:44px;height:44px;margin:0}
/* ---------- 7. WIDGET: Stats band ---------- */
.iw-stats{background:linear-gradient(90deg,var(--iw-green-d),var(--iw-green));border-radius:var(--iw-r);color:#fff;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:14px 6px}
.iw-stats li{display:flex;align-items:center;gap:10px;padding:2px 14px;border-left:1px solid rgba(255,255,255,.2)}
.iw-stats li:first-child{border-left:0}
.iw-stats .iw-ic{font-size:32px;color:var(--iw-gold);stroke-width:1.6}
.iw-stats b{display:block;font-family:var(--iw-head);font-size:19px;font-weight:700;line-height:1.1}
.iw-stats small{font-size:11.5px;color:#CFE2D2;line-height:1.2;display:block}
/* ---------- 8. Row: About / Management / Messages ---------- */
.iw-about-row{display:grid;gap:var(--iw-gap);grid-template-columns:minmax(0,1fr)}
.iw-about-row:has(>:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
.iw-about-row:has(>:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
.iw-about-row:has(>:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
.iw-ac{position:relative;border-radius:var(--iw-r);overflow:hidden;min-height:250px;
padding:var(--iw-card-pad);display:flex;flex-direction:column}
.iw-ac h2{display:flex;align-items:center;gap:10px;font-size:23px;line-height:1.1}
.iw-ac h2 .iw-ic{font-size:40px;stroke-width:1.6}
.iw-ac p{font-size:14px;margin:16px 0 18px;line-height:1.5}
.iw-ac .iw-btn{margin-top:auto;align-self:flex-start}
.iw-ac-about{color:#fff;background:var(--iw-green-d)}
.iw-ac-about>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.iw-ac-about::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,42,22,.92) 30%,rgba(6,42,22,.3))}
.iw-ac-about>*:not(img){position:relative;z-index:1}
.iw-ac-about h2 .iw-ic{color:var(--iw-gold)}
.iw-ac-about p{color:#E1ECE2;max-width:230px}
.iw-ac-mgmt{background:var(--iw-cream);color:var(--iw-green-d)}
.iw-ac-mgmt>img{position:absolute;right:0;bottom:0;width:62%;height:62%;object-fit:cover;border-top-left-radius:60px;opacity:.95}
.iw-ac-mgmt>*:not(img){position:relative;z-index:1}
.iw-ac-mgmt h2 .iw-ic{color:var(--iw-green-m)}
.iw-ac-mgmt p{color:var(--iw-ink);max-width:250px}
.iw-ac-mgmt .iw-btn{background:var(--iw-cream)}
/* --- when the words stop short, and when they should not ---
The cap on the paragraph is not decoration: it keeps the words on the dark
side of the card so the photograph behind shows through on the right,
where the gradient thins out. It is right on a wide card and wrong on a
narrow one, and "narrow" is about the card, not the screen -- a 600px
phone puts these one per row and gives a 572px card, while a 768px tablet
puts them two per row and gives a 356px one. No media query can say that,
so the card is asked its own width.
Below 460px the strip left for the photograph is under about 150px, which
reads as an odd short column of text rather than as a picture beside it.
There the photograph goes behind the whole card and the gradient runs top
to bottom, so the words stay readable over it.
The card is its own container, not the row it sits in: these cards appear
in more than one row and the rows are not all laid out the same way.
:where() keeps these at the specificity of a single class, so a theme or a
later rule can still override them without a fight. */
.iw-ac{container-type:inline-size}
@container (max-width:460px){
.iw-ac-about p,.iw-ac-mgmt p{max-width:none}
/* The words now cross the whole card, including the thin end of the
gradient where the photograph shows most, so the photograph is turned
down to keep them readable. It is the photograph that changes and not
the gradient because the gradient is the card's own ::after, and an
element cannot be restyled by the container query it is itself the
container for -- only its descendants can. */
.iw-ac-about>img{opacity:.14}
.iw-ac-mgmt>img{width:100%;height:40%;border-top-left-radius:0;opacity:.2}
}
/* A card with no photograph behind it is holding space for nothing. The
"About the college" card has none, and stopped its words 73px short of
its own edge for a picture that was never there. */
.iw-ac-about:where(:not(:has(> img))) p,
.iw-ac-mgmt:where(:not(:has(> img))) p{max-width:none}
.iw-ac-about:where(:not(:has(> img)))::after{background:none}
.iw-msg{background:#fff;border:1px solid var(--iw-line);box-shadow:var(--iw-shadow);text-align:center;align-items:center}
.iw-msg h2{font-size:19px;color:var(--iw-green-d);justify-content:center}
.iw-avatar{width:84px;height:84px;border-radius:50%;margin:12px auto 10px;background:linear-gradient(135deg,#F4D6D6,#E9B8B8);display:grid;place-items:center;overflow:hidden;color:#fff;font-size:38px}
.iw-avatar img{width:100%;height:100%;object-fit:cover}
.iw-msg blockquote{position:relative;margin:0;padding-left:28px;text-align:left;font-size:13.5px;line-height:1.5;color:var(--iw-muted)}
.iw-msg blockquote::before{content:"\201C";position:absolute;left:-2px;top:-8px;font-family:Georgia,serif;font-size:52px;line-height:1;color:#E4A8A0}
.iw-msg cite{display:block;margin-top:10px;text-align:left;padding-left:28px;font-style:normal;font-size:13px;color:var(--iw-muted)}
.iw-msg cite b{display:block;font-family:var(--iw-head);font-size:14px;color:var(--iw-ink)}
.iw-msg:hover h2{color:var(--iw-green)}
/* ---------- 9. WIDGET: Explore bar ---------- */
.iw-explore{display:grid;grid-template-columns:220px repeat(3,minmax(0,1fr));background:var(--iw-cream);border-radius:var(--iw-r);padding:14px 0}
.iw-explore>*{padding:6px 22px;border-left:1px solid var(--iw-cream-d)}
.iw-explore>*:first-child{border-left:0}
.iw-ex-title{display:flex;align-items:center;justify-content:space-between;color:var(--iw-ink)}
.iw-ex-title span{font-family:var(--iw-head);font-weight:600;font-size:17px;line-height:1}
.iw-ex-title b{display:block;font-family:var(--iw-head);font-weight:800;font-size:38px;line-height:1;margin-top:2px}
.iw-ex-title .iw-ic{font-size:22px}
.iw-ex{display:flex;gap:14px;align-items:flex-start}
.iw-ex .iw-ic{font-size:40px;color:var(--iw-green);stroke-width:1.6}
.iw-ex h3{font-size:16px;color:var(--iw-ink);margin-bottom:3px}
.iw-ex p{margin:0;font-size:13px;color:var(--iw-muted);line-height:1.4}
.iw-ex:hover h3{color:var(--iw-green)}
/* ---------- 10. WIDGET: Departments strip ---------- */
.iw-depts{display:flex;align-items:center;gap:8px}
.iw-depts-label{flex:none;background:var(--iw-green-d);color:#fff;font-family:var(--iw-head);font-weight:600;font-size:18px;border-radius:8px;padding:8px 18px}
/* The label is a dark green chip, which is the one colour it cannot be when
the section itself is dark green: the chip disappears into the band and
what is left reads as a stray heading rather than a label. Gold is what
this theme already uses to pick something out against green -- the links
in an on-dark section do the same. */
.iw-w--on-dark .iw-depts-label,.iw-w--on-green .iw-depts-label{
background:var(--iw-gold);color:var(--iw-green-d)}
/* The chips keep their own ink. A section on dark green turns every link
inside it pale gold, which is right for a link written straight onto the
band and wrong for one sitting on a white chip of its own -- pale gold on
white is the same fault the other way round. */
.iw-w--on-dark .iw-chips a:not(.on),.iw-w--on-green .iw-chips a:not(.on){
color:var(--iw-ink)}
.iw-chips{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.iw-chips::-webkit-scrollbar{display:none}
.iw-chips a{flex:none;background:#fff;border:1px solid var(--iw-line);border-radius:6px;padding:8px 22px;font-size:13px;color:var(--iw-ink);transition:.2s}
.iw-chips a:hover{border-color:var(--iw-green);color:var(--iw-green)}
.iw-chips a.on{background:var(--iw-olive);border-color:var(--iw-olive);color:#fff;box-shadow:inset 0 0 0 1px var(--iw-gold)}
.iw-chip-next{flex:none;width:32px;height:38px;border-radius:6px;border:1px solid var(--iw-line);background:#fff;display:grid;place-items:center;font-size:16px}
.iw-chip-next:hover{background:var(--iw-green);color:#fff}
/* ---------- 11. Row: Student living + Gallery ---------- */
.iw-bottom-row{display:grid;gap:var(--iw-gap);grid-template-columns:minmax(0,1fr)}
.iw-bottom-row:has(>:nth-child(2)){grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.iw-living{position:relative;border-radius:var(--iw-r);overflow:hidden;color:#fff;background:var(--iw-green-d);padding:24px 24px 20px;display:flex;flex-direction:column;min-height:440px}
.iw-living>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.iw-living::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,42,22,.92) 0%,rgba(6,42,22,.6) 50%,rgba(6,42,22,.15) 100%),linear-gradient(0deg,rgba(6,42,22,.9) 0%,transparent 45%)}
.iw-living>*:not(img){position:relative;z-index:1}
.iw-living h2{font-size:clamp(24px,2.3vw,32px);max-width:360px}
.iw-living p{max-width:380px;font-size:14.5px;color:#E1ECE2;margin:12px 0 16px}
.iw-living .iw-btn{align-self:flex-start}
.iw-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:auto;padding-top:24px}
/* a or div: linked when it goes somewhere, plain when it does not. Colour
and underline are left to the :where(.iw) a reset at the top. */
.iw-feat>*{text-align:center;padding:0 8px;border-left:1px solid rgba(255,255,255,.25)}
.iw-feat>*:first-child{border-left:0}
.iw-feat .iw-fi{width:50px;height:50px;border-radius:50%;margin:0 auto 6px;background:var(--iw-gold-l);color:var(--iw-green);display:grid;place-items:center;font-size:24px;transition:transform .2s}
.iw-feat a:hover .iw-fi{transform:scale(1.08)}
.iw-feat small{margin-top:2px}
.iw-feat b{display:block;font-family:var(--iw-head);font-size:14.5px}
.iw-feat small{font-size:11.5px;color:#D7E5D8;line-height:1.3;display:block}
.iw-gallery{padding:14px}
.iw-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;height:calc(100% - 36px);min-height:360px}
.iw-gal a{position:relative;border-radius:8px;overflow:hidden;background:var(--iw-green-l);display:flex;flex-direction:column}
.iw-gal a img{flex:1;width:100%;min-height:0;object-fit:cover;transition:transform .4s}
.iw-gal a:hover img{transform:scale(1.05)}
.iw-gal .lbl{font-family:var(--iw-head);font-weight:600;font-size:13px;padding:5px 9px;background:#fff;color:var(--iw-ink)}
.iw-gal .big{grid-column:1/3;grid-row:1/3}
.iw-gal .big .lbl{position:absolute;left:0;bottom:0;background:none;color:#fff;display:flex;align-items:center;gap:6px;padding:8px 12px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.iw-gal .big::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 40%);pointer-events:none}
.iw-play{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:3px solid #fff;background:rgba(0,0,0,.25);color:#fff;display:grid;place-items:center;font-size:24px;z-index:1;transition:.2s}
.iw-gal .big:hover .iw-play{background:var(--iw-gold);border-color:var(--iw-gold);color:var(--iw-green-d)}
/* ---------- 12. WIDGET: Footer ---------- */
.iw-foot{margin-top:24px;background:var(--iw-green-d);color:#D3E2D5;position:relative;overflow:hidden}
.iw-foot::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0% 100%,rgba(92,122,46,.35),transparent 30%),radial-gradient(circle at 100% 100%,rgba(92,122,46,.35),transparent 30%);pointer-events:none}
/* The footer sizes itself to however many columns the client has made.
It was fixed at six tracks for five link columns and a wide Contact; with
four link columns the Contact landed in a narrow track and the wide one
meant for it sat empty, so the map was squeezed into 175px while 239px of
the footer went spare. Now the last track is always the wide one, whether
there are four link columns or none.
The :has() is wrapped in :where() so it counts for nothing in the
specificity. That matters more than it sounds: a bare :has() rule beats a
plain rule inside a media query, so the footer stayed five columns wide at
every width and the breakpoints below did nothing at all. Repeating each
variant in every breakpoint would also work, and was tried -- but only one
of the five was repeated, which is exactly the sort of thing that gets
missed. :where() makes it impossible to miss. */
.iw-foot .iw-wrap{position:relative;display:grid;padding-top:20px;padding-bottom:20px;
grid-template-columns:minmax(0,1.3fr)}
.iw-foot .iw-wrap:where(:has(>:nth-child(2))){grid-template-columns:repeat(1,minmax(0,1fr)) minmax(0,1.3fr)}
.iw-foot .iw-wrap:where(:has(>:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr)}
.iw-foot .iw-wrap:where(:has(>:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr)}
.iw-foot .iw-wrap:where(:has(>:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.3fr)}
.iw-foot .iw-wrap:where(:has(>:nth-child(6))){grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.15fr)}
.iw-fcol{padding:0 16px;border-left:1px solid rgba(255,255,255,.14)}
.iw-fcol:first-child{border-left:0;padding-left:0}
.iw-fcol h4{font-size:12.5px;color:#fff;text-transform:uppercase;letter-spacing:.3px;margin-bottom:10px}
.iw-fcol li a{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:2px 0;transition:color .2s}
.iw-fcol li a::before{content:"\203A";font-size:15px;line-height:1;color:var(--iw-gold)}
.iw-fcol li a:hover{color:var(--iw-gold-l)}
/* The map takes its height from its own width rather than a fixed number of
pixels, so it is a strip in a narrow footer column and a proper square-ish
map once the column is the whole screen. The iframe carries width and
height attributes of its own when pasted from Google; width:100% and a
height of 100% of the ratio box override both. */
.iw-map{border-radius:8px;overflow:hidden;background:#cfd8cf;aspect-ratio:16/7}
.iw-map iframe{width:100%;height:100%;border:0;display:block}
.iw-addr{display:flex;gap:6px;font-size:12.5px;margin:10px 0;line-height:1.4}
/* A client types their own address, and theirs may hold a 43-character
website name with nowhere to break. Left alone it cannot wrap and pushes
the footer past the edge of a narrow phone, taking the whole page with
it. Breaking mid-word is ugly; a page that scrolls sideways is worse. */
.iw-addr>span,.iw-addr a{min-width:0;overflow-wrap:anywhere}
.iw-addr .iw-ic{color:var(--iw-gold);font-size:16px;margin-top:2px}
.iw-copy{background:#fff}
.iw-copy .iw-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;font-size:13px;color:var(--iw-muted)}
.iw-copy nav{display:flex;align-items:center;gap:0;margin-left:auto}
.iw-copy nav a{padding:0 14px;border-left:1px solid var(--iw-line)}
.iw-copy nav a:first-child{border-left:0}
.iw-copy nav a:hover{color:var(--iw-green)}
.iw-copy .iw-soc a{border-radius:6px}
/* ---------- 13. WIDGET: Mobile bottom bar ---------- */
.iw-mbar{display:none}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width:1280px){
.iw-acc li{width:66px;font-size:10px}
.iw-menu>li>a{padding:8px 8px;font-size:13px}
.iw-brand-t b{font-size:19px}
}
@media (max-width:1240px){
/* The menu items will not wrap, so from here down the nav row needs more
than there is: this college's menu alone wants 987px and the phone
button another 176px. The button was the part hanging off the right of
the screen and making the whole page scroll sideways, and it is the one
piece also printed in the header and in the footer, so it is the one
that goes. Below 1024px the menu becomes the drawer and both come back.
The pixel figure only suits this college's menu, so the wrap rule by
.iw-nav is the one that has to hold for a college with a longer one. */
.iw-contact{display:none}
}
@media (max-width:1180px){
.iw-acc{display:none}
.iw-hero:has(>:nth-child(3)){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
/* The quick cards drop under the other two and lie flat across the width. */
.iw-hero>*:nth-child(3){grid-column:1/-1}
.iw-qcards{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.iw-stats{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}
.iw-stats li:nth-child(4){border-left:0}
.iw-about-row,.iw-about-row:has(>:nth-child(2)),.iw-about-row:has(>:nth-child(3)),.iw-about-row:has(>:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
.iw-foot .iw-wrap{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
.iw-fcol:nth-child(4){border-left:0;padding-left:0}
}
@media (max-width:1024px){
/* nav becomes drawer */
.iw-burger{display:grid}
.iw-connect{display:none}
.iw-nav{position:static;box-shadow:none}
.iw-nav .iw-wrap{min-height:0;padding:0}
.iw-menu,.iw-contact{display:none}
.iw-nav.open{position:fixed;inset:0;z-index:100;background:rgba(6,42,22,.5)}
.iw-nav.open .iw-wrap{position:absolute;top:0;right:0;bottom:0;width:min(340px,88vw);background:#fff;flex-direction:column;align-items:stretch;padding:70px 16px 24px;overflow:auto}
.iw-nav.open .iw-menu{display:flex;flex-direction:column;align-items:stretch}
.iw-nav.open .iw-menu>li>a{color:var(--iw-ink);justify-content:space-between;padding:12px;border-bottom:1px solid var(--iw-line);border-radius:0;font-size:15px}
.iw-nav.open .iw-menu>li.active>a{background:var(--iw-green);color:#fff;border-radius:8px}
.iw-nav.open .iw-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;display:none;padding:4px 0 8px 12px}
.iw-nav.open li.exp>.iw-sub{display:block}
.iw-nav.open .iw-contact{display:inline-flex;justify-content:center;margin-top:16px;color:var(--iw-green);border-color:var(--iw-green)}
.iw-nav.open .iw-nav-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:10px;background:var(--iw-green-l);color:var(--iw-green);font-size:20px;display:grid;place-items:center}
.iw-hdr{position:sticky;top:0;z-index:60;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.iw-logos-row,.iw-logos-row:has(>:nth-child(2)),.iw-logos-row:has(>:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))}
.iw-logos-row>*:last-child{grid-column:1/-1}
.iw-explore{grid-template-columns:repeat(3,minmax(0,1fr))}
.iw-ex-title{grid-column:1/-1;border-bottom:1px solid var(--iw-cream-d);padding-bottom:12px;margin-bottom:8px}
.iw-ex-title b{display:inline;margin-left:6px}
.iw-explore>*:nth-child(2){border-left:0}
.iw-bottom-row,.iw-bottom-row:has(>:nth-child(2)){grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
.iw-years{display:none}
.iw-hero,.iw-hero:has(>:nth-child(2)),.iw-hero:has(>:nth-child(3)){grid-template-columns:minmax(0,1fr)}
/* Stacked, the slider is a band again rather than a panel. */
.iw-hero:has(>:nth-child(2)) .iw-slider{aspect-ratio:4/3}
/* A 12:5 band on a narrow screen is a letterbox strip with nothing
readable in it, so a phone has a shape of its own. */
.iw-slider{aspect-ratio:4/3;min-height:320px}
.iw-cap{left:22px;right:22px;bottom:50px}
.iw-slide::after{background:linear-gradient(0deg,rgba(6,42,22,.92) 15%,rgba(6,42,22,.4) 70%,rgba(6,42,22,.15))}
.iw-sl-arrow{display:none}
.iw-qcards{grid-template-columns:minmax(0,1fr)}
.iw-logos-row,.iw-logos-row:has(>:nth-child(2)),.iw-logos-row:has(>:nth-child(3)){grid-template-columns:minmax(0,1fr)}
.iw-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.iw-stats li:nth-child(odd){border-left:0}
.iw-stats li:nth-child(4){border-left:1px solid rgba(255,255,255,.2)}
.iw-explore{grid-template-columns:minmax(0,1fr)}
.iw-explore>*{border-left:0;border-top:1px solid var(--iw-cream-d);padding:12px 20px}
.iw-explore>*:first-child{border-top:0}
.iw-ex-title{border-bottom:0;margin:0}
.iw-depts-label{font-size:15px;padding:8px 12px}
.iw-feat{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
.iw-feat a:nth-child(3){border-left:0}
.iw-foot .iw-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
.iw-fcol{border-left:0;padding-left:0}
.iw-copy nav{margin-left:0}
/* As many columns as there are buttons, not four. A college with no
phone number or no map link gets three, or two, and a fixed four left
an empty cell at the end of the bar. */
.iw-mbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-top:1px solid var(--iw-line);padding-bottom:env(safe-area-inset-bottom,0px)}
.iw-mbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;font-size:11.5px;font-weight:600;color:var(--iw-green-d)}
.iw-mbar a .iw-ic{font-size:20px}
.iw-mbar a.pri{background:var(--iw-green);color:#fff}
body.iw{padding-bottom:62px}
}
@media (max-width:600px){
body.iw{font-size:14.5px}
.iw-wrap{padding:0 14px}
.iw-brand img{height:48px}
.iw-brand-t b{font-size:14.5px}
.iw-brand-t small{font-size:11px}
.iw-search-btn{display:none}
.iw-about-row,.iw-about-row:has(>:nth-child(2)),.iw-about-row:has(>:nth-child(3)),.iw-about-row:has(>:nth-child(4)){grid-template-columns:minmax(0,1fr)}
.iw-ac{min-height:220px}
.iw-lc-track>*{flex-basis:calc(33.33% - 7px)}
/* One column each, stacked. Four narrow columns of links on a phone is
four words a line and nothing readable. */
.iw-foot .iw-wrap{grid-template-columns:minmax(0,1fr)}
.iw-fcol{border-left:0;padding-left:0;padding-right:0}
.iw-fcol + .iw-fcol{border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
/* A thumb is about 9mm across. Stacked one per line these links were
23px tall and 4px apart, so the one above was as easy to hit as the one
meant. Nothing moves sideways: only the line each one stands on grows. */
.iw-fcol li a{padding:9px 0;font-size:13.5px}
/* The phone number is the one thing on a college website somebody taps
on a phone, and it was a 15px line of text. Inline-block so the padding
actually makes the link taller, and two numbers stay two lines. */
.iw-addr a{display:inline-block;padding:7px 0;font-size:13.5px}
.iw-addr{font-size:13.5px}
/* Centred, because there is only the one line in it: left-aligned in a
space-between row it sat against one edge with the rest of the bar
empty beside it. */
.iw-copy .iw-wrap{flex-direction:column;align-items:center;justify-content:center;
text-align:center;gap:8px}
/* A paragraph brings its own margin, which here sits on top of the row's
own padding and doubles the height of a one-line strip. */
.iw-copy p{margin:0}
.iw-copy nav a{padding:0 10px}
.iw-copy nav a:first-child{padding-left:0}
.iw-gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;height:auto;min-height:0;grid-auto-rows:120px}
.iw-gal .big{grid-column:1/-1;grid-row:span 2}
}
@media (prefers-reduced-motion:reduce){
.iw *{transition:none!important;animation:none!important}
html{scroll-behavior:auto}
}
/* =====================================================================
Inner pages: breadcrumb and the section list.
The prototype covers the home page only, so these are written here.
The section list follows SPEC §3:
laptop and up a sticky column down the side
tablet a row of tabs that scrolls sideways
phone an "In this section" list above the content
===================================================================== */
/* ---------- breadcrumb ---------- */
.iw-crumb{margin:0 0 14px}
.iw-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--iw-muted)}
.iw-crumb li{display:flex;align-items:center}
.iw-crumb li+li::before{content:"\203A";margin:0 8px;color:var(--iw-gold);font-size:16px;line-height:1}
.iw-crumb a{color:var(--iw-muted);border-bottom:1px solid transparent}
.iw-crumb a:hover{color:var(--iw-green);border-bottom-color:currentColor}
/* ---------- section list ---------- */
.iw-rail{position:sticky;top:66px}
.iw-rail-title{font-size:17px;color:var(--iw-green-d);padding:0 0 10px;margin:0 0 10px;border-bottom:2px solid var(--iw-gold)}
.iw-rail ul{list-style:none;margin:0;padding:0}
.iw-rail li+li{border-top:1px solid var(--iw-line)}
.iw-rail a{display:block;padding:9px 12px;font-size:14px;color:var(--iw-ink);border-radius:8px;transition:background .2s,color .2s}
.iw-rail a:hover{background:var(--iw-green-l);color:var(--iw-green)}
.iw-rail a.on{background:var(--iw-green);color:#fff;font-weight:600}
.iw-body{min-width:0}
/* tablet: the list becomes a row of tabs above the content */
@media (max-width:1023px) and (min-width:601px){
.iw-rail{position:static;margin-bottom:18px}
.iw-rail-title{border-bottom:0;padding-bottom:4px;margin-bottom:6px}
.iw-rail ul{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.iw-rail li+li{border-top:0}
.iw-rail a{white-space:nowrap;border:1px solid var(--iw-line);border-radius:999px;padding:7px 15px}
.iw-rail a.on{border-color:var(--iw-green)}
}
/* phone: a plain list above the content, kept short */
@media (max-width:600px){
.iw-rail{position:static;margin-bottom:16px;border:1px solid var(--iw-line);border-radius:var(--iw-r);padding:12px;background:#fff}
.iw-rail-title{font-size:15px;border-bottom:1px solid var(--iw-line);padding-bottom:8px;margin-bottom:6px}
.iw-page-title{font-size:24px}
.iw-main{padding:16px 0 24px}
}
/* =====================================================================
The college name is content now, not markup.
In the prototype the name was typed with a
in the middle, so the
brand block could be flex:none and never needed to shrink. The name now
comes from Settings and may be any length, so the brand has to be
allowed to shrink and wrap, or a long name pushes the menu button off
the side of a phone screen.
===================================================================== */
.iw-brand{flex:1 1 auto;min-width:0}
.iw-brand-t{min-width:0}
.iw-brand-t b{overflow-wrap:break-word}
.iw-burger{flex:none}
/* ---------------------------------------------------------------------
Why the seals are flex:0 0 auto and the brand is the one that gives way.
Making the brand shrinkable also made it grow, and the seal strip was
written flex:1 — basis zero. When a flex row runs out of room it takes
the space back in proportion to each basis, so a basis of zero loses
every time: the strip was given a box 0px wide while its five seals
stayed 406px, and they painted straight over "Connect with us".
The row does fit. Measured at the 1320px the wrap is capped to, the
four blocks need 1087px of the 1192px available. The seals and the
social icons are fixed-size things, so they say so; the college name
and the years badge are the two that can wrap, so they are the two
that give way.
--------------------------------------------------------------------- */
/* Nothing may stick out sideways at any width (CLAUDE.md). */
.iw-mbar{max-width:100vw}
@media (max-width:600px){
.iw-hdr .iw-wrap{gap:10px}
.iw-brand{gap:10px}
.iw-brand-t b{font-size:14px;line-height:1.15}
/* No room is left under the bottom bar here: body.iw already leaves it,
once, for the whole page. Leaving it twice put 124px of white under a
57px bar, and because the strip, the gap and the bar are all white it
read as one empty block with the copyright stranded at the top of it. */
/* Room to read it on a phone, where the column is the full width. */
.iw-map{aspect-ratio:16/10}
}
/* =====================================================================
Search on a phone.
The prototype hid the search button under 600px, which left a phone with
no way to search at all - the worst place to lose it, since that is where
students look for a notice or a result. The brand block shrinks now, so
there is room to keep it.
===================================================================== */
@media (max-width:600px){
.iw-search-btn{display:grid}
.iw-connect{display:block} /* the button lives inside this block */
.iw-connect p,.iw-soc a{display:none} /* ...but not the social icons */
.iw-connect .iw-search-btn{display:grid;width:38px;height:38px;font-size:17px}
}
/* ---------- Search results ---------- */
.iw-search-again{display:flex;gap:8px;margin:0 0 18px;max-width:34rem}
.iw-search-again input{flex:1;border:1px solid var(--iw-line);border-radius:999px;padding:10px 18px;font:inherit}
.iw-search-note{color:var(--iw-muted);margin:0 0 18px}
.iw-search-count{color:var(--iw-muted);font-size:13px;margin:0 0 14px}
.iw-results{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:46rem}
.iw-results li{padding-bottom:16px;border-bottom:1px solid var(--iw-line)}
.iw-results li:last-child{border-bottom:0}
.iw-results a{font-family:var(--iw-head);font-weight:600;font-size:17px;color:var(--iw-green)}
.iw-results a:hover{text-decoration:underline}
.iw-results p{margin:4px 0;color:var(--iw-ink);font-size:14px}
.iw-results mark{background:var(--iw-gold-l);color:inherit;padding:0 2px;border-radius:3px}
.iw-result-path{font-size:12.5px;color:var(--iw-muted)}
.iw-pager{display:flex;align-items:center;gap:16px;margin-top:22px;font-size:14px}
.iw-pager a{color:var(--iw-green);font-weight:600}
.iw-pager a:hover{text-decoration:underline}
/* ---------- Lists of items: events, news, notices, documents ---------- */
.iw-lead{color:var(--iw-muted);margin:0 0 18px;max-width:46rem}
.iw-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
.iw-filter{border:1px solid var(--iw-line);border-radius:999px;padding:6px 15px;font-size:13.5px;color:var(--iw-ink)}
.iw-filter:hover{border-color:var(--iw-green);color:var(--iw-green)}
.iw-filter.on{background:var(--iw-green);border-color:var(--iw-green);color:#fff;font-weight:600}
.iw-items{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-width:52rem}
.iw-item{display:flex;align-items:flex-start;gap:16px;padding:16px 4px;border-bottom:1px solid var(--iw-line)}
.iw-item:last-child{border-bottom:0}
.iw-item-pic{flex:none;width:140px;border-radius:10px;overflow:hidden}
.iw-item-pic img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.iw-item-body{flex:1 1 auto;min-width:0}
.iw-item-body h2{font-size:17px;margin:0 0 3px}
.iw-item-body h2 a{color:var(--iw-green-d)}
.iw-item-body h2 a:hover{color:var(--iw-green);text-decoration:underline}
.iw-item-body h2 .iw-ic{font-size:14px;color:var(--iw-gold);vertical-align:middle}
.iw-item-meta{margin:0 0 5px;font-size:12.5px;color:var(--iw-muted)}
.iw-item-body p{margin:0;font-size:14px}
.iw-item-arrow{flex:none;color:var(--iw-muted);margin-top:14px}
.iw-article{max-width:52rem}
.iw-article-cover{margin:0 0 18px}
.iw-article-cover img{width:100%;height:auto;border-radius:var(--iw-r)}
.iw-article-cover figcaption{font-size:12.5px;color:var(--iw-muted);margin-top:6px}
.iw-rt-body{font-size:15.5px;line-height:1.7}
.iw-rt-body h2,.iw-rt-body h3{margin:22px 0 8px}
.iw-rt-body p{margin:0 0 14px}
.iw-rt-body ul,.iw-rt-body ol{margin:0 0 14px;padding-left:22px;list-style:revert}
.iw-rt-body img{border-radius:10px;margin:10px 0}
.iw-rt-body table{border-collapse:collapse;width:100%;margin:0 0 14px}
.iw-rt-body th,.iw-rt-body td{border:1px solid var(--iw-line);padding:8px 10px;text-align:left}
.iw-rt-body th{background:var(--iw-green-l)}
.iw-rt-head{font-size:22px;color:var(--iw-green-d);margin:0 0 10px}
.iw-rt{margin-bottom:var(--iw-gap)}
@media (max-width:600px){
.iw-item{gap:12px;padding:14px 0}
.iw-item-pic{width:92px}
.iw-item-arrow{display:none}
}
/* ---------- News and events as cards ---------- */
.iw-itemcards{margin-bottom:var(--iw-gap)}
.iw-itemcards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px}
.iw-itemcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--iw-line);border-radius:var(--iw-r);overflow:hidden;box-shadow:var(--iw-shadow);transition:transform .2s,box-shadow .2s}
.iw-itemcard:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(10,58,31,.14)}
.iw-itemcard-pic{aspect-ratio:16/10;background:var(--iw-green-l);display:grid;place-items:center;overflow:hidden}
.iw-itemcard-pic img{width:100%;height:100%;object-fit:cover}
.iw-itemcard-body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:4px}
.iw-itemcard-body h3{font-size:15.5px;color:var(--iw-green-d);margin:0}
.iw-itemcard-body p{margin:0;font-size:13.5px;color:var(--iw-ink)}
.iw-result-kind{display:inline-block;background:var(--iw-green-l);color:var(--iw-green);border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:600;margin-right:7px}
/* =====================================================================
Hubs: the list of departments, and the pages a department gets.
Added with Phase 5. The cards reuse the same shapes as the item cards
above, so a department card and an event card sit together without
looking like two different websites.
===================================================================== */
/* a heading inside the side list, for a two-level rail */
.iw-rail-group{
font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--iw-muted);margin:14px 0 4px;padding:0 12px
}
.iw-rail-group:first-of-type{margin-top:6px}
/* the hub list */
.iw-hub-group{margin:0 0 28px}
.iw-hub-head{
font-size:18px;color:var(--iw-green-d);margin:0 0 12px;padding-bottom:8px;
border-bottom:2px solid var(--iw-gold)
}
.iw-hub-grid{
display:grid;gap:var(--iw-gap);
grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))
}
.iw-hub-card{
display:flex;flex-direction:column;overflow:hidden;background:#fff;
border:1px solid var(--iw-line);border-radius:var(--iw-r);
box-shadow:var(--iw-shadow);transition:transform .2s,box-shadow .2s,border-color .2s
}
.iw-hub-card:hover{transform:translateY(-3px);border-color:var(--iw-green);box-shadow:0 10px 24px rgba(20,60,40,.12)}
.iw-hub-pic{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--iw-green-l)}
.iw-hub-pic img{width:100%;height:100%;object-fit:cover;display:block}
.iw-hub-body{display:block;padding:14px 16px 16px}
.iw-hub-body h3{margin:0 0 6px;font-size:16px;color:var(--iw-green-d)}
.iw-hub-body p{margin:0 0 10px;font-size:14px;color:var(--iw-muted)}
.iw-hub-more{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--iw-green)
}
.iw-hub-card:hover .iw-hub-more{gap:9px}
/* the courses a department teaches */
.iw-prog-group{margin:0 0 26px}
.iw-prog-group .iw-items{margin-top:0}
@media (max-width:600px){
.iw-hub-head{font-size:16px}
.iw-hub-grid{grid-template-columns:1fr}
}
/* =====================================================================
The floating WhatsApp button.
Only drawn when it is switched on and a number is set (shell/whatsapp.php).
It sits above the bottom bar on a phone so it never covers the Call button.
===================================================================== */
.iw-wa{
position:fixed;right:16px;bottom:16px;z-index:60;
display:inline-flex;align-items:center;gap:8px;
padding:12px 16px;border-radius:999px;
background:#25d366;color:#fff;font-weight:600;font-size:14px;
box-shadow:0 4px 14px rgba(0,0,0,.22);
transition:transform .18s,box-shadow .18s
}
.iw-wa:hover,.iw-wa:focus-visible{color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.iw-wa-ic{width:22px;height:22px;flex:none}
/* On a phone the bottom bar is already there, so the button moves up and
keeps only its icon — a floating pill would cover half the screen. */
@media (max-width:600px){
.iw-wa{bottom:calc(var(--iw-mbar-h,58px) + 14px);right:14px;padding:13px}
.iw-wa-words{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){ .iw-wa{transition:none} .iw-wa:hover{transform:none} }
/* --- Departments ---------------------------------------------------
The cards shrink to fit rather than wrapping to a fixed count, so
eighteen departments look right at every width without a breakpoint
per number. minmax(0,1fr) because a long department name would
otherwise push the grid wider than the phone it is on. */
.iw-deptlist-intro{margin:0 0 14px;color:var(--iw-ink-soft);max-width:48rem}
.iw-deptlist-group{margin:18px 0 10px;font-size:1rem;color:var(--iw-green-d)}
.iw-deptlist-group:first-of-type{margin-top:0}
.iw-dept-cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--iw-gap);
grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr))}
.iw-dept-cards>li>a,.iw-dept-cards>li>span{display:flex;flex-direction:column;gap:6px;
height:100%;padding:12px;background:#fff;border:1px solid var(--iw-line);
border-radius:var(--iw-r);color:inherit;text-decoration:none}
.iw-dept-cards>li>a:hover,.iw-dept-cards>li>a:focus-visible{border-color:var(--iw-green);
box-shadow:0 2px 14px rgba(20,60,40,.1)}
/* A department with no page of its own is shown, not linked: a card that
goes nowhere is worse than one that plainly does not. */
.iw-dept-cards>li>span{opacity:.72}
.iw-dept-cards b{font-size:.98rem;line-height:1.35}
.iw-dept-cards small{color:var(--iw-ink-soft);font-size:.84rem;line-height:1.45}
.iw-dept-pic{display:block;aspect-ratio:3/2;border-radius:calc(var(--iw-r) - 2px);
overflow:hidden;background:var(--iw-green-l);display:grid;place-items:center}
.iw-dept-pic img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.iw-dept-mark{font-weight:700;font-size:1.3rem;color:var(--iw-green);letter-spacing:.04em}
.iw-dept-names{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;
grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr))}
.iw-dept-names a{color:inherit;text-decoration:none;display:block;padding:5px 0;
border-bottom:1px solid var(--iw-line)}
.iw-dept-names a:hover,.iw-dept-names a:focus-visible{color:var(--iw-green)}
.iw-dept-names span{display:block;padding:5px 0;color:var(--iw-ink-soft);
border-bottom:1px solid var(--iw-line)}
/* --- The pop-up notice ---------------------------------------------
A