/* ============================================================================
   06 · de dos imagenes a un anuncio.  Family: media-polaroid-arc.
   The montage table, straight on the desk: NO felt board (founder's note at
   gate 1), so every object lies on the oak and carries its own contact
   shadow. Left, the finished ad as one print with two labels under it; right,
   the four steps as polaroids in a shallow arc, and under the arc the sheet
   that says what comes with the example plus the budget caveat.

   GRID at 1440.  The wrap is --content-max wide inside --desk-pad, so the
   readable band is 1200px: a 300px left column, --gap-object (49px) and an
   851px right column. Four polaroids and three 22px gaps fit that column at
   196px each, which is the widest the four can be and still read as one arc
   instead of four cards.
       strip      680x132
       print      280x498  (9/16, --pw)
       polaroid   196 wide, 308 / 357 / 324 / 340 tall: a 168px square window
                  and a note that grows with its own two lines of copy
       step tag   52 tall, 14px of it over the polaroid's bottom edge
       inc sheet  472x175, budget tag 330x105, side by side under the arc
       section    1068px tall
   At 390 everything is one column: strip 366x74, print 260x462 centred, the
   four polaroids two by two at 176px with no arc and no drop, then the sheet
   and the tag full width. Section 1868px.

   THE ARC.  --drop on each .step is its margin-top: 26, 4, 10, 30px, so the
   row rises from the first polaroid to the second, holds, and falls again at
   the fourth. Tilts stay inside 3deg because the polaroid material straightens
   to 0deg on hover and a bigger angle makes that jump read as a glitch.

   THE HEADLINE.  h2Line1 and h2Line2 are two leaves of ONE sentence, so they
   are set inline and the break is made by max-width:20ch on the h2 (the type
   scale's own rule). 41 characters of Archivo Black are ~23.2em, so 20ch
   (~596px at the 48px cap) always breaks it into two even lines and never
   three: proven at 1440, 1280, 1024 and 390.
   ========================================================================= */

.s-06{
  position:relative;
  padding:var(--gap-section) 0;

  --pw:min(280px, 21vw);   /* the finished ad */
  --left-col:300px;
  --arc-gap:22px;
}

.s-06 .s06-wrap{
  max-width:calc(var(--content-max) + 2 * var(--desk-pad));
  margin:0 auto;
  padding:0 var(--desk-pad);
}

/* ---------- the headline strip ------------------------------------------ */
/* .strip and .tag are not in the materials' transform group (only .pinned and
   the lifting materials are), so an object that lies on the desk and carries
   a --rot has to apply it here. */
.s-06 .s06-head{
  width:min(680px, 54vw);
  margin:0 0 var(--gap-object);
  text-align:left;
  transform:rotate(var(--rot, 0deg));
}
.s-06 .s06-head h2{max-width:20ch}
.s-06 .s06-head .pin-a{--px:4%;--py:50%;--pr:-15deg}
.s-06 .s06-head .pin-b{--px:96%;--py:50%;--pr:21deg}

/* ---------- the table: result on the left, steps on the right ----------- */
.s-06 .s06-table{
  display:grid;
  grid-template-columns:var(--left-col) minmax(0, 1fr);
  gap:var(--gap-object);
  align-items:start;
}

.s-06 .s06-captions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin-top:16px;
}
/* .kraft-tag is tracked caps, which is exactly the voice of a caption stuck
   under a print; two lines of it need to break, so it stops being inline. */
.s-06 .result-label{
  display:block;
  max-width:240px;
  --rot:1.1deg;
  transform:rotate(var(--rot, 0deg));
}
.s-06 .result-tag{
  align-self:flex-end;
  max-width:200px;
  --rot:-1.6deg;
  margin-top:-4px;          /* it tucks under the kraft label's corner */
  transform:rotate(var(--rot, 0deg));
}
.s-06 .result-tag .pin{--px:16%;--py:0%;--pr:-18deg}

/* ---------- the four steps, in a shallow arc ---------------------------- */
.s-06 .s06-arc{
  display:grid;
  /* minmax(0,...) on BOTH grids on purpose: a plain 1fr track keeps a
     min-content floor, and .step-tag is width:max-content, so at 900px the
     four kraft labels pushed the right column 17px past the desk. */
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--arc-gap);
  align-items:start;
  counter-reset:step;
}
/* the arc: the row rises to the second polaroid, holds, and falls at the
   fourth. In CSS and not inline, so the two-up and phone layouts can zero it. */
.s-06 .step{margin-top:var(--drop, 0px)}
.s-06 .step:nth-of-type(1),
.s-06 .step:nth-of-type(4){--drop:26px}
.s-06 .step:nth-of-type(2),
.s-06 .step:nth-of-type(3){--drop:0px}

/* the polaroid carries the class itself, so the material's own selectors
   (.polaroid > img, .polaroid > .polaroid-note) keep working and the WHOLE
   polaroid is the control. A button needs its UA border and alignment
   cleared; the face, the margin, the lift and the straighten are the
   material's. */
.s-06 .polaroid{
  display:block;
  width:100%;
  border:0;
  text-align:left;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
/* MATERIALS.md documents .polaroid with a bare <img>, and the material sizes
   the window with width:100% + aspect-ratio. The builder rules require every
   <img> to carry width and height attributes, and the height attribute is a
   presentational hint on the height PROPERTY, which beats aspect-ratio: the
   640px source height then becomes the window's height. height:auto hands the
   window back to --polaroid-ar. */
.s-06 .polaroid > img{height:auto}

.s-06 .polaroid[aria-pressed="true"]{z-index:var(--z-lift)}

/* The resting tilt cannot be an inline --rot. An inline custom property beats
   every stylesheet, so the material's own straighten (--rot:0deg on hover)
   could never win and the s06 interaction would be a lift with no straighten
   (materials.html's own .polaroid.is-hover sample has that bug). The tilts
   live here, per position, and hover / focus / pressed are restated at a
   higher specificity so the material's behaviour survives. */
.s-06 .step:nth-of-type(1) .polaroid{--rot:-3deg}
.s-06 .step:nth-of-type(2) .polaroid{--rot:-1deg}
.s-06 .step:nth-of-type(3) .polaroid{--rot:1deg}
.s-06 .step:nth-of-type(4) .polaroid{--rot:3deg}
.s-06 .step .polaroid:is(:hover,:focus-within,.is-hover,[aria-pressed="true"]){
  --rot:0deg;
  --lift:-6px;
}
/* the note is a <span> and not a <figcaption>, because a <button> may only
   hold phrasing content; the material's margin-top and min-height need a
   block box, so it gets one back (below, with the title's own measure). */
/* The margin carries the title and nothing else, so the photograph stays the
   object and all four cards are the same height: two lines of .t-small at the
   note's 168px measure, which is also the material's own min-height. */
.s-06 .polaroid-note{
  display:block;
  min-height:calc(2 * 1.35em);
}
.s-06 .pn-title{
  display:block;
  font-weight:700;
  color:var(--ink);
}

/* The numbered kraft label is the step's text block: the ordinal (a counter,
   never a digit in the markup), the step's name and the two lines of copy that
   used to crowd the polaroid's margin. It laps 10px over the photo's bottom
   corner for the mockup's look, and sits at --z-float so the card can never
   cover it. Kraft ink on both lines: only --kraft-ink reaches AA on kraft. */
.s-06 .step-tag{
  display:block;
  position:relative;
  z-index:var(--z-float);
  width:calc(100% - clamp(8px,1vw,16px));
  margin:-10px 0 0 clamp(8px,1vw,16px);
  padding:clamp(9px,1vw,13px) clamp(11px,1.15vw,16px) clamp(10px,1.1vw,15px);
  counter-increment:step;
  transform:rotate(var(--rot, 0deg));
}
.s-06 .st-label{color:var(--kraft-ink)}
.s-06 .st-label::before{
  content:counter(step, decimal-leading-zero);
  display:block;
  margin-bottom:2px;
  font-weight:900;
  /* the .t-h3 size to the character: a pseudo-element cannot take the class,
     and the ordinal is the title of the step */
  font-size:clamp(1.05rem,1.45vw,1.4rem);
  line-height:1.05;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--kraft-ink);
}
.s-06 .st-body{
  margin-top:6px;
  letter-spacing:0;
  text-transform:none;
  color:var(--kraft-ink);
}
.s-06 .step:nth-of-type(1) .step-tag{--rot:1.3deg}
.s-06 .step:nth-of-type(2) .step-tag{--rot:-1.5deg}
.s-06 .step:nth-of-type(3) .step-tag{--rot:1.1deg}
.s-06 .step:nth-of-type(4) .step-tag{--rot:-1.2deg}
.s-06 .step-tag .pin{--px:88%;--py:0%;--pr:16deg}

/* ---------- under the arc: what comes with the example ------------------ */
.s-06 .s06-foot{
  display:flex;
  align-items:flex-start;
  gap:var(--gap-object);
  margin-top:var(--gap-object);
}
.s-06 .inc-sheet{
  flex:1 1 440px;
  max-width:520px;
}
.s-06 .inc-sheet .clip{
  position:absolute;
  left:clamp(18px,2.4vw,38px);
  top:-26px;
}
.s-06 .inc-tail{margin-top:10px}
.s-06 .budget-tag{
  /* a caveat, not a second sheet: narrower than the included-resource sheet,
     the material's own small padding, the material's own small type */
  flex:0 1 280px;
  align-self:flex-start;
  text-align:left;
  transform:rotate(var(--rot, 0deg));
}
.s-06 .budget-tag .pin{--px:92%;--py:0%;--pr:-20deg}

/* ---------- props: the tape roll and the kraft stack at the outer edges -- */
.s-06 .prop-tape{
  right:clamp(10px,1.6vw,30px);
  top:clamp(20px,3vw,48px);
  --prop-w:clamp(110px,10vw,150px);
  --rot:7deg;
}
.s-06 .prop-kraft{
  /* the bottom-left corner is where the print's two caption labels are, so the
     kraft stack goes to the other outer edge, under the caveat tag */
  right:clamp(4px,.8vw,18px);
  bottom:clamp(6px,.9vw,14px);
  --prop-w:clamp(100px,9.5vw,140px);
  --rot:-7deg;
}

/* ---------- entry: the polaroids deal onto the table -------------------- */
/* Motivated: the four steps are an order, and dealing them left to right is
   the same order you read them in. The variant lives on the .step wrapper,
   never on the .polaroid, because [data-reveal].is-in resolves to
   transform:none and would take the polaroid's own tilt, lift and straighten
   with it. */
@media (prefers-reduced-motion: no-preference){
  /* only the variant lives here: since the manager's Phase-3 fix the material's
     own end state already keeps --rot and the hover lift. (0,4,1) beats the
     generic (0,3,1) start and end states. */
  html.reveal-ready .s-06 [data-reveal="deal"]:not(.pinned){
    opacity:0;
    transform:translate(-16px,-10px) rotate(-3deg);
  }
  html.reveal-ready .s-06 [data-reveal="deal"]:not(.pinned).is-in{
    opacity:1;
    transform:none;
    transition:
      opacity 380ms cubic-bezier(.2,.8,.25,1) calc(var(--i, 0) * 70ms),
      transform 460ms cubic-bezier(.2,.8,.25,1) calc(var(--i, 0) * 70ms);
  }
}

/* ============================================================================
   BETWEEN 900 AND 1149px the four-across arc would put the polaroids under
   170px, where a six-line note is 8 lines of 18 characters. The table keeps
   its two columns, the arc becomes two up with no drop, and the finished ad
   grows so it still leads the composition.
   ========================================================================= */
@media (min-width: 900px) and (max-width: 1149px){
  /* the column has to stay wider than the print it holds */
  .s-06{--pw:min(300px, 28vw);--left-col:clamp(250px,30vw,330px)}
  .s-06 .s06-arc{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--gap-row) var(--arc-gap);
  }
  .s-06 .s06-arc .step{max-width:260px}
  .s-06 .s06-arc .step:nth-of-type(n){--drop:0px}
  .s-06 .s06-foot{flex-wrap:wrap}
}

/* ============================================================================
   MOBILE  < 900px.  Video on top, polaroids two by two, no arc: the drops go
   to zero, the tilts under 1deg, and the foot becomes a column.
   ========================================================================= */
@media (max-width: 899px){
  .s-06{
    --pw:min(260px, 72vw);
    --arc-gap:14px;
  }
  .s-06 .s06-head{width:auto}
  .s-06 .s06-head h2{max-width:none}
  .s-06 .s06-table{
    grid-template-columns:minmax(0, 1fr);
    gap:var(--gap-object);
  }
  /* at 899px a two-up grid of the full desk width would make the polaroids
     wider than the finished ad, so the phone column has a ceiling */
  .s-06 .s06-right{max-width:480px;margin:0 auto}
  .s-06 .s06-left{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .s-06 .s06-captions{align-items:center}
  .s-06 .result-label{--rot:.8deg}
  .s-06 .result-tag{align-self:center;--rot:-.8deg}

  /* three classes so the phone grid wins over the desktop rule above */
  .s-06 .s06-right .s06-arc{grid-template-columns:1fr 1fr}
  .s-06 .s06-right .step{margin-top:0}
  .s-06 .s06-right .step:nth-of-type(odd) .polaroid{--rot:-.7deg}
  .s-06 .s06-right .step:nth-of-type(even) .polaroid{--rot:.6deg}
  .s-06 .s06-right .step:nth-of-type(odd) .step-tag{--rot:.6deg}
  .s-06 .s06-right .step:nth-of-type(even) .step-tag{--rot:-.6deg}
  .s-06 .s06-right .step-tag{margin-left:8px}

  .s-06 .s06-foot{
    flex-direction:column;
    gap:var(--gap-row);
  }
  /* the inline tilts of the strip, the print, the sheet and the budget tag are
     all inside the 1deg phone cap already, so they stay as they are */
  .s-06 .inc-sheet{flex:0 0 auto;width:100%;max-width:none}
  .s-06 .budget-tag{flex:0 0 auto;width:100%}
}

/* Measured at 360px: the headline's longest line ("anuncio con producto.") is
   311px of real Archivo Black at the 26.4px floor of .t-h2, and the strip is
   336.7px wide. 10px of side padding leaves 316.7px, so the break stays after
   "un" and the headline stays on two lines. */
@media (max-width: 380px){
  .s-06 .s06-head{padding-left:10px;padding-right:10px}
}