/* material — ported verbatim from the approved static site's inline <style>. */

/* ===== Body (flow) — black canvas + microscopy bleed image (like eventos) ===== */
.material{background:#000 url('../../img/material-fundo.webp') center top / 100% auto no-repeat}

/* ===== Section title 1 (canvas y636) — .reg base handles top; rules per-page ===== */
/* short rule over line1, long rule under line2 — copied from galeria's offsets */
.reg__rule--left{top:12.75rem;right:calc(100% - var(--inset) + 2.5rem);left:0;width:auto}
.reg__rule--right{top:16.8rem;left:calc(var(--inset) + 27rem);right:calc(-1 * (50vw - 56.25rem));}

/* ===== Section title 2 "Sites / referências" (canvas y1444) — scoped rule offsets ===== */
/* line1 "Sites" is short, so the long right rule starts closer than title1 */
.reg--sites{padding-top:1.1875rem}
/* rules re-based to the reduced padding-top: line1 ~y+2rem, line2 ~y+6rem */
.reg--sites .reg__rule--left{top:3.25rem;right:calc(100% - var(--inset) + 2.5rem);left:0;width:auto}
.reg--sites .reg__rule--right{top:7.3rem;left:calc(var(--inset) + 22rem);right:calc(-1 * (50vw - 56.25rem));}

/* ===== Search bar (canvas bbox l807 t776 r1449 b814, 642x38, radius 17, teal pill) ===== */
/* full-inset container; pill pushed to the right edge (right margin 5.625rem = 90px inside inset) */
.matsearch{margin:0.5625rem var(--inset) 0;display:flex}
.matsearch__field{position:relative;display:flex;align-items:center;width:40.125rem;max-width:100%;margin-left:auto;margin-right:5.625rem;height:2.375rem;background:#4FBAAD;border-radius:1.0625rem;padding:0 1.25rem}
.matsearch__icon{flex:0 0 auto;width:1.4rem;height:1.4rem;color:#000}
.matsearch__input{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;font-family:var(--font);font-weight:400;font-size:1.46rem;color:#000;letter-spacing:var(--track);padding-left:0.9rem}
.matsearch__input::placeholder{color:#000;text-transform:uppercase;opacity:1}
.matsearch__submit{flex:0 0 auto;order:-1;display:flex;align-items:center;justify-content:center;border:0;background:none;padding:0;cursor:pointer}

/* ===== Download cards (canvas: button-row top y915, thumb 275x251 from y951, x 259/594/929/1264) ===== */
.matcards{display:grid;grid-template-columns:repeat(4,19.0625rem);column-gap:1.875rem;margin:6.3125rem var(--inset) 0;padding:0;list-style:none}
.matcard{display:block;text-decoration:none;color:inherit;position:relative;padding-top:2.25rem}
/* download button overlaps the top edge of the card, right-aligned to card (83x83 at y915) */
.matcard__download{position:absolute;top:0;right:0;width:5.1875rem;height:5.1875rem;border-radius:50%;background:#65C4B9;display:flex;align-items:center;justify-content:center;z-index:2}
.matcard__download-icon{width:2rem;height:2.2rem;color:#fff}
/* teal thumb square starts 36px below the button-row top; 275x251, flush left, 22px on right */
.matcard__thumb{position:relative;margin:0 1.875rem 0 0;height:15.6875rem;background:var(--green);border-radius:1.06rem;display:flex;align-items:center;justify-content:center}
.matcard__logo{width:60%;height:auto;display:block}
.matcard__label{display:block;margin:1.75rem 0 0;width:10.75rem;font-family:var(--font);font-weight:400;font-size:1.485rem;line-height:1.18;color:#fff;text-transform:uppercase;letter-spacing:var(--track)}
.matcard:hover .matcard__thumb{filter:brightness(1.08)}
.matcard:hover .matcard__label{text-decoration:underline}

/* ===== Pagination (canvas y1362) — two teal chevrons centered ===== */
.matpager{display:flex;justify-content:center;gap:3.75rem;margin:3rem 0 0}
.matpager__btn{border:0;background:none;padding:0.5rem;cursor:pointer;color:var(--teal);display:flex;align-items:center;justify-content:center}
.matpager__icon{width:1.9rem;height:2.9rem}
.matpager__btn:hover{color:#fff}

/* ===== Sites reference rows (canvas: l258 r1039 =781 wide, 38 tall, radius 17, ~8px gaps) ===== */
.matsites{margin:2.9125rem var(--inset) 6.5625rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.5625rem;max-width:100%}
.matsites__row{display:flex;align-items:center;width:48.8125rem;max-width:100%;height:2.375rem;border-radius:1.0625rem;padding-left:1.5rem;font-family:var(--font);font-weight:400;font-size:1.6rem;color:#000;text-decoration:none;text-transform:uppercase;letter-spacing:var(--track);transition:filter 0.15s ease}
.matsites__row{background:#4FBAAD}
.matsites li:nth-child(even) .matsites__row{background:#319B77}
.matsites__row:hover{filter:brightness(1.08)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Responsive ===== */
@media (max-width:60rem){
  .material{background-position:center top;background-size:cover}
  .reg{padding-top:3rem}
  .reg--sites{padding-top:3rem}
  .reg__rule--left{display:none}
  .reg__rule--right{position:static;display:block;width:100%;margin-top:1rem;left:auto;right:auto}
  .reg--sites .reg__rule--left{display:none}
  .reg--sites .reg__rule--right{position:static;display:block;width:100%;margin-top:1rem;left:auto;right:auto}
  .reg__line2{padding-left:1.5rem}
  .matsearch{margin-inline:6%}
  .matsearch__field{width:100%;margin-right:0}
  .matcards{grid-template-columns:repeat(2,1fr);column-gap:1.5rem;margin-inline:6%}
  .matcard__thumb{margin-right:0}
  .matsites{margin-inline:6%}
  .matsites__row{width:100%}
}
@media (max-width:30rem){
  .matcards{grid-template-columns:1fr}
}