/* layout.css — page & layout rules only (no shared card visuals) */

/* Columns */
.quotecolumn      { width: 330px; margin: 0 auto; }
.contentcolumn    { width: 360px; margin: 0 auto; }
.emailcolumn      { width: 400px; margin: 0 auto; }
.tvcolumn         { width: 300px; margin: 0 auto; }
.tvcontentcolumn  { width: 350px; margin: 0 auto; }
.haikucolumn      { width: 330px; margin: 0 auto; }

/* Quotes list: render perf + reserved height */
.quotecolumn .card {
  content-visibility: auto;
  contain-intrinsic-size: 0 140px;
}
.haikucolumn .card {
  content-visibility: auto;
  contain-intrinsic-size: 0 140px;
}
@media (min-width: 700px)  { .quotecolumn .card { contain-intrinsic-size: 0 120px; } }
@media (min-width: 700px)  { .haikucolumn .card { contain-intrinsic-size: 0 120px; } }
@media (min-width: 1100px) { .quotecolumn .card { contain-intrinsic-size: 0 100px; } }
@media (min-width: 1100px) { .haikucolumn .card { contain-intrinsic-size: 0 100px; } }

/* Utilities */
.fixed-container { position: relative; width: 200px; height: 200px; }
.is-hidden       { display: none; }

.random-art-container { width: 75%; margin: 0 auto; display: block; }

/* Copy group layout (used on quotes pages with iframes) */
.copy-group {
  display: grid;
  gap: 32px;
  justify-content: center;
  padding-top: 40px;
}
.copy-group iframe {
  display: block;
  border: 0;
  outline: none;
  box-shadow: none;
}
.copy-group iframe:focus,
.copy-group iframe:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Quotes page minor tweaks */
.q-sub1 { margin-bottom: 3px; }
.q-sub2 { margin-top: 3px; }

/* Static hero/feature images mapped to classes */
.breakfastdates {
  max-width: 1125px;
  width: 75%;
  height: auto;
  content: url("/assets/images/breakfast_dates_l.jpg");
}
.initsmark { content: url("/assets/icons/initsmark_l.png"); }
.logomark  { content: url("/assets/icons/logomark_l.png"); }

.therealyou {
  max-width: 1125px;
  width: 80%;
  height: auto;
  content: url("/assets/images/the_real_you_l.jpg");
}
.yourperson {
  max-width: 1125px;
  width: 80%;
  height: auto;
  content: url("/assets/images/your_person_l.jpg");
}
.findapartner {
  max-width: 1125px;
  width: 80%;
  height: auto;
  content: url("/assets/images/find_a_partner_l.jpg");
}
.believeinmagic {
  max-width: 1125px;
  width: 80%;
  height: auto;
  content: url("/assets/images/believe-in-magic_l.jpg");
}