/* =========================================================
   YUKINON OFFICIAL WEBSITE
   IPAD PRO 13 ANNIVERSARY FIX V1.1

   Portrait only:
   - prevent 2nd / ANNIVERSARY overlap
   - keep ANNIVERSARY as one word
   - preserve desktop / landscape / phone
   ========================================================= */

@media
  (min-width:821px)
  and (max-width:1180px)
  and (orientation:portrait)
{

  /* -------------------------------------------------------
     TITLE ROW
     2nd | YUKINON / ANNIVERSARY
     ------------------------------------------------------- */

  .anniversary-campaign-title-row{
    display:grid !important;

    grid-template-columns:
      max-content
      minmax(0,1fr) !important;

    align-items:end !important;

    justify-content:start !important;

    column-gap:
      clamp(
        16px,
        2.1vw,
        24px
      ) !important;

    width:100% !important;

    min-width:0 !important;
  }


  /* -------------------------------------------------------
     2nd NUMBER
     Actual class in index.html
     ------------------------------------------------------- */

  .anniversary-campaign-number{
    position:relative;

    flex:none !important;

    width:auto !important;

    min-width:
      72px !important;

    margin:0 !important;

    padding:0 !important;

    align-self:end !important;
  }


  .anniversary-campaign-number span{
    display:block !important;

    margin:0 !important;

    font-size:
      clamp(
        3rem,
        5.2vw,
        4rem
      ) !important;

    line-height:
      .82 !important;

    white-space:
      nowrap !important;

    word-break:
      keep-all !important;
  }


  .anniversary-campaign-number small{
    white-space:
      nowrap !important;

    word-break:
      keep-all !important;
  }


  /* -------------------------------------------------------
     RIGHT TITLE BLOCK
     There is no .anniversary-campaign-title-wrap in HTML.
     Use the actual direct child instead.
     ------------------------------------------------------- */

  .anniversary-campaign-title-row
  > div:last-child{
    min-width:0 !important;

    width:100% !important;
  }


  .anniversary-campaign-brand{
    margin-bottom:
      5px !important;

    white-space:
      nowrap !important;

    word-break:
      keep-all !important;
  }


  #anniversary-campaign-title{
    display:block !important;

    width:auto !important;
    max-width:100% !important;

    margin:0 !important;

    font-size:
      clamp(
        2.15rem,
        4.35vw,
        3rem
      ) !important;

    line-height:
      .96 !important;

    letter-spacing:
      .008em !important;

    white-space:
      nowrap !important;

    word-break:
      keep-all !important;

    overflow-wrap:
      normal !important;

    hyphens:
      none !important;
  }


  .anniversary-campaign-jp{
    margin-top:
      7px !important;
  }

}


/* =========================================================
   YUKINON OFFICIAL WEBSITE
   IPAD PRO 13 ANNIVERSARY POSITION TUNE V1.1.2

   Restore V1.1 typography.
   Adjust ONLY the vertical position of "2nd".
   ========================================================= */

@media
  (min-width:821px)
  and (max-width:1180px)
  and (orientation:portrait)
{

  .anniversary-campaign-number{
    transform:
      translateY(-8px) !important;
  }

}


/* =========================================================
   YUKINON OFFICIAL WEBSITE
   PHONE LANDSCAPE ANNIVERSARY FIX V1.1.4

   - "nd" does not consume horizontal space
   - ANNIVERSARY stays inside the left column
   - iPad portrait remains untouched
   ========================================================= */

@media
  (orientation:landscape)
  and (max-width:1180px)
  and (max-height:600px)
{

  /* -------------------------------------------------------
     TITLE ROW
     ------------------------------------------------------- */

  .anniversary-campaign-title-row{
    display:grid !important;

    grid-template-columns:
      72px
      minmax(0,1fr) !important;

    align-items:start !important;

    column-gap:
      12px !important;

    width:100% !important;

    min-width:0 !important;
  }


  /* -------------------------------------------------------
     2 + nd
     "nd" floats over the upper-right of 2.
     It no longer takes horizontal layout width.
     ------------------------------------------------------- */

  .anniversary-campaign-number{
    position:relative !important;

    display:block !important;

    width:72px !important;
    min-width:72px !important;

    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    overflow:visible !important;
  }


  .anniversary-campaign-number span{
    position:relative !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    white-space:nowrap !important;
  }


  .anniversary-campaign-number small{
    position:absolute !important;

    top:-5px !important;
    right:-2px !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    white-space:nowrap !important;

    line-height:1 !important;
  }


  /* -------------------------------------------------------
     TITLE BLOCK
     ------------------------------------------------------- */

  .anniversary-campaign-title-row
  > div:last-child{
    min-width:0 !important;

    width:100% !important;
  }


  .anniversary-campaign-brand{
    white-space:nowrap !important;
  }


  #anniversary-campaign-title{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    font-size:
      clamp(
        2.15rem,
        4.55vw,
        2.75rem
      ) !important;

    line-height:
      1 !important;

    letter-spacing:
      .005em !important;

    white-space:
      nowrap !important;

    word-break:
      keep-all !important;

    overflow-wrap:
      normal !important;

    hyphens:
      none !important;
  }

}



/* =========================================================
   YUKINON OFFICIAL WEBSITE
   PHONE LANDSCAPE ANNIVERSARY MICRO TUNE V1.1.5
   - adjust only 2nd position
   ========================================================= */

@media
  (orientation:landscape)
  and (max-width:1180px)
  and (max-height:600px)
{
  .anniversary-campaign-title-row{
    grid-template-columns:
      82px
      minmax(0,1fr) !important;

    column-gap:
      10px !important;

    align-items:
      start !important;
  }

  .anniversary-campaign-number{
    width:82px !important;
    min-width:82px !important;

    padding-top:
      6px !important;
  }

  .anniversary-campaign-number span{
    line-height:
      .88 !important;
  }

  .anniversary-campaign-number small{
    top:2px !important;
    left:38px !important;
    right:auto !important;

    line-height:
      1 !important;
  }
}