/* Merkkisivu (Pen: Merkki kevyt, Merkki laaja). Merkkihakemisto on lohkon brand-index oma tyyli.
   Listaus, suodattimet ja kortit tulevat shop-catalog.css:stä. */

.mt-brandpage{padding-block-end:var(--mt-space-section)}
.mt-brandsection{padding-block-start:var(--mt-space-section)}
.mt-brandsection>.mt-h2{margin-block-end:var(--mt-space-md)}
.mt-brandsection .mt-grid{margin-block-start:var(--mt-space-sm)}

/* Kevyt otsikko */
.mt-brandhead{padding-block:var(--mt-space-md) 0}
.mt-brandhead__layout{display:grid;gap:var(--mt-space-md);align-items:start}
.mt-brandhead__copy{display:grid;gap:.75rem;min-inline-size:0}
.mt-brandhead__title{margin:0;font:400 var(--mt-fs-display)/1.1 var(--mt-font-display);letter-spacing:-.0625rem;overflow-wrap:anywhere}
.mt-brandhead__lead{margin:0;max-inline-size:51rem;font-size:var(--mt-fs-xl);line-height:1.6;color:var(--mt-text)}
.mt-brandhead__logo{display:grid;place-items:center;inline-size:9rem;block-size:6rem;padding:var(--mt-space-xs);border-radius:var(--mt-radius);background:var(--mt-mist)}
.mt-brandhead__logo img{inline-size:100%;block-size:100%;object-fit:contain}
.mt-brandhead .mt-askbox{background:var(--mt-blush)}
.mt-brandhead .mt-askbox__icon img{inline-size:100%;block-size:100%;border-radius:var(--mt-radius-pill);object-fit:cover}
.mt-askbox{display:flex;align-items:center;gap:var(--mt-space-sm);padding:var(--mt-space-sm);border-radius:var(--mt-radius);background:var(--mt-blush)}
.mt-askbox__icon{display:grid;flex:none;place-items:center;inline-size:3.25rem;block-size:3.25rem;border-radius:var(--mt-radius-pill);background:var(--mt-white);color:var(--mt-coral-strong);overflow:hidden}
.mt-askbox__copy{display:grid;gap:.125rem;margin:0;font-size:var(--mt-fs-md);color:var(--mt-muted)}
.mt-askbox__copy strong{font-weight:500;font-size:var(--mt-fs-lg);color:var(--mt-ink)}

/* Laaja hero */
.mt-brandhero{padding-block:var(--mt-space-sm) 0}
.mt-brandhero__box{display:grid;overflow:hidden;border-radius:var(--mt-radius);background:var(--mt-navy);color:var(--mt-white)}
.mt-brandhero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem;padding:var(--mt-space-xl) var(--mt-space-lg)}
.mt-brandhero__title{margin:0;font:400 var(--mt-fs-display)/1.1 var(--mt-font-display);letter-spacing:-.0625rem;overflow-wrap:anywhere}
.mt-brandhero__lead{margin:0;max-inline-size:37rem;font-size:var(--mt-fs-xl);line-height:1.6;color:var(--mt-on-navy-soft)}
.mt-brandhero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mt-space-sm) var(--mt-space-md);margin:0}
.mt-brandhero__media{min-block-size:15rem;position:relative}
.mt-brandhero__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.mt-brandanchors{padding-block-start:var(--mt-space-md)}
.mt-brandanchors ul{display:flex;flex-wrap:wrap;gap:.625rem;margin:0;padding:0;list-style:none}

/* Referenssit ja esittely */
.mt-brandrefs{display:grid;gap:var(--mt-space-md);margin:0;padding:0;list-style:none}
.mt-brandabout{display:grid;gap:var(--mt-space-sm);padding:var(--mt-space-xl);border-radius:var(--mt-radius);background:var(--mt-blush)}
.mt-brandabout .mt-prose{max-inline-size:54rem}

@container (min-width:48rem){
  .mt-brandhead__layout{grid-template-columns:minmax(0,1fr) auto;gap:var(--mt-space-xl)}
  .mt-brandhead__logo{grid-column:2;grid-row:1}
  .mt-brandhead .mt-askbox{grid-column:1/-1;max-inline-size:25rem}
  .mt-brandrefs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (min-width:64rem){
  .mt-brandhero__box{grid-template-columns:minmax(0,704fr) minmax(0,560fr);min-block-size:25rem}
  .mt-brandhero__copy{justify-content:center;padding:var(--mt-space-xl) 3.5rem}
}

/* Referenssikortti (jaettu pohja; sen tyyli on muuten vain reference-list-lohkossa) */
.mt-brandrefs .mt-ref{position:relative;display:flex;flex-direction:column;gap:.875rem;block-size:100%}
.mt-brandrefs .mt-ref:has(.mt-ref__link:focus-visible){outline:.1875rem solid var(--mt-coral);outline-offset:.25rem;border-radius:var(--mt-radius)}
.mt-brandrefs .mt-ref__media{overflow:hidden;border-radius:var(--mt-radius);background:var(--mt-mist);aspect-ratio:27/16}
.mt-brandrefs .mt-ref__media img{display:block;inline-size:100%;block-size:100%;object-fit:cover;transition:transform 400ms ease}
.mt-brandrefs .mt-ref:hover .mt-ref__media img{transform:scale(1.03)}
.mt-brandrefs .mt-ref__body{display:flex;flex-direction:column;gap:.375rem;align-items:flex-start}
.mt-brandrefs .mt-ref__tag{margin:0;font:500 var(--mt-fs-2xs)/1.3 var(--mt-font-display);letter-spacing:var(--mt-tracking-caps);text-transform:uppercase;color:var(--mt-coral-strong)}
.mt-brandrefs .mt-ref__title{margin:0;font:400 var(--mt-fs-h4)/1.15 var(--mt-font-display);letter-spacing:-.03125rem;color:var(--mt-ink);text-wrap:balance}
.mt-brandrefs .mt-ref__link{display:inline-block;min-block-size:1.5rem;color:inherit;text-decoration:none}
.mt-brandrefs .mt-ref__link::after{content:"";position:absolute;inset:0}
.mt-brandrefs .mt-ref__link:focus-visible{outline:none}
.mt-brandrefs .mt-ref__link:hover{text-decoration:underline;text-underline-offset:.2em}
.mt-brandrefs .mt-ref__text{margin:0;font-size:var(--mt-fs-md);line-height:1.5;color:var(--mt-text)}
.mt-brandrefs .mt-ref__cta{margin-block-start:.625rem}
.mt-brandrefs .mt-ref--plain{gap:0;padding:var(--mt-space-lg);border-radius:var(--mt-radius);background:var(--mt-mist)}
.mt-brandrefs .mt-ref--plain .mt-ref__body{gap:.5rem}
.mt-listing>.mt-brandsection__title{margin-block-end:var(--mt-space-md)}