/* Auckland E-Waste Recycling — How It Works page styles.
   Loaded only on /how-it-works (linked from pages/how-it-works.php).
   All selectors are prefixed `.hiw-` to avoid clashing with shared components. */

/* Material Symbols glyph helper (subset font linked in how-it-works.php) */
.msym {
    font-family: 'Material Symbols Outlined';
    font-weight: normal; font-style: normal; line-height: 1;
    letter-spacing: normal; text-transform: none; white-space: nowrap;
    direction: ltr; -webkit-font-smoothing: antialiased;
    display: inline-block; vertical-align: middle;
}

.hiw-block { padding: clamp(2.5rem, 5vw, 4rem) 0; }

/* ───────────── Intro hero ───────────── */
.hiw-hero { text-align: center; max-width: 48rem; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.hiw-hero h1 { font-size: clamp(2rem, 3.4vw + 1rem, 3rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1rem; }
.hiw-hero p { font-size: 1.125rem; color: var(--color-text-light); }

/* ───────────── 5-step process ───────────── */
.hiw-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.hiw-step { position: relative; text-align: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; transition: border-color .3s, box-shadow .3s; }
.hiw-step:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.hiw-step-icon { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; border-radius: 999px; background: #adedd3; color: var(--color-primary); display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; }
.hiw-step:hover .hiw-step-icon { background: var(--color-primary); color: #fff; }
.hiw-step-icon .msym { font-size: 1.9rem; }
.hiw-step h3 { font-size: 1rem; font-weight: 600; margin-bottom: .4rem; }
.hiw-step p { font-size: .9rem; color: var(--color-text-light); }
/* connector line between steps (only on the wide 5-up row) */
.hiw-step:not(:last-child)::after { content: ''; position: absolute; top: 3.5rem; right: -.75rem; width: 1.5rem; height: 2px; background: var(--color-border); display: none; }

/* ───────────── A closer look — photo mosaic ───────────── */
.hiw-look-head { text-align: center; max-width: 46rem; margin: 0 auto 1.75rem; }
.hiw-look-head h2 { font-size: clamp(1.6rem, 2.5vw, 2rem); margin-bottom: .5rem; }
.hiw-look-head p { color: var(--color-text-muted); }

.hiw-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1rem; height: clamp(26rem, 42vw, 34rem); }
.hiw-tile { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.hiw-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.hiw-tile:hover img { transform: scale(1.06); }
.hiw-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,24,39,.72) 0%, rgba(17,24,39,.15) 45%, rgba(17,24,39,0) 70%); }
.hiw-tile-cap { position: absolute; left: .9rem; right: .9rem; bottom: .8rem; z-index: 1; color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.hiw-tile--lg { grid-column: 1 / 3; grid-row: 1 / 3; }
.hiw-tile--lg .hiw-tile-cap { font-size: 1.1rem; left: 1.1rem; bottom: 1rem; }

/* ───────────── Email CTA strip ───────────── */
.hiw-cta { background: var(--color-primary); color: #fff; border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.hiw-cta h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .25rem; }
.hiw-cta p { font-size: .95rem; opacity: .9; }
.hiw-cta .btn { background: #fff; color: var(--color-primary); white-space: nowrap; }
.hiw-cta .btn:hover { background: var(--color-bg-alt); box-shadow: var(--shadow-md); }
.hiw-cta .btn .msym { font-size: 1.2rem; }

/* ───────────── FAQ accordion ───────────── */
.hiw-faq { max-width: 56rem; margin: 0 auto; }
.hiw-faq h2 { text-align: center; font-size: clamp(1.6rem, 2.5vw, 2rem); margin-bottom: 1.5rem; }
.hiw-faq-item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1rem; }
.hiw-faq-item summary { padding: 1rem 1.25rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 600; font-size: 1.05rem; transition: background .15s; }
.hiw-faq-item summary::-webkit-details-marker { display: none; }
.hiw-faq-item summary:hover { background: var(--color-bg-alt); }
.hiw-faq-item summary .msym { color: var(--color-text-muted); transition: transform .2s; }
.hiw-faq-item[open] summary .msym { transform: rotate(180deg); }
.hiw-faq-body { padding: 0 1.25rem 1.25rem; color: var(--color-text-light); font-size: .95rem; }

/* ───────────── Responsive ───────────── */
@media (min-width: 1024px) {
    .hiw-step:not(:last-child)::after { display: block; }
}
@media (max-width: 1024px) {
    .hiw-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .hiw-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 1fr; height: auto; }
    .hiw-tile { aspect-ratio: 1 / 1; }
    .hiw-tile--lg { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
    .hiw-steps { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .hiw-mosaic { grid-template-columns: 1fr; }
    .hiw-tile, .hiw-tile--lg { aspect-ratio: 16 / 10; }
}