/* AI Image Generator landing, laid out along raphael.app's lines: the headline straight
   under the navigation, a prompt card that works like a workspace, a large wall of ideas,
   and a long two-column FAQ. Colours come from the Image Studio theme it sits on.

   Link colours are scoped under body.studio-dark because the theme's own
   "body.studio-dark a { color: inherit }" would otherwise outrank a single class. */

/* ---- hero: sits directly under the nav, headline at full size ------------------- */
.rl-hero { padding: 26px 16px 18px; }
.rl-hero h1 {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  font-weight: 900;
  margin: 0 0 10px;
  text-wrap: balance;
}
.rl-hero p { font-size: clamp(15px, 1.5vw, 18px); margin: 0 0 16px; }

/* ---- the composer: a workspace, not just a text box ---------------------------- */
.rl-composer { max-width: 1140px; }
.rl-modes {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid #4a3a2e;
  overflow-x: auto;
  scrollbar-width: none;
}
.rl-modes::-webkit-scrollbar { display: none; }
body.studio-dark .rl-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px 12px;
  font: 600 14px Inter, system-ui, sans-serif;
  color: #a8927f;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
body.studio-dark a.rl-mode:hover { color: #f3e6d8; border-bottom-color: #6b5543; }
body.studio-dark .rl-mode-on { color: #fff4e6; border-bottom-color: #f59e0b; }
.rl-mode svg { color: #fbbf24; flex: none; }
.rl-count {
  margin-left: auto;
  padding-left: 14px;
  font: 500 12px Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #8f7a68;
  white-space: nowrap;
}
.rl-composer textarea { min-height: 150px; }

.rl-note {
  max-width: 1140px;
  margin: 12px auto 0;
  padding: 0 18px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: #9c8674;
}

/* ---- "Get inspired": a masonry wall of ideas ---------------------------------- */
.rl-inspire { max-width: 1240px; margin: 56px auto 0; padding: 0 20px; }
.rl-head { text-align: center; margin-bottom: 26px; }
.rl-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -1px;
  font-weight: 900;
  margin: 0 0 8px;
}
.rl-head p { color: var(--muted, #b9a390); margin: 0 auto; max-width: 60ch; }

.rl-wall { column-count: 4; column-gap: 16px; }
body.studio-dark .rl-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  break-inside: avoid;
  margin: 0 0 16px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #fff4e6;
  border: 1px solid #4a3a2e;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
body.studio-dark .rl-tile:hover { transform: translateY(-3px); border-color: #f59e0b88; box-shadow: 0 16px 40px #0006; }
body.studio-dark .rl-tile:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
.rl-tile em { font: 700 11px Inter, system-ui, sans-serif; letter-spacing: .6px; text-transform: uppercase; font-style: normal; color: #d8bfa6; }
.rl-tile strong { font-size: 17px; line-height: 1.25; }
.rl-tile span { font-size: 13.5px; line-height: 1.5; color: #d9c7b5; }
.rl-tile b { font: 700 13px Inter, system-ui, sans-serif; color: #fbbf24; margin-top: 2px; }

/* the picture tiles: the photo first, then its prompt underneath, so the image is
   never buried under text on a narrow column */
body.studio-dark .rl-img { background: #221913; gap: 0; }
.rl-img img { display: block; width: 100%; height: auto; aspect-ratio: 1122 / 1402; object-fit: cover; }
.rl-cap { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.rl-cap span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* the prompt-only tiles: each style gets its own colour, and shape sets the height */
.rl-txt { padding: 20px 18px 18px; justify-content: flex-end; }
.rl-shape-portrait  { min-height: 280px; }
.rl-shape-square    { min-height: 210px; }
.rl-shape-landscape { min-height: 170px; }
.rl-photo      { background: linear-gradient(160deg, #3b2f25, #241b15); }
.rl-cinema     { background: linear-gradient(160deg, #2a2233, #150f1d); }
.rl-anime      { background: linear-gradient(160deg, #3a2748, #1c2446); }
.rl-watercolor { background: linear-gradient(160deg, #2c3a36, #1e2a2c); }
.rl-oil        { background: linear-gradient(160deg, #3d2a1e, #2a1a14); }
.rl-render     { background: linear-gradient(160deg, #26324a, #1a1f33); }
.rl-pixel      { background: linear-gradient(160deg, #22381f, #152713); }

.rl-wall-note { text-align: center; font-size: 13px; color: #9c8674; margin: 6px 0 0; }
body.studio-dark .rl-wall-note a { color: #fbbf24; text-decoration: underline; text-underline-offset: 3px; }

/* ---- FAQ: two columns on a wide screen ---------------------------------------- */
.rl-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; align-items: start; }

/* ---- smaller screens ------------------------------------------------------------ */
@media (max-width: 1100px) { .rl-wall { column-count: 3; } }
@media (max-width: 760px) {
  .rl-inspire { margin-top: 40px; padding: 0 14px; }
  .rl-wall { column-count: 2; column-gap: 12px; }
  body.studio-dark .rl-tile { margin-bottom: 12px; }
  .rl-faq-grid { grid-template-columns: 1fr; }
  .rl-count { display: none; }
  /* the tabs scroll sideways; fade the right edge so it is clear there is more */
  .rl-modes { mask-image: linear-gradient(90deg, #000 82%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); }
  /* two narrow columns: keep each idea to a few lines */
  .rl-txt span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .rl-cap span { -webkit-line-clamp: 2; }
  .rl-tile strong { font-size: 15px; }
  .rl-tile span { font-size: 13px; }
  .rl-txt { padding: 16px 14px 14px; }
  .rl-cap { padding: 12px 13px 14px; }
  .rl-shape-portrait  { min-height: 0; }
  .rl-shape-square    { min-height: 0; }
  .rl-shape-landscape { min-height: 0; }
}

/* ---- feature cards: an icon leads each one, as on raphael ----------------------- */
.rl-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  color: #fbbf24;
  background: #f59e0b14;
  border: 1px solid #f59e0b40;
}

/* ---- story block: the three real examples fanned out ---------------------------- */
.rl-fan {
  position: relative;
  height: 470px;
  display: grid;
  place-items: center;
}
.rl-fan img {
  position: absolute;
  width: min(58%, 300px);
  height: auto;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 26px 70px #000a, 0 0 0 1px #ffffff14;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.rl-fan img:nth-child(1) { transform: translateX(-46%) rotate(-9deg); }
.rl-fan img:nth-child(2) { transform: translateX(46%) rotate(8deg); }
.rl-fan img:nth-child(3) { transform: translateY(-4%); z-index: 2; }
.story-section:hover .rl-fan img:nth-child(1) { transform: translateX(-56%) rotate(-12deg); }
.story-section:hover .rl-fan img:nth-child(2) { transform: translateX(56%) rotate(11deg); }
@media (prefers-reduced-motion: reduce) { .rl-fan img { transition: none; } }
@media (max-width: 760px) {
  .rl-fan { height: 340px; }
  .rl-fan img { width: min(52%, 210px); }
}