/*
 * Hycomaru mobile and tablet layout
 * Loaded only below 1200px via the <link> media attribute, so the
 * desktop layout (desktop.css, 1200px and wider) is never affected
 */

/* Page frame */

.section-content
{
     width : calc(100% - 40px) ;
     padding-top : 48px ;
     padding-bottom : 56px ;
     box-sizing : border-box ;
}

#what-vordag-is
{
     position : relative ;
     overflow : hidden ;
}

/* Header */

.site-header
{
     height : auto ;
     padding : 20px 0 16px ;
}

.header-inner
{
     flex-direction : column ;
     align-items : flex-start ;
     gap : 16px ;
     width : calc(100% - 40px) ;
}

.brand-name
{
     font-size : 26px ;
     letter-spacing : 20px ;
}

.brand-tagline
{
     font-size : 9px ;
     letter-spacing : 2px ;
}

.primary-nav
{
     display : none ;
}

/* Section arrows: phones scroll naturally */

.section-navigation
{
     display : none ;
}

/* Hero */

.hero
{
     min-height : auto ;
}

.hero::after
{
     content : "" ;
     position : absolute ;
     inset : 0 ;
     background : rgba(6, 17, 27, 0.55) ;
     z-index : 0 ;
}

#hero-title
{
     font-size : 44px ;
}

.hero-intro
{
     width : auto ;
     line-height : 1.6em ;
}

/* Headings and numbers */

.section-number
{
     font-size : 36px ;
     padding-top : 24px ;
}

.section-heading
{
     font-size : 1.6em ;
     overflow-wrap : anywhere ;
}

.cap-h3
{
     color : #C8A96B ;
     font-size : 130% ;
}

.lead
{
     line-height : 1.6em ;
}

.lead + .lead
{
  margin-top: 0;
}

/* Backdrop photographs: shown beneath the text, faded in from the top */

.image-backdrop,
#image-landscape
{
     position : absolute ;
     left : 0 ;
     right : 0 ;
     bottom : 0 ;
     width : 100% ;
     height : 55vw ;
     object-fit : cover ;
     z-index : 0 ;
     -webkit-mask-image : linear-gradient(to bottom, transparent 0%, black 40%) ;
     mask-image : linear-gradient(to bottom, transparent 0%, black 40%) ;
}

.content-section:has(> .image-backdrop) > .section-content,
#what-vordag-is > .section-content
{
     padding-bottom : 45vw ;
}

/* Section 03: darken the whole photograph, not just the left side */

.image-gradient
{
     background : rgba(6, 17, 27, 0.75) ;
}

/* Section 04: landscape strip sits under the panels */

.difference-landscape
{
     position : relative ;
     width : 100% ;
}

.difference-landscape > img
{
     display : block ;
     width : 100% ;
     height : auto ;
     -webkit-mask-image : linear-gradient(to bottom, transparent 0%, black 30%) ;
     mask-image : linear-gradient(to bottom, transparent 0%, black 30%) ;
}

/* Icon sizes (desktop.css sets these only for wide screens) */

.capability img,
.difference-panel > img,
.architect-art img
{
     width : 44px ;
     height : 44px ;
     flex : 0 0 44px ;
}

/* Section 02 capability cards */

.capability
{
     background : rgba(0, 0, 0, 0.4) ;
     border : 2px solid #C8A96B ;
     border-radius : 16px ;
     padding : 20px ;
     margin-top : 16px ;
     text-align : center ;
}

.capable
{
     line-height : 1.5em ;
     margin-top : 12px ;
}

/* Section 03 point list */

.point-list
{
     display : flex ;
     flex-direction : column ;
     gap : 18px ;
     list-style : none ;
     padding : 0 ;
}

.point-list li
{
     display : flex ;
     align-items : center ;
     gap : 16px ;
}

.point-list img
{
     width : 40px ;
     height : 40px ;
     flex : 0 0 40px ;
}

/* Sections 04 and 06 panels */

.difference-grid,
.direction-list
{
     display : grid ;
     gap : 16px ;
}

.difference-panel,
.architect-art
{
     display : flex ;
     align-items : flex-start ;
     gap : 16px ;
     padding : 18px ;
     background : rgba(0, 0, 0, 0.4) ;
     border : 2px solid #C8A96B ;
     border-radius : 16px ;
}

.difference-panel h3,
.architect-art h3
{
     margin : 0 0 6px 0 ;
}

/* Section 05 metrics */

.metrics
{
     display : grid ;
     gap : 14px ;
     margin : 24px 0 ;
}

.metric
{
     border : 2px solid #C8A96B ;
     border-radius : 16px ;
     padding : 16px ;
     text-align : center ;
}

.metric dt
{
     color : #C8A96B ;
     font-size : 26px ;
     font-weight : 700 ;
}

.metric dd
{
     margin : 0 ;
     font-weight : 600 ;
}

/* Section 07 roadmap: narrower name column on tablets */

.trl-header,
.trl-row,
.trl-guides
{
     grid-template-columns : 200px 1fr ;
}

/* Panels with fixed desktop widths */

.panel p
{
     width : auto ;
}

.feature-grid
{
     padding : 1.25rem 1.25rem ;
}

.edition
{
     grid-template-columns : 48px 1fr ;
     column-gap : 16px ;
}

.edition > img
{
     width : 48px ;
     height : 48px ;
}

/* Footer */

#hycologo
{
     display : flex ;
     gap : 4% ;
     width : 80% ;
     max-width : 360px ;
     height : 90px ;
     margin-top : 24px ;
}

#hycologo img
{
     width : 48% ;
     height : 100% ;
     object-fit : fill ;
}

#logotype
{
     font-size : 1.6em ;
     font-weight : 300 ;
     letter-spacing : 0.7em ;
     text-transform : uppercase ;
     margin-bottom : 32px ;
}

.footer-text
{
     font-size : 0.9em ;
}

#british
{
     margin-top : 2rem ;
     width : 9rem ;
}

.copyright
{
     position : static ;
     margin-top : 32px ;
     text-align : left ;
}

/* Phones */

@media (max-width: 700px)
{
  .trl-header,
  .trl-row,
  .trl-guides
  {
      grid-template-columns : 1fr ;
  }

  .trl-guides
  {
      display : grid ;
      grid-template-columns : 1fr ;
  }

  .trl-guide-scale
  {
      grid-column : 1 ;
      padding-left : 22px ;
      padding-right : 22px ;
  }

  #hero-title
  {
      font-size : 38px ;
  }

  .trl-name
  {
    position : relative ;
    padding-left : 22px ;
    padding-right : 22px ;
    margin-bottom : -16px ;
    font-size : 14px ;
  }
}