/* ============================================================
   IQ UP Deep: home page layout (index.html)
   Layout only: sizing, cropping, spacing. Colors, fonts, buttons,
   borders and section backgrounds come from iqup.css.
   ============================================================ */

/* Block 1 (Hero): the H1 is longer than the template's two short lines.
   Scale it with the viewport so "Online AI Learning Platform" / "for Kids
   & Teens" stays on two lines from tablet up (the template's fixed 90px
   wrapped it to three). Phones keep the template's 40px. */
@media (min-width: 769px) {
  .page-home .crev-header .caption h1 { font-size: clamp(40px, 5.4vw, 80px); }
}

/* Block 2 (Innovation): homeabout.mp4 is 750x1050 with captions baked in
   near its top and bottom edges. Size the frame to the clip's own ratio,
   at most 520px tall, so cover-fitting crops nothing. The corners are
   circular arcs with a radius of 45% of the width (45% of the width is
   32.143% of the height): a full semicircle would clip the ends of the top
   caption. The outer ring follows the same curve 31px further out
   (30px padding + 1px border): 45% of the inner width + 31px, rewritten
   in percentages of the ring's own width and height. */
.page-home .about-author .profile-img {
  width: 100%;
  max-width: calc(520px * 750 / 1050 + 62px);
  border-radius: calc(45% + 3.1px) / calc(32.143% + 11.07px);
}
.page-home .about-author .profile-img .img {
  height: auto;
  aspect-ratio: 750 / 1050;
  border-radius: 45% / 32.143%;
}

/* Block 3 (Does This Sound Familiar?): the four cards share row tracks
   (CSS subgrid) from tablet up, so every title takes the height of the
   tallest one and the icons line up in one row; the cards stay equal
   height. Stacked cards get their gap from row-gap on the row: a margin on
   the card is swallowed by the theme's equal-height rule (height: 100%). */
.page-home .home-disconnect .row.sm-marg { row-gap: 30px; }
@media (min-width: 768px) {
  .page-home .home-disconnect .row.sm-marg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-home .home-disconnect .row.sm-marg > [class*="col-"] {
    width: auto;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .page-home .home-disconnect .item-box {
    height: auto;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .page-home .home-disconnect .item-box .icon { margin-top: 0; }
}
@media (min-width: 992px) {
  .page-home .home-disconnect .row.sm-marg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Block 4 (The Insight): homewhat.mp4 is square (500x500) with a baked
   background a shade lighter than the page and a frame line that ripples
   out to the clip's edge. Show it whole at 1:1 and fade its outer 7% to
   transparent so the clip has no visible edge and the ripple dies out. */
.page-home .home-insight .imgs.home-media {
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.page-home .home-insight .imgs.home-media video {
  min-height: 0;
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
    linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
    linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
/* the template hides .intro-skill .imgs below 992px (it was an absolutely
   positioned collage); this single video reads fine stacked under the text */
@media (max-width: 992px) {
  .page-home .home-insight .imgs.home-media { display: block; }
}

/* Block 6 (Team): gap between stacked cards, set on the row for the same
   reason as block 3. row-gap only separates wrapped lines, so cards that
   share a line keep equal heights. */
.page-home .team-crev .container > .row { row-gap: 50px; }

/* Blocks 8 and 12 (Why IQ UP Deep, Business Model): home2-* and home12-*
   are 600x210 pill banners with the pill already drawn in, so show each one
   whole instead of cropping it into the template's fixed 140px frame. */
.page-home .home-skills .item .img,
.page-home .home-revenue .item .img { height: auto; }
.page-home .home-skills .item .img img,
.page-home .home-revenue .item .img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Glimpse: each clip is a photo circle (about 405px across, centred) on a
   baked background a shade lighter than the page. Clip the tile to a circle
   and scale the clip by 450/400 so the tile edge falls just inside the
   drawn circle: only the photo shows, straight on the page. */
.page-home .startup-glimpse .glimpse-video {
  border-radius: 50%;
  background: transparent;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
.page-home .startup-glimpse .glimpse-video video { transform: scale(1.125); }

/* Block 13 (Traction): home13.png is square with a baked #14460A
   background, so it sits unframed on the primary background. */
.page-home .home-traction .traction-media { max-width: 560px; margin: 0 auto; }
.page-home .home-traction .traction-media img { width: 100%; height: auto; display: block; }

/* Block 14 (The Next Stage): the template pulls the image row 50px up
   under the three-line heading, which puts the top-right corner of
   home14.png over the outlined "Stage". Keep them apart (as investors.css
   does for the same block). */
@media (min-width: 992px) {
  .page-home .home-next-stage .sec-head { margin-bottom: 30px; }
}
/* The template sizes that heading at 8vw, which drops below the size of
   ordinary section headings on phones. */
@media (max-width: 767px) {
  .page-home .home-next-stage .sec-head h2 { font-size: 13vw; }
}