/* Applications hub (/applications/), design guideline: hub pages (short lead, equal cards, one action each), cards
 * (12 px radius, white fill, thin border, soft purple shadow on hover), Montserrat 400/700, 8 px spacing scale.
 * Loaded by inc/applications-hub.php on pages with a .pg-app-hub container (body class pg-app-hub-page).
 * Content stays in Avada (Library element "All Applications"): a lead Text element, then one column per card with an
 * Image and a Text element (first paragraph = category label, Heading 3 with a link = title). Styles key on that
 * structure, so a card the web team adds in Avada Builder gets the same look. Source: Dev Docs/Design/applications_hub/. */

/* Section and grid: the shared 1,224 px column, 64 px section padding (48 px on phones), cards on a 24 px gap. */
body.pg-app-hub-page #content .pg-app-hub.fusion-fullwidth { max-width: 1224px; margin: 0 auto !important; padding: var(--pg-section-y) 32px !important; box-sizing: border-box; background: none !important; }
body.pg-app-hub-page #content .pg-app-hub > .fusion-builder-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pg-space-3); width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.pg-app-hub-page #content .pg-app-hub > .fusion-builder-row::before, body.pg-app-hub-page #content .pg-app-hub > .fusion-builder-row::after, body.pg-app-hub-page #content .pg-app-hub > .fusion-builder-row > .fusion-clearfix { display: none !important; }
body.pg-app-hub-page #content .pg-app-hub > .fusion-builder-row > .fusion-layout-column { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; }

/* Lead: one centered line of orientation above the cards. */
body.pg-app-hub-page #content .pg-app-hub__lead { grid-column: 1 / -1; }
body.pg-app-hub-page #content .pg-app-hub__lead .fusion-column-wrapper { padding: 0 !important; margin: 0 !important; }
body.pg-app-hub-page #content .pg-app-hub__lead p { max-width: 820px; margin: 0 auto var(--pg-space-2) !important; text-align: center; font-size: 18px !important; line-height: 1.6 !important; color: var(--pg-ink) !important; }

/* Card: white, thin border, 12 px corners; the title link covers the whole card; hover lifts it with the soft shadow. */
body.pg-app-hub-page #content .pg-app-card { position: relative; }
body.pg-app-hub-page #content .pg-app-card > .fusion-column-wrapper { display: flex !important; flex-direction: column; height: 100%; margin: 0 !important; padding: 0 !important; background: var(--pg-white) !important; border: 1px solid var(--pg-border); border-radius: var(--pg-radius-md); overflow: hidden !important; box-sizing: border-box; transition: box-shadow 0.2s ease, transform 0.2s ease; }
body.pg-app-hub-page #content .pg-app-card:hover > .fusion-column-wrapper { box-shadow: var(--pg-shadow-card); transform: translateY(-2px); }
body.pg-app-hub-page #content .pg-app-card:focus-within > .fusion-column-wrapper { outline: 3px solid var(--pg-purple); outline-offset: 3px; }
/* Avada resets the wrapper's overflow, so the image rounds its own top corners too (left corners on phones). */
body.pg-app-hub-page #content .pg-app-card .fusion-imageframe { display: block !important; margin: 0 !important; line-height: 0; overflow: hidden; border-radius: 11px 11px 0 0 !important; }
body.pg-app-hub-page #content .pg-app-card .fusion-imageframe img { display: block; width: 100%; height: auto; aspect-ratio: 18 / 13; object-fit: cover; border-radius: 0 !important; }
body.pg-app-hub-page #content .pg-app-card .fusion-text { margin: 0 !important; padding: var(--pg-space-2) var(--pg-space-3) var(--pg-space-3); }
body.pg-app-hub-page #content .pg-app-card .fusion-text > p:first-child { margin: 0 0 var(--pg-space-1) !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pg-purple) !important; }
body.pg-app-hub-page #content .pg-app-card .fusion-text h3 { margin: 0 !important; font-size: 20px !important; line-height: 1.3 !important; font-weight: 700 !important; color: var(--pg-ink) !important; }
body.pg-app-hub-page #content .pg-app-card .fusion-text h3 a { color: inherit !important; text-decoration: none !important; }
body.pg-app-hub-page #content .pg-app-card .fusion-text h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
body.pg-app-hub-page #content .pg-app-card .fusion-text h3 a:focus-visible { outline: none; }
body.pg-app-hub-page #content .pg-app-card:hover .fusion-text h3 { color: var(--pg-purple) !important; }
/* One font: pasted inline fonts never win (design guideline: Montserrat everywhere). */
body.pg-app-hub-page #content .pg-app-hub :is(p, span, h1, h2, h3, h4, a, strong) { font-family: var(--pg-font) !important; }

/* Tablets: two cards per row. */
@media (max-width: 1024px) {
	body.pg-app-hub-page #content .pg-app-hub > .fusion-builder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: one compact row per card (small image beside the text), so the list stays scannable. */
@media (max-width: 767px) {
	body.pg-app-hub-page #content .pg-app-hub.fusion-fullwidth { padding: var(--pg-section-y) 16px !important; }
	body.pg-app-hub-page #content .pg-app-hub > .fusion-builder-row { grid-template-columns: 1fr; gap: var(--pg-space-2); }
	body.pg-app-hub-page #content .pg-app-card > .fusion-column-wrapper { flex-direction: row; align-items: center; }
	body.pg-app-hub-page #content .pg-app-card .fusion-imageframe { flex: 0 0 112px; align-self: stretch; border-radius: 11px 0 0 11px !important; }
	body.pg-app-hub-page #content .pg-app-card .fusion-imageframe img { height: 100%; aspect-ratio: 1 / 1; }
	body.pg-app-hub-page #content .pg-app-card .fusion-text { padding: var(--pg-space-2); }
	body.pg-app-hub-page #content .pg-app-card .fusion-text h3 { font-size: 17px !important; }
	body.pg-app-hub-page #content .pg-app-hub__lead p { font-size: 16px !important; text-align: left; }
}

/* Consultation block below the cards (shared Avada Library element "Consultation Quote", also used by other pages:
 * styled here for the hub only). The form sits on the standard gray form panel with one heading; the side boxes are
 * white cards; pasted inline fonts and sizes are overridden; the old divider line is hidden. */
body.pg-app-hub-page #content .ib-sj-des.fusion-fullwidth { max-width: 1224px; margin: 0 auto var(--pg-section-y) !important; padding: var(--pg-space-5) var(--pg-space-4) !important; background: var(--pg-surface) !important; border-radius: var(--pg-radius-md); box-sizing: border-box; }
body.pg-app-hub-page #content .ib-sj-des > .fusion-builder-row { width: 100% !important; max-width: none !important; margin: 0 !important; }
body.pg-app-hub-page #content .ib-sj-des :is(p, span, h1, h2, h3, h4, h5, a, strong, li, label) { font-family: var(--pg-font) !important; }
body.pg-app-hub-page #content .ib-sj-des .fusion-separator, body.pg-app-hub-page #content .ib-sj-des .fusion-sep-clear { display: none !important; }
body.pg-app-hub-page #content .ib-sj-des > .fusion-builder-row > .fusion-layout-column:first-child .fusion-text:first-child p { margin: 0 0 var(--pg-space-2) !important; font-size: 28px !important; line-height: 1.25 !important; font-weight: 700 !important; color: var(--pg-ink) !important; text-align: left !important; }
body.pg-app-hub-page #content .ib-sj-des > .fusion-builder-row > .fusion-layout-column:first-child .fusion-text:first-child p span { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
body.pg-app-hub-page #content .ib-sj-des > .fusion-builder-row > .fusion-layout-column:first-child .fusion-text:first-child p::after { content: ""; display: block; width: 56px; height: 4px; margin: 14px 0 0; border-radius: 2px; background: var(--pg-ribbon); }
body.pg-app-hub-page #content .ib-sj-des > .fusion-builder-row > .fusion-layout-column:first-child .fusion-text:not(:first-child) p { margin: 0 0 var(--pg-space-2) !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--pg-ink) !important; }
body.pg-app-hub-page #content .ib-sj-des > .fusion-builder-row > .fusion-layout-column:first-child .fusion-text:not(:first-child) p span { font-size: inherit !important; }
body.pg-app-hub-page #content .ib-sj-des .fusion-text p:empty { display: none; }
body.pg-app-hub-page #content .ib-sj-des .gform_wrapper { margin: var(--pg-space-3) 0 0 !important; }
body.pg-app-hub-page #content .ib-sj-des .gform_body { padding-left: 0 !important; padding-right: 0 !important; }
/* Side boxes: white cards, thin border, 12 px corners, 16 px gap; heading 18 px bold, text 16 px, link as a text link. */
body.pg-app-hub-page #content .ib-sj-des .fusion-content-boxes { margin: 0 !important; }
body.pg-app-hub-page #content .ib-sj-des .content-box-column { width: 100% !important; margin: 0 0 var(--pg-space-2) !important; padding: 0 !important; float: none !important; }
body.pg-app-hub-page #content .ib-sj-des .content-box-wrapper { margin: 0 !important; padding: var(--pg-space-3) !important; background: var(--pg-white) !important; border: 1px solid var(--pg-border) !important; border-radius: var(--pg-radius-md) !important; box-shadow: none !important; }
body.pg-app-hub-page #content .ib-sj-des .content-box-heading { margin: 0 0 var(--pg-space-1) !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; color: var(--pg-ink) !important; }
body.pg-app-hub-page #content .ib-sj-des .content-container, body.pg-app-hub-page #content .ib-sj-des .content-container :is(p, span) { font-size: 15px !important; line-height: 1.6 !important; color: var(--pg-ink) !important; }
body.pg-app-hub-page #content .ib-sj-des .content-container p:last-child { margin-bottom: 0 !important; }
body.pg-app-hub-page #content .ib-sj-des .content-container a { color: var(--pg-purple) !important; font-weight: 700 !important; }
body.pg-app-hub-page #content .ib-sj-des .content-container a:hover { color: var(--pg-orange-strong) !important; }

/* Phones: panels run to the screen edge (square corners) and text sits 16 px in, as on the other rebuilt pages. */
@media (max-width: 767px) {
	body.pg-app-hub-page #content > .ast-container { padding-left: 0 !important; padding-right: 0 !important; }
	body.pg-app-hub-page #content .ib-sj-des.fusion-fullwidth { padding: var(--pg-space-4) 16px !important; border-radius: 0; }
	body.pg-app-hub-page #content .ib-sj-des > .fusion-builder-row > .fusion-layout-column:first-child .fusion-text:first-child p { font-size: 24px !important; }
	body.pg-app-hub-page #content .ib-sj-des > .fusion-builder-row > .fusion-layout-column { width: 100% !important; margin: 0 0 var(--pg-space-3) !important; }
}