/* ==========================================================================
   grid.css — page container + 12 column FLOAT grid
   No display:flex and no display:grid. Columns are floated and rows are
   closed with the classic ::after { clear: both } pseudo element.

   The Figma frame is 1200px wide with 60px padding, so the content column is
   1080px. A 16px padding on each column reproduces Figma's 32px gap exactly:
     .col-6 -> 556 - 32 = 524px  (Services section)
     .col-4 -> 370.67 - 32 = 338.67px  (Reasons / Rooms cards)
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 60px;
  padding-left: 60px;
}

/* --- Rows -------------------------------------------------------------- */

.row {
  margin-right: -16px;
  margin-left: -16px;
}

.row::after,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 4px gap variant used by the client logo strip. */
.row--gutter-4 {
  margin-right: -2px;
  margin-left: -2px;
}

.row--gutter-4 > .col-1,
.row--gutter-4 > .col-2,
.row--gutter-4 > .col-3,
.row--gutter-4 > .col-4,
.row--gutter-4 > .col-6,
.row--gutter-4 > .col-12 {
  padding-right: 2px;
  padding-left: 2px;
}

/* --- Columns ----------------------------------------------------------- */

/* Listed one by one on purpose. A [class*="col-"] substring selector also
   matches unrelated names such as .footer__col-title and silently floats
   them, so the column classes are spelled out instead. */
.col-1,  .col-2,  .col-3,  .col-4,
.col-5,  .col-6,  .col-7,  .col-8,
.col-9,  .col-10, .col-11, .col-12 {
  float: left;
  min-height: 1px;
  padding-right: 16px;
  padding-left: 16px;
}

.col-1  { width: 8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }

.col-offset-1 { margin-left: 8.333333%; }
.col-offset-2 { margin-left: 16.666667%; }
.col-offset-3 { margin-left: 25%; }

/* Float a column to the right without reordering the markup. */
.col-right { float: right; }

/* --- Float helpers ------------------------------------------------------ */

.float-left  { float: left; }
.float-right { float: right; }
.clear-both  { clear: both; }