/* Private design mock, 10 Nov 2026 (Melbourne time).
   Marley Spoon showcase treatments A and B. Not for production.
   Tokens match css/site.css: cream, paper, paddock, ink, muted, line, radius, shadow. */

/* ----- Treatment A: recommendation card on the meal-kit guide ----- */
.marley-rec{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  min-width:0;
}
.marley-rec__body,
.marley-rec__actions{
  min-width:0;
  padding:16px 16px 0;
}
.marley-rec__actions{padding:16px}
.marley-rec__logo{
  display:block;
  width:160px;
  max-width:100%;
  height:auto;
  aspect-ratio:1000/500;
  object-fit:contain;
  object-position:left center;
  margin:0 0 12px;
  border-radius:4px;
}
.marley-rec p{
  margin:0 0 1em;
  overflow-wrap:break-word;
}
.marley-rec p:last-child{margin-bottom:0}
.marley-rec__media{
  margin:0;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.marley-rec__media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:60% 50%;
}
.marley-rec__media figcaption{
  font-size:13px;
  line-height:1.45;
  color:#5b5548;
  padding:8px 16px 0;
  margin:0;
}
.marley-rec a.cta-link.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:normal;
  max-width:100%;
  text-align:center;
  padding:10px 20px;
  align-self:flex-start;
  text-decoration:none;
}
@media(min-width:700px){
  .marley-rec{
    display:grid;
    grid-template-columns:minmax(0,45%) minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:stretch;
  }
  .marley-rec__media{
    grid-column:1;
    grid-row:1 / span 2;
    background:var(--paper);
  }
  .marley-rec__media figcaption{
    color:#5b5548;
    background:var(--paper);
    padding:8px 14px 12px;
  }
  .marley-rec__body{
    grid-column:2;
    grid-row:1;
    padding:24px 24px 0;
  }
  .marley-rec__actions{
    grid-column:2;
    grid-row:2;
    padding:12px 24px 24px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .marley-rec__logo{
    width:200px;
    margin-bottom:16px;
  }
}


/* marleyshowcase-20261110b: at 768px+ keep the Cooking photo at its native 1200:628
   frame, figcaption directly under it, spare card height empty below the figure.
   Under-768 stays 4:3, object-position 60% 50%. */
@media(min-width:768px){
  .marley-rec__media{align-self:start}
  .marley-rec__media img{
    aspect-ratio:1200/628;
    height:auto;
    object-fit:cover;
  }
}

/* Figcaption #5b5548 on --paper (#FBF6EE) matches the site's photo-credit pair (AA). */

@media (max-width:400px){
  .marley-rec a.cta-link.btn{white-space:normal;text-align:center;max-width:100%}
}

/* ----- Treatment B: Hemingway/Sherlock copy on the hub and lunchbox guide ----- */
/* Cream/paper card, paddock-green left rule, Fraunces heading, Inter body.
   Italic affiliate note uses --muted (#55615A) on --paper: 6.0:1, AA at 16px. */
.hub-note{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:6px solid var(--paddock);
  border-radius:16px;
  padding:16px 18px;
  margin:24px 0 8px;
  min-width:0;
}
.hub-note h2{
  font-family:var(--font-head);
  font-variation-settings:"SOFT" 50,"WONK" 0;
  font-weight:700;
  font-size:1.5rem;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--paddock);
  margin:0 0 10px;
}
.hub-note p{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  margin:0 0 1em;
  overflow-wrap:break-word;
}
.hub-note p:last-child{margin-bottom:0}
.hub-note em{
  font-style:italic;
  color:var(--muted);
  font-weight:400;
}
.hub-note a{overflow-wrap:break-word}
@media(min-width:700px){
  .hub-note{padding:20px 24px}
  .hub-note h2{font-size:1.75rem}
}

/* Lunchbox section 9 uses the guide's existing h2/p styles. No extra card. */

/* Optional extra: a small Related-guides-style pair after each copy block.
   Site card art only — no Marley logo or photo. Can be dropped. */
.showcase-related{
  margin:16px 0 8px;
  min-width:0;
}
.showcase-related__label{
  margin:0 0 10px;
}
.showcase-related__tiles{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}
.showcase-related__tile{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  box-shadow:var(--shadow);
}
.showcase-related__tile:focus-visible{
  outline:3px solid var(--travel-text);
  outline-offset:2px;
}
.showcase-related__thumb{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
}
.showcase-related__body{
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.showcase-related__body .tag{flex:none}
.showcase-related__tile h3{
  font-family:var(--font-head);
  font-size:1.05rem;
  line-height:1.25;
  margin:0;
  overflow-wrap:anywhere;
}
.showcase-related__credits{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.45;
  color:#5b5548;
  overflow-wrap:anywhere;
}
.showcase-related__credits a{
  color:inherit;
  text-decoration:underline;
}
@media(min-width:700px){
  .showcase-related__tiles{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}

/* The label uses the site's .kicker styles (muted on cream/paper, AA). */