/* ============================================================
   GolfTrips.com Layout
   Drop-in replacement for the old responsivestyle grid system + reset
   Replaces: html5reset.css, responsivestyle.css, col.css,
             2cols.css through 12cols.css, 1024.css, 768.css, 480.css
             (18 files total - now just this one)
   Uses CSS Flexbox - same class names as before so no template changes needed
   ============================================================ */


/* ============================================================
   MODERN RESET
   Replaces html5reset.css from 2011 with a smaller, modern version
   that does the same job for current browsers.
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
    -webkit-text-size-adjust: 100%;  /* Stop iOS Safari from auto-scaling text */
    -webkit-font-smoothing: antialiased;  /* Cleaner font rendering on macOS */
}

/* Modern responsive media defaults - images and videos behave themselves */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Form elements inherit the page font instead of using ugly browser defaults */
input, button, textarea, select {
    font: inherit;
}

nav ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

a {
    background: transparent;
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del { text-decoration: line-through; }

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}


/* ---------- Container / Section ---------- */
/* A .section is a row. Add .group for the old clearfix class (kept for compatibility). */

.section {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    /* The negative-margin/gap trick: gap handles spacing between columns natively */
    gap: 1.6%;
    row-gap: 16px;
}

/* Old clearfix - keep working even though flex no longer needs it */
.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after { clear: both; }


/* ---------- Column Base ---------- */
/* Every column gets .col plus a .span_X_of_Y class */

.col {
    display: block;
    box-sizing: border-box;
    /* Default: take full width if no span specified */
    flex: 1 1 100%;
}


/* ============================================================
   COLUMN WIDTHS
   Math: (100% - gaps) / total_columns * span_columns
   With 1.6% gap, for N columns there are (N-1) gaps between them.
   Formula: width = ((100 - 1.6 * (N-1)) / N) * span
   Calculated and simplified below.
   ============================================================ */


/* ---------- Grid of 2 ---------- */
.span_1_of_2 { flex: 0 0 calc((100% - 1.6%) / 2); }
.span_2_of_2 { flex: 0 0 100%; }

/* ---------- Grid of 3 ---------- */
.span_1_of_3 { flex: 0 0 calc((100% - 3.2%) / 3); }
.span_2_of_3 { flex: 0 0 calc(((100% - 3.2%) / 3) * 2 + 1.6%); }
.span_3_of_3 { flex: 0 0 100%; }

/* ---------- Grid of 4 ---------- */
.span_1_of_4 { flex: 0 0 calc((100% - 4.8%) / 4); }
.span_2_of_4 { flex: 0 0 calc(((100% - 4.8%) / 4) * 2 + 1.6%); }
.span_3_of_4 { flex: 0 0 calc(((100% - 4.8%) / 4) * 3 + 3.2%); }
.span_4_of_4 { flex: 0 0 100%; }

/* ---------- Grid of 5 ---------- */
.span_1_of_5 { flex: 0 0 calc((100% - 6.4%) / 5); }
.span_2_of_5 { flex: 0 0 calc(((100% - 6.4%) / 5) * 2 + 1.6%); }
.span_3_of_5 { flex: 0 0 calc(((100% - 6.4%) / 5) * 3 + 3.2%); }
.span_4_of_5 { flex: 0 0 calc(((100% - 6.4%) / 5) * 4 + 4.8%); }
.span_5_of_5 { flex: 0 0 100%; }

/* ---------- Grid of 6 ---------- */
.span_1_of_6 { flex: 0 0 calc((100% - 8%) / 6); }
.span_2_of_6 { flex: 0 0 calc(((100% - 8%) / 6) * 2 + 1.6%); }
.span_3_of_6 { flex: 0 0 calc(((100% - 8%) / 6) * 3 + 3.2%); }
.span_4_of_6 { flex: 0 0 calc(((100% - 8%) / 6) * 4 + 4.8%); }
.span_5_of_6 { flex: 0 0 calc(((100% - 8%) / 6) * 5 + 6.4%); }
.span_6_of_6 { flex: 0 0 100%; }

/* ---------- Grid of 7 ---------- */
.span_1_of_7 { flex: 0 0 calc((100% - 9.6%) / 7); }
.span_2_of_7 { flex: 0 0 calc(((100% - 9.6%) / 7) * 2 + 1.6%); }
.span_3_of_7 { flex: 0 0 calc(((100% - 9.6%) / 7) * 3 + 3.2%); }
.span_4_of_7 { flex: 0 0 calc(((100% - 9.6%) / 7) * 4 + 4.8%); }
.span_5_of_7 { flex: 0 0 calc(((100% - 9.6%) / 7) * 5 + 6.4%); }
.span_6_of_7 { flex: 0 0 calc(((100% - 9.6%) / 7) * 6 + 8%); }
.span_7_of_7 { flex: 0 0 100%; }

/* ---------- Grid of 8 ---------- */
.span_1_of_8 { flex: 0 0 calc((100% - 11.2%) / 8); }
.span_2_of_8 { flex: 0 0 calc(((100% - 11.2%) / 8) * 2 + 1.6%); }
.span_3_of_8 { flex: 0 0 calc(((100% - 11.2%) / 8) * 3 + 3.2%); }
.span_4_of_8 { flex: 0 0 calc(((100% - 11.2%) / 8) * 4 + 4.8%); }
.span_5_of_8 { flex: 0 0 calc(((100% - 11.2%) / 8) * 5 + 6.4%); }
.span_6_of_8 { flex: 0 0 calc(((100% - 11.2%) / 8) * 6 + 8%); }
.span_7_of_8 { flex: 0 0 calc(((100% - 11.2%) / 8) * 7 + 9.6%); }
.span_8_of_8 { flex: 0 0 100%; }

/* ---------- Grid of 9 ---------- */
.span_1_of_9 { flex: 0 0 calc((100% - 12.8%) / 9); }
.span_2_of_9 { flex: 0 0 calc(((100% - 12.8%) / 9) * 2 + 1.6%); }
.span_3_of_9 { flex: 0 0 calc(((100% - 12.8%) / 9) * 3 + 3.2%); }
.span_4_of_9 { flex: 0 0 calc(((100% - 12.8%) / 9) * 4 + 4.8%); }
.span_5_of_9 { flex: 0 0 calc(((100% - 12.8%) / 9) * 5 + 6.4%); }
.span_6_of_9 { flex: 0 0 calc(((100% - 12.8%) / 9) * 6 + 8%); }
.span_7_of_9 { flex: 0 0 calc(((100% - 12.8%) / 9) * 7 + 9.6%); }
.span_8_of_9 { flex: 0 0 calc(((100% - 12.8%) / 9) * 8 + 11.2%); }
.span_9_of_9 { flex: 0 0 100%; }

/* ---------- Grid of 10 ---------- */
.span_1_of_10  { flex: 0 0 calc((100% - 14.4%) / 10); }
.span_2_of_10  { flex: 0 0 calc(((100% - 14.4%) / 10) * 2 + 1.6%); }
.span_3_of_10  { flex: 0 0 calc(((100% - 14.4%) / 10) * 3 + 3.2%); }
.span_4_of_10  { flex: 0 0 calc(((100% - 14.4%) / 10) * 4 + 4.8%); }
.span_5_of_10  { flex: 0 0 calc(((100% - 14.4%) / 10) * 5 + 6.4%); }
.span_6_of_10  { flex: 0 0 calc(((100% - 14.4%) / 10) * 6 + 8%); }
.span_7_of_10  { flex: 0 0 calc(((100% - 14.4%) / 10) * 7 + 9.6%); }
.span_8_of_10  { flex: 0 0 calc(((100% - 14.4%) / 10) * 8 + 11.2%); }
.span_9_of_10  { flex: 0 0 calc(((100% - 14.4%) / 10) * 9 + 12.8%); }
.span_10_of_10 { flex: 0 0 100%; }

/* ---------- Grid of 11 ---------- */
.span_1_of_11  { flex: 0 0 calc((100% - 16%) / 11); }
.span_2_of_11  { flex: 0 0 calc(((100% - 16%) / 11) * 2 + 1.6%); }
.span_3_of_11  { flex: 0 0 calc(((100% - 16%) / 11) * 3 + 3.2%); }
.span_4_of_11  { flex: 0 0 calc(((100% - 16%) / 11) * 4 + 4.8%); }
.span_5_of_11  { flex: 0 0 calc(((100% - 16%) / 11) * 5 + 6.4%); }
.span_6_of_11  { flex: 0 0 calc(((100% - 16%) / 11) * 6 + 8%); }
.span_7_of_11  { flex: 0 0 calc(((100% - 16%) / 11) * 7 + 9.6%); }
.span_8_of_11  { flex: 0 0 calc(((100% - 16%) / 11) * 8 + 11.2%); }
.span_9_of_11  { flex: 0 0 calc(((100% - 16%) / 11) * 9 + 12.8%); }
.span_10_of_11 { flex: 0 0 calc(((100% - 16%) / 11) * 10 + 14.4%); }
.span_11_of_11 { flex: 0 0 100%; }

/* ---------- Grid of 12 ---------- */
.span_1_of_12  { flex: 0 0 calc((100% - 17.6%) / 12); }
.span_2_of_12  { flex: 0 0 calc(((100% - 17.6%) / 12) * 2 + 1.6%); }
.span_3_of_12  { flex: 0 0 calc(((100% - 17.6%) / 12) * 3 + 3.2%); }
.span_4_of_12  { flex: 0 0 calc(((100% - 17.6%) / 12) * 4 + 4.8%); }
.span_5_of_12  { flex: 0 0 calc(((100% - 17.6%) / 12) * 5 + 6.4%); }
.span_6_of_12  { flex: 0 0 calc(((100% - 17.6%) / 12) * 6 + 8%); }
.span_7_of_12  { flex: 0 0 calc(((100% - 17.6%) / 12) * 7 + 9.6%); }
.span_8_of_12  { flex: 0 0 calc(((100% - 17.6%) / 12) * 8 + 11.2%); }
.span_9_of_12  { flex: 0 0 calc(((100% - 17.6%) / 12) * 9 + 12.8%); }
.span_10_of_12 { flex: 0 0 calc(((100% - 17.6%) / 12) * 10 + 14.4%); }
.span_11_of_12 { flex: 0 0 calc(((100% - 17.6%) / 12) * 11 + 16%); }
.span_12_of_12 { flex: 0 0 100%; }


/* ============================================================
   RESPONSIVE CONTAINER SIZING
   Replaces what 1024.css and 768.css used to do
   ============================================================ */

/* Tablet landscape - same as old 1024.css */
@media only screen and (max-width: 1024px) {
    header,
    footer,
    #maincontent,
    .maincontent {
        width: 93.75%;
    }
}

/* Tablet portrait - same as old 768.css */
@media only screen and (max-width: 768px) {
    header,
    footer,
    #maincontent,
    .maincontent {
        width: 93.75%;
    }
    .lightcontainer { width: 99%; }
}


/* ============================================================
   TABLET BREAKPOINT - NEW BEHAVIOR
   The old system kept columns at full desktop widths on tablets,
   which made 4+ column rows feel cramped. This collapses
   high-count grids to roughly half their column count on tablets.
   If you don't want this, just delete this block.
   ============================================================ */

@media only screen and (max-width: 900px) and (min-width: 481px) {
    /* Anything spanning 5+ columns of 5/6/7/8/9/10/11/12 grids
       gets full width on tablets so layouts breathe */
    .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8,
    .span_4_of_9, .span_5_of_9, .span_6_of_9, .span_7_of_9, .span_8_of_9,
    .span_4_of_10, .span_5_of_10, .span_6_of_10, .span_7_of_10, .span_8_of_10, .span_9_of_10,
    .span_4_of_11, .span_5_of_11, .span_6_of_11, .span_7_of_11, .span_8_of_11, .span_9_of_11, .span_10_of_11,
    .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12 {
        flex: 0 0 100%;
    }

    /* Smaller spans on big grids become half-width */
    .span_1_of_8, .span_2_of_8, .span_3_of_8,
    .span_1_of_9, .span_2_of_9, .span_3_of_9,
    .span_1_of_10, .span_2_of_10, .span_3_of_10,
    .span_1_of_11, .span_2_of_11, .span_3_of_11,
    .span_1_of_12, .span_2_of_12, .span_3_of_12 {
        flex: 0 0 calc((100% - 1.6%) / 2);
    }
}


/* ============================================================
   MOBILE - EVERYTHING STACKS
   Same behavior as the old system at 480px
   ============================================================ */

@media only screen and (max-width: 480px) {
    .section { gap: 16px; }
    .col,
    [class*="span_"] {
        flex: 0 0 100% !important;
        margin-left: 0 !important;
    }

    header,
    footer,
    #maincontent,
    .maincontent {
        width: 93.75%;
    }
    .lightcontainer { width: 99%; }
}