/* ==========================================================================
   Given Style — pages added in the Laravel build
   Free Designs · Patch Guidebook · Terms · Privacy · Blog article
   Extends css/pages.css and reuses its tokens; adds no new colours.
   ========================================================================== */

/* ---------- shared: form feedback ---------- */

.form-note {
    border-radius: var(--gs-r-md);
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
}
.form-note--ok {
    background: rgba(24, 128, 76, .10);
    border: 1px solid rgba(24, 128, 76, .30);
    color: #0F5132;
}
.form-note--err {
    background: rgba(178, 40, 40, .08);
    border: 1px solid rgba(178, 40, 40, .28);
    color: #842029;
}
.field-error {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    color: #B22828;
}
.cp-hint--inline {
    display: inline;
    margin-left: 6px;
    opacity: .7;
    font-weight: 400;
}
.cp-form input[readonly] {
    background: var(--gs-cream);
    cursor: not-allowed;
}
.cp-form input[type="file"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px dashed var(--gs-line);
    border-radius: var(--gs-r-sm);
    background: #fff;
    font-size: 14.5px;
}

/* The pillars head gained a lede on Free Designs. */
.cp-pillars__lede {
    max-width: 720px;
    margin: 14px 0 0;
    color: var(--gs-slate);
    font-size: 16.5px;
    line-height: 1.8;
}

/* ==========================================================================
   FREE DESIGNS — template library
   ========================================================================== */

.fd-templates { padding: var(--gs-sp-6) 0; background: var(--gs-cream); }

.fd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: var(--gs-sp-4);
}
.fd-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-r-lg);
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.fd-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--gs-shadow);
    border-color: #C3CBE0;
}
.fd-card__media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--gs-sand);
}
.fd-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.fd-card:hover .fd-card__media img { transform: scale(1.05); }
.fd-card__size {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: rgba(6, 14, 43, .82);
    color: #fff;
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
}
.fd-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.fd-card__body h3 { font-size: 21px; color: var(--gs-ink); margin-bottom: 10px; }
.fd-card__body p { color: var(--gs-slate); font-size: 15px; line-height: 1.75; margin: 0 0 18px; }
.fd-card__go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 15px;
    color: var(--gs-rust);
}
.fd-card__go svg { width: 18px; height: 18px; transition: transform .3s ease; }
.fd-card:hover .fd-card__go svg { transform: translateX(4px); }

/* ---------- the fine print ---------- */

.fd-rules { padding: var(--gs-sp-6) 0; }
.fd-rules__inner {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 48px;
    align-items: start;
    background: var(--gs-sand);
    border-radius: var(--gs-r-lg);
    padding: 48px;
}
.fd-rules__head h2 { font-size: 30px; color: var(--gs-ink); margin: 0; }
.fd-rules__body p { margin-bottom: 18px; }
.fd-rules__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   PATCH GUIDEBOOK
   ========================================================================== */

/* ---------- chapter index ---------- */

.gb-index { padding: var(--gs-sp-5) 0; background: var(--gs-cream); }
.gb-index__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.gb-index__grid a {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-r-md);
    padding: 22px 24px;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.gb-index__grid a:hover {
    transform: translateY(-4px);
    border-color: #C3CBE0;
    box-shadow: var(--gs-shadow);
}
.gb-index__no {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    color: var(--gs-rust);
    margin-bottom: 8px;
}
.gb-index__grid strong {
    display: block;
    font-size: 19px;
    color: var(--gs-ink);
    font-weight: 600;
    margin-bottom: 4px;
}
.gb-index__grid em {
    display: block;
    font-style: normal;
    font-size: 14.5px;
    color: var(--gs-slate);
    line-height: 1.6;
}

/* ---------- chapters ---------- */

.gb-chapter { padding: var(--gs-sp-6) 0; scroll-margin-top: 90px; }
.gb-chapter--alt { background: var(--gs-cream); }

.gb-chapter__head { max-width: 780px; margin-bottom: var(--gs-sp-4); }
.gb-chapter__head h2 {
    font-size: 36px;
    color: var(--gs-ink);
    margin: 8px 0 16px;
    line-height: 1.25;
}
.gb-chapter__head p {
    color: var(--gs-slate);
    font-size: 16.5px;
    line-height: 1.85;
    margin: 0;
}

/* ---------- reference tables ---------- */

/* Wide tables scroll inside their own box rather than pushing the page. */
.gb-table__wrap {
    overflow-x: auto;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-r-md);
    background: #fff;
}
.gb-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 15.5px;
}
.gb-table thead th {
    background: var(--gs-navy);
    color: #fff;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 15px 22px;
}
.gb-table tbody th,
.gb-table tbody td {
    padding: 17px 22px;
    border-top: 1px solid var(--gs-line);
    vertical-align: top;
    line-height: 1.65;
}
.gb-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--gs-ink);
    white-space: nowrap;
}
.gb-table tbody td { color: var(--gs-slate); }
.gb-table tbody td strong { color: var(--gs-rust); font-weight: 600; }
.gb-table tbody tr:nth-child(even) { background: rgba(251, 248, 243, .6); }

/* ---------- pull-aside note ---------- */

.gb-aside {
    margin-top: 28px;
    border-left: 3px solid var(--gs-rust);
    padding: 4px 0 4px 24px;
}
.gb-aside p {
    margin: 0;
    color: var(--gs-ink);
    font-size: 16px;
    line-height: 1.85;
}
.gb-aside--flush { margin-top: 24px; }

/* ---------- chips + cards ---------- */

.gb-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.gb-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--gs-line);
    background: #fff;
    color: var(--gs-navy);
    font-size: 14.5px;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.gb-chip:hover { background: var(--gs-navy); border-color: var(--gs-navy); color: #fff; }

.gb-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.gb-cards--tight { grid-template-columns: repeat(3, 1fr); }
.gb-card {
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-r-md);
    padding: 30px 30px 32px;
}
.gb-chapter--alt .gb-card { background: #fff; }
.gb-card__no {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    color: var(--gs-rust);
    line-height: 1;
    margin-bottom: 14px;
}
.gb-card h3 { font-size: 20px; color: var(--gs-ink); margin-bottom: 10px; }
.gb-card p { color: var(--gs-slate); font-size: 15.5px; line-height: 1.8; margin: 0; }
.gb-card--care h3 { font-size: 18px; }

/* ---------- artwork split ---------- */

.gb-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}
.gb-split h2 { font-size: 34px; color: var(--gs-ink); margin: 8px 0 16px; line-height: 1.25; }
.gb-split > div > p { color: var(--gs-slate); font-size: 16.5px; line-height: 1.85; }

.gb-checks { list-style: none; margin: 0; padding: 0; }
.gb-checks li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--gs-line);
    color: var(--gs-ink);
    font-size: 16px;
    line-height: 1.6;
}
.gb-checks li:first-child { padding-top: 0; }
.gb-checks li:last-child { border-bottom: 0; }
.gb-checks svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--gs-rust); margin-top: 1px; }

/* ==========================================================================
   LEGAL PAGES — terms & privacy
   ========================================================================== */

.pg-hero--legal { padding-bottom: 120px; }

.lg-masthead { max-width: 760px; }
.lg-updated {
    margin: 22px 0 0;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .68);
    letter-spacing: .03em;
}

.lg-body { padding: var(--gs-sp-6) 0; }
.lg-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 64px;
    align-items: start;
}

.lg-toc {
    position: sticky;
    top: 28px;
    background: var(--gs-cream);
    border-radius: var(--gs-r-md);
    padding: 26px 24px;
}
.lg-toc h2 {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gs-rust);
    margin-bottom: 16px;
}
.lg-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
}
.lg-toc li { counter-increment: toc; }
.lg-toc a {
    display: block;
    padding: 8px 0;
    color: var(--gs-slate);
    font-size: 14.5px;
    line-height: 1.5;
    text-decoration: none;
    border-bottom: 1px solid rgba(227, 230, 238, .8);
    transition: color .2s ease;
}
.lg-toc li:last-child a { border-bottom: 0; }
.lg-toc a::before {
    content: counter(toc) ". ";
    color: var(--gs-rust);
}
.lg-toc a:hover { color: var(--gs-navy); }

.lg-content { max-width: 760px; }
.lg-intro p {
    font-size: 17.5px;
    line-height: 1.9;
    color: var(--gs-ink);
}
.lg-clause { margin-top: 46px; scroll-margin-top: 90px; }
.lg-clause h2 {
    font-size: 25px;
    color: var(--gs-ink);
    margin-bottom: 16px;
    line-height: 1.35;
}
.lg-clause__no { color: var(--gs-rust); }
.lg-clause p {
    color: var(--gs-slate);
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 16px;
}
.lg-clause p:last-child { margin-bottom: 0; }
.lg-clause a { color: var(--gs-navy); text-decoration: underline; text-underline-offset: 3px; }
.lg-clause a:hover { color: var(--gs-rust); }

.lg-contact {
    margin-top: 54px;
    padding: 28px 30px;
    background: var(--gs-sand);
    border-radius: var(--gs-r-md);
}
.lg-contact p { margin: 0; font-size: 16px; line-height: 1.85; color: var(--gs-ink); }
.lg-contact a { color: var(--gs-navy); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   BLOG ARTICLE
   ========================================================================== */

.pg-hero--article { padding-bottom: 110px; }
.ar-head { max-width: 800px; }
.ar-meta { margin-top: 22px; color: rgba(255, 255, 255, .72); }
.ar-meta i { color: var(--gs-rust-lit); }

.ar-body { padding: 0 0 var(--gs-sp-6); }
.ar-lead {
    margin: -70px 0 var(--gs-sp-4);
    border-radius: var(--gs-r-lg);
    overflow: hidden;
    box-shadow: var(--gs-shadow-lg);
    position: relative;
    z-index: 2;
}
.ar-lead img { width: 100%; height: auto; display: block; }

.ar-prose { max-width: 760px; margin: 0 auto; }
.ar-prose h2 { font-size: 28px; color: var(--gs-ink); margin: 40px 0 16px; }
.ar-prose h3 { font-size: 22px; color: var(--gs-ink); margin: 32px 0 12px; }
.ar-prose ul,
.ar-prose ol { margin: 0 0 20px; padding-left: 22px; color: var(--gs-slate); }
.ar-prose li { margin-bottom: 10px; line-height: 1.85; font-size: 16px; }
.ar-prose a { color: var(--gs-navy); text-decoration: underline; text-underline-offset: 3px; }
.ar-prose a:hover { color: var(--gs-rust); }

.ar-foot {
    max-width: 760px;
    margin: var(--gs-sp-4) auto 0;
    padding-top: 30px;
    border-top: 1px solid var(--gs-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.ar-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--gs-navy);
    font-weight: 500;
    text-decoration: none;
}
.ar-back svg { width: 19px; height: 19px; transition: transform .3s ease; }
.ar-back:hover svg { transform: translateX(-4px); }

.ar-related { background: var(--gs-cream); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {
    .fd-grid,
    .gb-index__grid { grid-template-columns: repeat(2, 1fr); }
    .gb-cards--tight { grid-template-columns: repeat(2, 1fr); }
    .lg-grid { grid-template-columns: 220px 1fr; gap: 44px; }
}

@media (max-width: 991.98px) {
    .fd-rules__inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 30px; }
    .gb-split { grid-template-columns: 1fr; gap: 36px; }
    .lg-grid { grid-template-columns: 1fr; gap: 32px; }
    .lg-toc { position: static; }
    .ar-lead { margin-top: -50px; }
}

@media (max-width: 767.98px) {
    .fd-grid,
    .gb-index__grid,
    .gb-cards,
    .gb-cards--tight { grid-template-columns: 1fr; }
    .gb-chapter { padding: var(--gs-sp-5) 0; }
    .gb-chapter__head h2 { font-size: 29px; }
    .gb-split h2 { font-size: 28px; }
    .lg-clause h2 { font-size: 22px; }
    .ar-lead { margin-top: -30px; border-radius: var(--gs-r-md); }
    .ar-foot { flex-direction: column; align-items: stretch; }
    .ar-foot .btn { text-align: center; }
}