/* IWD homepage (Oct 2026 redesign) - loaded only by Default.aspx. Shared palette + Discover more styles are in /css/iwd-2027.css.
   Bump the ?version on the <link> in Default.aspx when this file changes. */

/* IWD palette (proposed site standard, Oct 2026): purple #4D2A72, green #16834A, lavender #F4EFF8, mint #DDF3E5, white #FFFFFF, charcoal #29232E.
   Contrast rules: green TEXT only on white (4.8:1); on lavender/mint use purple or dark green for small text; never green on purple. */
.hp27 { --purple:#4D2A72; --purple-dark:#3B1F59; --green:#16834A; --green-dark:#116B3C; --lavender:#F4EFF8; --lavender-2:#E9DFF3; --mint:#DDF3E5; --white:#FFFFFF; --ink:#29232E;
        --muted:rgba(41,35,46,.74); --line:rgba(77,42,114,.12); --radius:16px; --shadow:0 6px 24px rgba(77,42,114,.08);
        font-family:'Libre Franklin', system-ui, sans-serif; color:var(--ink); }
.hp27 h1, .hp27 h2, .hp27 h3, .hp27 h4 { font-family:'Libre Franklin', sans-serif; color:var(--purple); margin:0; }
.hp27 p { margin:0; }
.hp27 a { text-decoration:none; }
.hp27 svg.ic { width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hp27 .wrap { max-width:1320px; margin:0 auto; padding:0 1.5rem; }
.hp27 .label { font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--purple); }
.hp27 .arrow { display:inline-block; transition:transform .15s; }
.hp27 a:hover .arrow { transform:translateX(4px); }

/* Image slots: background image set from code-behind; empty slot shows a labelled lavender placeholder */
.hp27 .ph { position:relative; background:var(--lavender-2) center/cover no-repeat; }
.hp27 .ph:not([style*="url("])::after { content:attr(data-ph); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:1rem;
                                       font-size:.8rem; font-weight:700; letter-spacing:.04em; color:var(--purple); opacity:.7;
                                       background:repeating-linear-gradient(45deg, transparent 0 14px, rgba(77,42,114,.05) 14px 28px); }

/* Buttons + pills */
.hp27 .btn-p { display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.6rem; border-radius:999px; font-weight:700; font-size:.95rem;
               background:var(--purple); color:#fff !important; border:2px solid var(--purple); transition:background .15s, transform .15s; }
.hp27 .btn-p:hover { background:var(--purple-dark); border-color:var(--purple-dark); transform:translateY(-1px); }
.hp27 .btn-o { display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.6rem; border-radius:999px; font-weight:700; font-size:.95rem;
               color:var(--purple) !important; border:2px solid var(--purple); background:transparent; transition:background .15s; }
.hp27 .btn-o:hover { background:var(--lavender-2); }
.hp27 .btn-w { display:inline-flex; align-items:center; gap:.55rem; padding:.8rem 1.5rem; border-radius:999px; font-weight:700; font-size:.95rem;
               background:#fff; color:var(--purple) !important; border:2px solid #fff; transition:transform .15s; }
.hp27 .btn-w:hover { transform:translateY(-1px); }
.hp27 .pill { display:inline-block; padding:.28rem .75rem; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hp27 .pill.g { background:var(--mint); color:var(--green-dark); }
.hp27 .pill.p { background:var(--lavender-2); color:var(--purple); }
.hp27 .more { font-weight:700; font-size:.9rem; color:var(--purple); }

/* 1. HERO */
.hp27 .hero { background:var(--purple); color:#fff; overflow:hidden; }
.hp27 .hero .label, .hp27 .hero h1 { color:#fff; }
.hp27 .hero h1 { text-transform:uppercase; }
.hp27 .hero-grid { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); align-items:stretch; min-height:360px; }
.hp27 .hero-media { order:-1; }   /* image on the left on desktop */
.hp27 .hero-text { padding:2.5rem max(1.5rem, calc((100vw - 1320px) / 2 + 1.5rem)) 2.5rem 3rem; align-self:center; }
.hp27 .hero h1 { font-weight:700; font-size:clamp(1.6rem, 2.8vw, 2.5rem); line-height:1.05; letter-spacing:-.02em; margin:.75rem 0 1rem; }
.hp27 .hero .body { font-size:1.05rem; line-height:1.6; color:#fff; max-width:30rem; margin-bottom:1.5rem; }
.hp27 .hero-media { position:relative; }
.hp27 .hero-media .ph { position:absolute; inset:0; border-radius:0 340px 340px 0; }
.hp27 .hero-media .tag { position:absolute; right:1.5rem; bottom:1.2rem; color:#fff; font-weight:700; font-size:.9rem; z-index:2; }

/* 2. EVERY DAY BAND */
.hp27 .band { background:var(--purple); color:#fff; padding:3rem 0; }
.hp27 .band h2 { color:#fff; font-weight:800; font-size:clamp(1.6rem, 3vw, 2.5rem); letter-spacing:-.01em; }
.hp27 .band p { font-size:clamp(1.05rem, 1.8vw, 1.5rem); color:rgba(255,255,255,.88); margin:.75rem 0 1.75rem; }
.hp27 .band .big { display:block; text-align:center; background:#fff; color:var(--purple) !important; border-radius:14px; padding:1.1rem; font-weight:700; font-size:clamp(1.15rem, 2vw, 1.6rem); transition:background .15s; }
.hp27 .band .big:hover { background:var(--lavender); }
.hp27 .band.btn-only { padding:1.75rem 0; }
.hp27 .feature .blob { align-self:stretch; min-height:240px; border-radius:var(--radius); overflow:hidden; }   /* rounded corners; same height as the Quick links column (and its divider line) */

/* 3. TODAY'S FEATURE + QUICK LINKS */
.hp27 .feature { padding:4rem 0; border-bottom:1px solid var(--line); }
.hp27 .feature .label { color:var(--green); }   /* 'IWD Giving' and 'Quick links' labels */
.hp27 .feature-grid { display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3.2fr); gap:2.5rem; align-items:center; }
.hp27 .feature h2 { font-weight:800; font-size:clamp(1.6rem, 2.6vw, 2.3rem); line-height:1.1; margin:.75rem 0 1rem; }
.hp27 .feature p { color:var(--muted); line-height:1.6; margin-bottom:1.5rem; }
.hp27 .feature .img { aspect-ratio:16/9; border-radius:4px; overflow:hidden; }
.hp27 .feature .img .pill { position:absolute; left:1rem; top:1rem; z-index:1; }
.hp27 .quick { border-left:1px solid var(--line); padding-left:2rem; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.hp27 .quick a { display:flex; gap:1rem; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--line); color:var(--ink) !important; }
.hp27 .quick a:last-child { border-bottom:0; }
.hp27 .quick b { display:block; color:var(--purple); font-weight:700; }
.hp27 .quick span { font-size:.85rem; color:var(--muted); }
.hp27 .ibub { flex:0 0 56px; height:56px; border-radius:50%; background:var(--lavender); color:var(--purple); display:flex; align-items:center; justify-content:center; }

/* 4. TODAY WE CELEBRATE */
.hp27 .celebrate { padding:3rem 0 3.5rem; border-bottom:1px solid var(--line); }
.hp27 .sec-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:1.5rem; }
.hp27 .sec-head h2 { font-weight:700; font-size:clamp(1.5rem, 2.6vw, 2.2rem); text-transform:uppercase; letter-spacing:-.005em; }
.hp27 .sec-head h2.row-title { text-transform:none; font-weight:800; }
.hp27 .sec-head a { font-weight:600; color:var(--purple); text-transform:uppercase; font-size:1.05rem; white-space:nowrap; }
.hp27 .celebrate .img { aspect-ratio:12/5; max-height:540px; width:100%; border-radius:20px; overflow:hidden; background-position:center 30%; }
@media (max-width: 767px) { .hp27 .celebrate .img { aspect-ratio:4/3; } }
.hp27 .celebrate .kicker { color:var(--green); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:1.5rem 0 .75rem; }   /* same as the 'IWD Giving' label, in green */
.hp27 .celebrate h3 { font-weight:700; font-size:clamp(1.4rem, 2.2vw, 1.9rem); }
.hp27 .celebrate p { color:var(--muted); font-size:1.15rem; margin-top:.75rem; }

/* 5 + 6. CARD ROWS */
.hp27 .cards { padding:3rem 0 1rem; }
.hp27 .cards + .cards { padding-top:1.5rem; }
.hp27 .cards h2.row-title { font-weight:800; font-size:clamp(1.4rem, 2.2vw, 1.9rem); }
.hp27 .grid4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.5rem; }
.hp27 .card27 { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
                color:var(--ink) !important; transition:transform .2s, box-shadow .2s; }
.hp27 .card27:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(77,42,114,.16); }
.hp27 .card27 .ph { aspect-ratio:16/9; }
/* Spotlight cards with a "Publish yours" link: the card is a div holding the main link + the small link (links can't nest) */
.hp27 .card27 .card-main { display:flex; flex-direction:column; flex:1; color:inherit !important; text-decoration:none; }
.hp27 .card27 .pub { align-self:flex-end; margin:-.4rem 1.35rem 1rem; font-size:.74rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) !important; }
.hp27 .card27 .pub:hover { color:var(--purple) !important; }
.hp27 .card27 .cb { padding:1.1rem 1.35rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.hp27 .card27 h3 { font-weight:700; font-size:1.2rem; line-height:1.25; margin:.8rem 0 .5rem; }
.hp27 .card27 p { color:var(--muted); font-size:.92rem; line-height:1.55; flex:1; margin-bottom:1.1rem; }

/* 9. GET INVOLVED */
.hp27 .involved { padding:2.5rem 0 3rem; background:var(--lavender); }   /* same as Discover more on /Giving */
.hp27 .involved .sec-head { margin-bottom:1.25rem; }
.hp27 .involved .sec-head h2 { font-weight:800; font-size:clamp(1.3rem, 2vw, 1.7rem); text-transform:none; }

/* 9b. GET INVOLVED action cards (link text styled like the spotlight cards' "Publish yours") */
.hp27 .acts { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1rem; align-items:stretch; }
@media (max-width: 1199px) { .hp27 .acts { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .hp27 .acts { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .hp27 .acts { grid-template-columns:1fr; } }
.hp27 .acard { display:flex; flex-direction:column; background:#fff; border-radius:12px; padding:1.25rem; color:var(--ink) !important; transition:transform .2s, box-shadow .2s; }   /* same size as the Discover more cards on /Giving */
.hp27 .acard:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.hp27 .acard .ibub { width:52px; height:52px; flex-basis:auto; margin-bottom:1rem; }
.hp27 .acard h3 { font-weight:700; font-size:1rem; line-height:1.3; margin:0 0 .3rem; }
.hp27 .acard p { color:var(--muted); font-size:.85rem; line-height:1.45; flex:1; margin-bottom:.6rem; }
.hp27 .acard .pub { align-self:flex-end; font-size:.74rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.hp27 .acard:hover .pub { color:var(--purple); }
.hp27 .acard.stay { background:var(--mint); }
.hp27 .acard.stay .ibub { background:#fff; }
.hp27 .acard.stay h3 { margin-bottom:1rem; }
.hp27 .acard.stay .btn-reg { align-self:flex-start; margin-top:auto; border-radius:999px; padding:.5rem 1.1rem; background:var(--purple); color:#fff; font-weight:700; font-size:.85rem; }
.hp27 .acard.stay:hover .btn-reg { background:var(--purple-dark); }

/* 10. COLLECTIVE (green) */
.hp27 .collective { background:var(--green); color:#fff; text-align:center; padding:3rem 0; }
.hp27 .collective h2 { color:#fff; font-weight:700; font-size:clamp(1.3rem, 2.2vw, 1.75rem); }
.hp27 .collective p { color:#fff; max-width:62rem; margin:1rem auto 0; line-height:1.6; font-size:.95rem; }
.hp27 .collective p a { color:#fff; text-decoration:none; font-weight:700; }

/* Responsive */
@media (max-width: 1199px) {
    .hp27 .feature-grid { grid-template-columns:1fr 1fr; }
    .hp27 .feature .blob { align-self:center; aspect-ratio:4/3; min-height:0; }
    .hp27 .quick { grid-column:1 / -1; border-left:0; padding-left:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
    .hp27 .quick a { border-bottom:0; }
    .hp27 .grid4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .hp27 .hero-grid { grid-template-columns:1fr; }
    .hp27 .hero-text { padding:1.75rem 1.5rem 2rem; }
    .hp27 .hero-media { min-height:240px; }
    .hp27 .hero-media .ph { border-radius:0 0 160px 0; }   /* image stays first (order:-1) on phones too */
}
@media (max-width: 767px) {
    .hp27 .feature-grid { grid-template-columns:1fr; }
    .hp27 .quick { grid-template-columns:1fr; gap:0; }
    .hp27 .grid4 { grid-template-columns:1fr; }
    .hp27 .sec-head a { font-size:.9rem; }
}
@media (prefers-reduced-motion: reduce) { .hp27 * { transition:none !important; } }