@import '/shared.css';

:host {
  max-width: 1000px;

  --image-size-coeff: 1;
}

.blurb {
  display: grid;
  grid-gap: var(--the-binah-tree-gap);
  grid-template-columns: calc(337px * var(--image-size-coeff)) 1fr;
  grid-template-areas:
    'header header'
    'image blurb'
    'quote quote'
    'sample sample'
    'actions actions';
}

.blurb::part(heading) {
  grid-area: header;
}

.blurb::part(content) {
  display: contents;
}

.blurb::part(actions) {
  grid-area: actions;
}

.blurb picture {
  grid-area: image;
  margin-inline-start: var(--the-binah-tree-gap);
  align-self: center;
  justify-self: center;
}

.blurb picture,
.blurb picture img {
  width: calc(337px * var(--image-size-coeff));
  height: calc(512px * var(--image-size-coeff));
}

.blurb section {
  grid-area: blurb;
  margin-inline-end: var(--the-binah-tree-gap);
}

.blurb blockquote {
  grid-area: quote;
}

.sample {
  grid-area: sample;
  display: grid;
  grid-auto-flow: row;
  grid-gap: var(--the-binah-tree-gap);
  background: var(--the-binah-tree-secondary);
  padding: var(--the-binah-tree-gap);
  text-align: center;
  margin: 0 var(--the-binah-tree-gap);
  border-radius: 4px;
  justify-content: center;
  grid-template-columns: 1fr;
}

.sample figcaption {
  font-family: var(--the-binah-tree-header-font);
  color: var(--the-binah-tree-heading-color, var(--the-binah-tree-body-color));
  font-size: 18px;
}

.sample audio {
  box-shadow: var(--the-binah-tree-card-shadow);
  border-radius: 90px;
}

@media (max-width: 500px) {
  .blurb {
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'image'
      'blurb'
      'quote'
      'sample'
      'actions';
  }

  .blurb picture,
  .blurb section {
    margin-inline-start: var(--the-binah-tree-gap);
    margin-inline-end: var(--the-binah-tree-gap);
  }
}

@media (max-width: 700px) {
  :host {
    --image-size-coeff: 0.5;
  }
}